Horizontalmenü

karman

Aktives Mitglied
28. Dezember 2011
4
0
Berlin
Halle Leute,
hier mal wieder das leidige Thema Horizontalmenü.
Hier im Forum wurde ein Shop vorgestellt -> liftstation.eu
Hier der link im Forum
http://forum.jtl-software.de/vorste...tion-eu-umgesattelt-von-xtc-nach-jtlshop.html

Das Menü von diesem Shop finde ich super und möchte es auch bei mir integrieren.
Der Shopinhaber (jedenfalls der den Shop vorgestellt hat) war so nett und hat den Code im Forum
zur Verfügung gestellt. Jedoch bekomme ich es es nicht hin, hat jemdand damit Erfahrungen und kann
evtl. helfen.

Gruß karman
 

trachten24.eu

Aktives Mitglied
11. April 2011
82
0
AW: Horizontalmenü

Servus zusammen.

Wir haben ebenfalls ein horizontales Dropdown Menü in unserem Shop umgesetzt. Um anderen evtl. zu helfen gibt es nun mal von uns eine Beschreibung dazu. Zunächst: So sieht das Dropdown Menü aus --> www.trachten24.eu

Systemvorraussetzungen:
1. Jquery --> jQuery: The Write Less, Do More, JavaScript Library
2. Superfish --> Superfish - Suckerfish on 'roids

--> beide Dateien im <head></head> Bereich einbinden und schon kann es eigentlich losgehen! ;)

Umsetzung:
1. An gegebener Stelle im Template macht ihr folgendes:
Code:
<div id="hTopMenu">
           <ul class="sf-menu">
{$full_category_tree}
           </ul>
</div>
Vergesst dabei nicht Einstellung unter Template/EuerTemplate/Alle Kategorien aufklappen auf JA zu setzen!

2. Nun noch etwas CSS
Code:
/*     __Superfish Dropdown

-----------------------------------------------------------*/
/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
    margin:            0;
    padding:        0;
    list-style:        none;
}
.sf-menu {
    line-height:    1.0;
}
.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;
}
.sf-menu a {
    display:        block;
    position:        relative;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
    left:            0;
    top:            2.5em; /* 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;
    margin-bottom:    1em;
}
.sf-menu a {
    border-left:    1px solid #fff;
    border-top:        1px solid #CFDEFF;
    padding:         .75em 1em;
    text-decoration:none;
}
.sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
    color:            #13a;
}
.sf-menu li {
    background:        #BDD2FF;
}
.sf-menu li li {
    background:        #AABDE6;
}
.sf-menu li li li {
    background:        #9AAEDB;
}
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
    background:        #CFDEFF;
    outline:        0;
}

/*** arrows **/
.sf-menu a.sf-with-ul {
    padding-right:     2.25em;
    min-width:        1px; /* trigger IE7 hasLayout so spans position accurately */
}
.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('../images/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('../images/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;
}
Wie Ihr euch das ganze vom Style her realisiert ist dabei völlig euch überlassen! ;)

3. sowie etwas JS Code
Code:
$('ul.sf-menu').superfish({ 
              delay:       200,                            // one second delay on mouseout 
              animation:   {opacity:'show',height:'show'},  // fade-in and slide-down animation 
              speed:       'fast',                          // faster animation speed 
              autoArrows:  true,                           // disable generation of arrow mark-up 
              dropShadows: true                            // disable drop shadows        
        });

Ich hoffe wir konnten etwas weiterhelfen und stehen bei Problemen und Fragen HIER im Forum gerne zur Verfügung. ;)

VG
 

MichaelH

Sehr aktives Mitglied
17. November 2008
14.175
1.774
AW: Horizontalmenü

*wow*, na das ist mal eine tolle Beschreibung, als Laie würde ich das sogar noch hinbringen - drum - falls einer das umsetzt bitte hier posten ob´s auch wirklich so einfach ist, bzw. Problemchen hier posten. :)
 

MichaelH

Sehr aktives Mitglied
17. November 2008
14.175
1.774
AW: Horizontalmenü

Wie ist das mit Unterkategorien, kommen die dann auch automatisch in einem weiteren aufklappbaren Superfisch-Untermenü ?!
Mein Menübaum ist recht umfangreich: Kräutershop

Und wie sieht das aus mit dem linken Menü ?
Ist das dann automatisch weg ?

Die obere Leiste mit Startseite / Mein Konto / etc. wird das dann ersetzt oder gibt es eine zweite Reihe mit dem Superfish ?
 

trachten24.eu

Aktives Mitglied
11. April 2011
82
0
AW: Horizontalmenü

Wie ist das mit Unterkategorien, kommen die dann auch automatisch in einem weiteren aufklappbaren Superfisch-Untermenü ?!
Mein Menübaum ist recht umfangreich: Kräutershop

Ist kein problem. Kannst beliebig viele Untermenüs einbauen

