MODUL: jQuery Superfish - horizontale Navigation

[xeron]

Guten Morgen,

habe auch das Superfish eingebaut. Funktioniert auch perfekt. Ich würde gerne bei der Anzeige es so haben wie bei diesem Bild hier:

[ Für Gäste sind keine Dateianhänge sichtbar ]

Habe auch schon in der css probiert, komme aber irgendwie nicht weiter. Hat jemand einen kleinen Tipp parat.

Grüße
André

[Matt]

Um was geht's? Um den Schatten? Um den Verlauf? Um die Zweispaltigkeit?

[xeron]

Hallo Matt,

erstmalig um die Zweispaltigkeit. Der Schatten ist auch schön aber nicht zwingend erforderlich.

Grüße
André

[crunky]

[...]
Davon Abgesehen würde ich gerne weitere Kategorien in der horizontalen Navigation erstellen, finde aber nirgends Infos wie das geht...
[...]

Ich finde leider keine Info wie ich das anstellen soll, kann mir bitte Jemand einen Tipp geben oder einen Link wo was dazu steht?!

Eine zweispaltige Lösung würde mich ebenfalls interessieren.

Besten Dank
LG Marco

[Toby]

Gibt es irgendwo eine Anleitung der Base Version von Superfish?
In der zip Datei sind ja nur die bereits veränderten "header.php" und "index.html" enthalten.

Vielen Dank

[h-h-h]

Tutorial: jQuery Dropdown Menü mit Superfish

Für so eine mehrspaltige Version, die auch ohne Javascript funktioniert (kein Superfish), könnt Ihr Euch gerne bei mir melden, habe dafür ein kostenpflichtiges Modul.

Gruß

h-h-h

[Matt]

Ich kenne den genauen Code nicht, aber die Zweispaltigkeit sollte sich erreichen lassen, indem man dem <li> eine feste Breite gibt und ihn dann "floaten" lässt.

[xeron]

@Matt

fragt sich nur welches <li>.

Habe mal die css mit angehängt. Wenn Du oder jemand anderes Lust hat kann er ja mal drüberschauen. Ich steige da nicht durch.

Danke

Code: CSS  [Auswählen]

/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
        margin:                 0;
        padding:                0;
        list-style:             none;
}
.sf-menu {
        line-height:    18px;
}
.sf-menu ul {
        position:               absolute;
        top:                    -999em;
        width:                  10em; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li {
        width:                  100%;
}
.sf-menu li:hover {
        visibility:             inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
        float:                  left;
        position:               relative;
        background:             url("img/bg_topmenu_breakline.gif") no-repeat scroll right center transparent;
}
.sf-menu a {
        display:                block;
        position:               relative;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
        left:                   0;
        top:                    100%; /* match top ul list item height */
        z-index:                99;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
        top:                    -999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
        left:                   10em; /* match ul width */
        top:                    0;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
        top:                    -999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
        left:                   10em; /* match ul width */
        top:                    0;
}

/*** DEMO SKIN ***/
.sf-menu {
        float:                  left;
}
.sf-menu li a {
        padding:                .75em 2em;
        text-decoration:none;
        font-weight:bold;
}
.sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
        color:                  #fff;
}
.sf-menu li li a {
        padding:                .75em 1em;
        text-decoration:none;
        font-weight:normal;
}
.sf-menu li a, .sf-menu li a:visited  { /* visited pseudo selector so IE6 applies text colour*/
        color:                  #fff;
}
.sf-menu li {
        /*background:           url("img/bg_topmenu.gif") repeat-x scroll 0 0 #333333; */
}
.sf-menu li li {
        background:             #3E3D41;
}

.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
        background:             url("img/bg_topmenu_breakline.gif") no-repeat scroll right center #000;
        outline:                0;
}
.sf-menu li li:hover, .sf-menu li li.sfHover,
.sf-menu li a:focus, .sf-menu li li a:hover, .sf-menu li a:active {
        background:             #000;
        outline:                0;
}

/*** arrows **/
.sf-menu a.sf-with-ul {
        min-width:              1px; /* trigger IE7 hasLayout so spans position accurately */
}
.sf-sub-indicator {
        position:               absolute;
        display:                none;
        right:                  .75em;
        top:                    1.05em; /* IE6 only */
        width:                  10px;
        height:                 10px;
        text-indent:    -999em;
        overflow:               hidden;
}
li li .sf-sub-indicator {
        position:               absolute;
        display:                block;
        right:                  .75em;
        top:                    1.05em; /* IE6 only */
        width:                  10px;
        height:                 10px;
        text-indent:    -999em;
        overflow:               hidden;
        background:             url("img/arrows-ffffff.png") no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
}
a > .sf-sub-indicator {  /* give all except IE6 the correct values */
        top:                    .8em;
        background-position: 0 -100px; /* use translucent arrow for modern browsers*/
}
/* apply hovers to modern browsers */
a:focus > .sf-sub-indicator,
a:hover > .sf-sub-indicator,
a:active > .sf-sub-indicator,
li:hover > a > .sf-sub-indicator,
li.sfHover > a > .sf-sub-indicator {
        background-position: -10px -100px; /* arrow hovers for modern browsers*/
}

/* point right for anchors in subs */
.sf-menu ul .sf-sub-indicator { background-position:  -10px 0; }
.sf-menu ul a > .sf-sub-indicator { background-position:  0 0; }
/* apply hovers to modern browsers */
.sf-menu ul a:focus > .sf-sub-indicator,
.sf-menu ul a:hover > .sf-sub-indicator,
.sf-menu ul a:active > .sf-sub-indicator,
.sf-menu ul li:hover > a > .sf-sub-indicator,
.sf-menu ul li.sfHover > a > .sf-sub-indicator {
        background-position: -10px 0; /* arrow hovers for modern browsers*/
}

/*** shadows for all but IE6 ***/
.sf-shadow ul {
        background:     url("img/shadow.png") no-repeat bottom right;
        padding: 0 8px 9px 0;
        -moz-border-radius-bottomleft: 17px;
        -moz-border-radius-topright: 17px;
        -webkit-border-top-right-radius: 17px;
        -webkit-border-bottom-left-radius: 17px;
}
.sf-shadow ul.sf-shadow-off {
        background: transparent;
}

Grüße
André

[h-h-h]

Das funktioniert mit Sicherheit nicht nur mit CSS da müssen Schleifen und rekursiven Funktion angepasst werden, welche einiges überprüfen.
Dafür muss vermutlich das halbe Script umgeschrieben werden.

Gruß

h-h-h

[xeron]

Ja sowas hab ich mir schon gedacht. Wäre ja auch zu schön wenn mal etwas einfach wäre.

Grüße
André

[GTB]

kannst du mal einen Link posten von dem Beispiel ?

Gruss Gerhard

[xeron]

Hallo Gerhard,

hier mal der link wo ich das Menu gesehen habe.

http://www.haertle.de

Grüße
André

[GTB]

Schick. Auf die schnelle sehe ich nur, dass es auch mit jQuery gemacht wurde.

Gruss Gerhard

[h-h-h]

Scheint doch relativ einfach zu gehen mit einem Modulo2 und einem "float", sowie einer festen Breite.

Gruß h-h-h

[Matt]

Scheint doch relativ einfach zu gehen mit einem Modulo2 und einem "float", sowie einer festen Breite.
[...]

Sag ich doch

Ich sehe aber nicht mal den Bedarf für den Modulo. Um da aber was produktives draus zu machen wäre das hier beworbene Modul eingebaut gut - dann kann man da mal ein bisschen drin rumhacken.