Und wie sieht das aus mit dem linken Menü ?
Ist das dann automatisch weg ?
Nein natürlich nicht. bleibt als normale box erhalten, nur eben jetzt komplett aufgeklappt. Aber das könnte man mit JS auch unterbinden, da es bei dir dann ziemlich lang wird...
 

MichaelH

Sehr aktives Mitglied
17. November 2008
14.175
1.774
AW: Horizontalmenü

OK, ich seh` schon, doch nix für einen Laien wie mich ... :) ... never change a running System. Super, dass ich euren Code allen zur Verfügung stellt, für viele Shops sicherlich wertvoll !
 

MichaelH

Sehr aktives Mitglied
17. November 2008
14.175
1.774
AW: Horizontalmenü

Keine Sorge, es gibt ja die 3.13 in Bälde und insofern bleibt das running-system nur beschränkte Zeit !
Im Schnitt wechselt das Team also monatlich ... :) ... und somit muss man die Anpassungen auch monatlich mitziehen bzw. testen und da ich keinen Testshop habe ist das immer ein Risiko.

Ich beobachte den Thread weiterhin und sobald ich das Gefühl habe die Kleinigkeiten klar sind werde ich es mal probieren !
 

MichaelH

Sehr aktives Mitglied
17. November 2008
14.175
1.774
AW: Horizontalmenü

@günther: Also wenn du deinen Menübaum hinbekommst, dann werde ich das auch schaffen !! Da bin ich mal neugierig ! Zum "schmökern" ist das Superfish schon toll, man muss nicht warten bis das Menü aufgeklappt ist sondern es geht superschnell, der Kunde kann sich eine rasche Übersicht verschaffen.
 

karman

Aktives Mitglied
28. Dezember 2011
4
0
Berlin
AW: Horizontalmenü

Ist ja schonmal nicht schlecht das Menü.
Aber ich würde gerne die Untermenüs in Spalten anzeigen lassen wie es bei
liftstation.eu eben der Fall ist.
Aber werde dein Code trotzdem versuchen und evtl. kann man es dann weiter anpassen.
Danke für deine Hilfe ...
Gruss karman
 

renolious

Aktives Mitglied
6. Dezember 2013
7
0
AW: Horizontalmenü

Hi there,

Auch wenn ich nicht glaube das ich noch eine Antwort auf einen 1 Jahr alten Post erhalte, stirbt die Hoffnung dennoch zuletzt und deshalb versuche ich mein Glück :)

Alsooo mein Problem: Ich bin ein Frischling in diesem Shop. Möchte aber dennoch so ein schickes Menü wie bei Trachten24.eu haben. Also hab ich mir das mal durchgelesen und angefangen zu probieren. Allerdings hab ich ein paar Probleme:

1:
An gegebener Stelle im Template macht ihr folgendes:
wo ist diese Stelle?

muss man sämtlichen code von superfish also auch den hier:


<script> jQuery(document).ready(function() { jQuery('ul.sf-menu').superfish(); });</script>Wenn ich das mache verschwindet bei mir die ganze Seite :(

Was ist mit dem bisherigen Menü? Bei mir steht da noch "Startseite" "Mein Konto" usw. wird das dann (wenn es gehen würde) einfach Style-technisch durch superfish ersetzt?

ist der css Text verändert worden oder ist das der Originale der einfach der Vollständigkeit halber drin steht (für mich sieht der nämlich gleich aus)

wäre für eine Antwort echt dankbar ^^

Grüßle

René
 

renolious

Aktives Mitglied
6. Dezember 2013
7
0
AW: Horizontalmenü

Ok das Ding ist nur... Ich bastel lokal an dem Shop herum (hab mit das Dingens mit Xampp am laufen) und wenn man da eine 14 tägige testversion will muss man die Shop URL angeben.

Ich kann denen ja schlecht http://localhost/shop als URL geben :D

Ist das Menü denn die 99 € wert? Ist es einfach zu bedienen? Hat es viele Möglichkeiten?

Alles Fragen die die Welt bewegen :)

Grüßle René
 

MichaelH

Sehr aktives Mitglied
17. November 2008
14.175
1.774
AW: Horizontalmenü

Lies die Doku und es ist DAS Top-Menü das viele einsetzen ... wegen Testlizenz für deine Zwecke musst du dort anfragen, die haben Mail und Telefon ... ;)
 

blackgren

Gut bekanntes Mitglied
1. Februar 2011
358
17
AW: Horizontalmenü

Ich glaube bei Kreativkonzentrat sind die Plugins immer für localhost freigeschaltet.

Als Lizenzschlüssel einfach irgendwas eintragen.
 

testjo

Sehr aktives Mitglied
AW: Horizontalmenü

JEIN hängt von Template ab, für den responsive (beta) sind die noch dran, weiter warten wir also auf ein update.
Einfach für ein wirkliche "Shopadmin" mit kentnisse von einiges ja dan, wen nicht service oder so dazu buchen