Author Topic: 3 Ebenen horizontales Menü, aktiven Pfad CSS highlighten  (Read 2690 times)

Offline root666

  • Posts: 7
3 Ebenen horizontales Menü, aktiven Pfad CSS highlighten
« on: June 01, 2013, 08:19:25 PM »
Hallo Zusammen,

eigentlich bin ich eher der Leser als der Schreiber aber nach 12Std. suchen und probieren frag ich mich gerade ob mein vorhaben überhaupt umsetzbar ist.

Ich erklär euch mal kurz was ich vorhabe bzw. woran ich gerade arbeite.

Menü 1: Link1 Link2 Link3 Link4 .... usw.
<img .....>
Menü 2: Link1 Link2 Link3 Link4 .... usw.
Menü 3: Link1 Link2 Link3 Link4 .... usw.
<?php page_content(); ?>
Menü 1: Link1 Link2 Link3 Link4 .... usw.

hier der code dazu in gekürzter form:
Code: [Select]
<div id="menu1"><?php show_menu(101true'[a][menu_title][/a]''''''''class="menu1_default"''class="menu1_current"''0'); ?></div>

<div id="teaser">
<img src="/media/design/teaser/<?php echo PAGE_ID?>.jpg" width="1200" height="300" border="0">
</div>

<div id="content_container">

<div id="menu2"><?php show_menu(111true'[a][menu_title][/a] &#38;#10003; ''''''''class="menu2_default"''class="menu2_current"''0'); ?></div>
<div id="menu3"><?php show_menu(121true'[a][menu_title][/a] &#38;#10003; ''''''''class="menu3_default"''class="menu3_current"''0'); ?></div>

<div id="content">
  <?php page_content(); ?>
</div>

</div>

<div id="menu4"><?php show_menu(101true'[a][menu_title][/a]''''''''class="menu4_default"''class="menu4_current"''0'); ?> </div>

So weit so gut. Das ganze funktioniert und ist mit CSS bereits in Form gebracht.

Nun zu meinem Problem. Ich möchte das gerne so haben, das wenn ich z.B. im Menü 3 auf Link 2 klicke, dann nicht nur dieser Link als aktueller Link mit CSS formatiert wird, sondern auch im Menü 2 der vorherige und auch im Menü 1 der vorherige. D.h. ich klicke z.B. im Menü 1 auf Link 2 und dieser wird aktiv dargestellt. Menü 2 erscheint. Dann klicke ich dort im Menu 2 auf Link 1 und dieser wird aktiv dargestellt. usw. bis ins Menü 3. Zumindest möchte ich das gerne so realisieren. Denn aktuell ist es so das sobal ich einem anderen Menü etwas anklicke der vorherige nicht mehr als aktiv erscheint.

Hat da jemand einen Rat? Geht das evtl. mit dem show_menu2? Damit habe ich nämlich auch schon herumexperimentiert aber komm ganz und gar nicht mit der formatierung klar. :?

Wäre schön wenn jemand einen Tip für mich hätte, vielleicht sehe ich auch langsam den Wald vor lauter Bäumen nicht mehr  :-D


Offline dbs

  • Betatester
  • **
  • Posts: 8012
  • Gender: Male
  • tioz4ever
    • WebsiteBaker - jQuery-Plugins - Module - Droplets - Tests
Re: 3 Ebenen horizontales Menü, aktiven Pfad CSS highlighten
« Reply #1 on: June 01, 2013, 08:56:40 PM »
Hi, das geht sogar sehr gut mit show_menu2.
Da werden automatisch Klassen zur Verfügung gestellt, die du dann ansprichst. In deinem Fall könntest du mit .menu-parent die darüberliegenden formatieren.
Soweit die Theorie. Weiter oben findest du eine Anleitung zu show_menu2.

Offline root666

  • Posts: 7
Re: 3 Ebenen horizontales Menü, aktiven Pfad CSS highlighten
« Reply #2 on: June 01, 2013, 09:06:07 PM »
Hallo dbs,

das hab ich mir fast gedacht. Hab die Zeit des wartens damit verbracht diese Seite nochmal zu studieren:
http://www.WebsiteBaker.org/forum/index.php/topic,23004.0.html
und kann da schon erkennen das man viele hübsche sachen damit machen kann.
Nur leider hapert es noch am Verständnis für diesen komplexen Aufbau.
Wenn man es mal kapiert hat ist es bestimmt einfach  :-D nunja, dann heisst es wohl lesen, lesen, lesen und learning by doing :)

Vielen Dank aber schon mal, jetzt weiss ich wenigstens das es funktionieren muss und ich nicht einem Gespenst hinterher jage  :lol:

Offline root666

  • Posts: 7
Re: 3 Ebenen horizontales Menü, aktiven Pfad CSS highlighten
« Reply #3 on: June 01, 2013, 10:12:41 PM »
Sorry aber entweder bin ich zu blöde oder das show_menu2 hat ein eingenleben entwickelt.

Code: [Select]
Menu 1: <?php show_menu2(0
        
SM2_ROOT
        
SM2_START
        
SM2_PRETTY,
        
'[a][menu_title]</a>',
        
'',
        
'',
        
'' ); ?>
<br />
Menu 2: <?php show_menu2(0
        
SM2_ROOT+1
        
SM2_START
        
SM2_PRETTY,
        
'[a][menu_title]</a>',
        
'',
        
'',
        
''); ?>
<br />
Menu 3: <?php show_menu2(0
        
SM2_ROOT+2
        
SM2_START
        
SM2_PRETTY,
        
'[a][menu_title]</a>',
        
'',
        
'',
        
''); ?>


Normal sollte ja eine Menü-Leiste nach der anderen aufklappen.
Sobald ich aber in Menü 1 einen Link anklicke, schnappt 2 UND 3 auf???
Ich hab sämtlichen Varianten mit MAX, CURR, START durch und bekomms einfach nicht hin.
Das ist genau das wo ich meinte es übersteigt meinen Horizont. So funktionell das show_menu2 auch sein mag aber es treibt mich in den Wahnsinn wenn es theoretisch korrekt sein müsste aber praktisch was ganz anderes macht und ich nicht durchsteige warum.

Aber bevor ich jetzt hier eine Roman verfasse kurz und bündig die Frage:
Sieht jemand meinen Fehler?
« Last Edit: June 01, 2013, 10:25:42 PM by root666 »

Offline dbs

  • Betatester
  • **
  • Posts: 8012
  • Gender: Male
  • tioz4ever
    • WebsiteBaker - jQuery-Plugins - Module - Droplets - Tests
Re: 3 Ebenen horizontales Menü, aktiven Pfad CSS highlighten
« Reply #4 on: June 01, 2013, 10:25:52 PM »
Ist wirklich ein komplexes Thema, Leicht wirds eventuell mal irgendwann.  :-)

Tausch mal die Zeile
Code: [Select]
SM2_PRETTY,gegen
Code: [Select]
SM2_TRIM|SM2_PRETTY,
Hilft dir evtl. das Thema Mega-Menu weiter?
http://www.WebsiteBaker.org/forum/index.php/topic,21792.msg146640.html#msg146640
« Last Edit: June 01, 2013, 10:29:38 PM by dbs »

Offline root666

  • Posts: 7
Re: 3 Ebenen horizontales Menü, aktiven Pfad CSS highlighten
« Reply #5 on: June 01, 2013, 10:32:30 PM »
Hab ich gemacht, angefangen von Menü3 bis zu Menü 1 hoch und zwischendruch immer getestet:
Code: [Select]
Menu 1: <?php show_menu2(0
        
SM2_ROOT
        
SM2_START
        
SM2_TRIM|SM2_PRETTY,
        
'[a][menu_title]</a>',
        
'',
        
'',
        
'' ); ?>
<br />
Menu 2: <?php show_menu2(0
        
SM2_ROOT+1
        
SM2_START
        
SM2_TRIM|SM2_PRETTY,
        
'[a][menu_title]</a>',
        
'',
        
'',
        
''); ?>
<br />
Menu 3: <?php show_menu2(0
        
SM2_ROOT+2
        
SM2_START
        
SM2_TRIM|SM2_PRETTY,
        
'[a][menu_title]</a>',
        
'',
        
'',
        
''); ?>
Ergebnis unverändert  :?

EDIT: nur mal am Rande, kann es sein das show_menu da rein funkt? Hab das nämlich auch noch 4x eingebunden und soll ja dann durch show_menu2 ersetzt werden, aber bis dahin ist es noch vorhanden.
« Last Edit: June 01, 2013, 10:34:55 PM by root666 »

Offline root666

  • Posts: 7
Re: 3 Ebenen horizontales Menü, aktiven Pfad CSS highlighten
« Reply #6 on: June 01, 2013, 10:43:11 PM »
Hilft dir evtl. das Thema Mega-Menu weiter?
http://www.WebsiteBaker.org/forum/index.php/topic,21792.msg146640.html#msg146640

Puh auf den ersten Blick glaube ich nicht. Das Menü hat wirklich seinen Namen verdient :)
So komplex möchte ich das ja gar nicht aufbauen aber den Link hab ich mir gleich mal in die Favoriten, man weiss ja nie was noch so kommt ;)

EDIT:
hab mir jetzt erstmal so geholfen:
Code: [Select]
Menu 1: <?php show_menu2(0
        
SM2_ROOT
        
SM2_START
        
SM2_CURRTRE,
        
'[a][menu_title]</a>',
        
'',
        
'',
        
'' ); ?>
<br />
Menu 2: <?php show_menu2(0
        
SM2_ROOT+1
        
SM2_START
        
SM2_PRETTY,
        
'[a][menu_title]</a>',
        
'',
        
'',
        
''); ?>
<br />
<?php if (LEVEL 0) { ?>
Menu 3: <?php show_menu2(0
        
SM2_ROOT+2
        
SM2_START
        
SM2_CURRTREE,
        
'[a][menu_title]</a>',
        
'',
        
'',
        
''); ?>

<?php } else ?>
auch wenn ich damit nicht gerade glücklich bin. Mal sehen wie lange der nächste stolperstein auf sich warten lässt. :)
« Last Edit: June 01, 2013, 10:58:56 PM by root666 »

Offline dbs

  • Betatester
  • **
  • Posts: 8012
  • Gender: Male
  • tioz4ever
    • WebsiteBaker - jQuery-Plugins - Module - Droplets - Tests
Re: 3 Ebenen horizontales Menü, aktiven Pfad CSS highlighten
« Reply #7 on: June 01, 2013, 11:29:33 PM »
Nur nochmal zur Sicherheit.
Du möchtest, dass der Elternmenüpunkt ebenfalls gestyled wird.
So wie hier in meinem Menü. Halte die Maus auf WebsiteBaker > Plugins  Klick

Nur du willst das horizontal und mit sichtbaren Menüs.

Offline root666

  • Posts: 7
Re: 3 Ebenen horizontales Menü, aktiven Pfad CSS highlighten
« Reply #8 on: June 02, 2013, 12:07:19 AM »
Jap so ähnlich,
nur das mein Menü anders aufgebaut ist. Aber ich habs geschafft.  8-)

Code: [Select]
<div id="menu1"><?php show_menu2(0
        
SM2_ROOT
        
SM2_START
        
SM2_PRETTY,
        
'<span class="[class]">[ac][menu_title]</a></span>',
        
'',
        
'',
        
'' ); ?>
</div>
<div id="menu2"><?php show_menu2(0
        
SM2_ROOT+1
        
SM2_START
        
SM2_PRETTY,
        
'<span class="[class]">[ac][menu_title]</a></span><span class="hook"> &#38;#10003; </span>',
        
'',
        
'',
        
''); ?>
</div>
<?php if (LEVEL 0) { ?>
<div id="menu3"><?php show_menu2(0
        
SM2_ROOT+2
        
SM2_START
        
SM2_PRETTY,
        
'<span class="[class]">[ac][menu_title]</a></span><span class="hook"> &#38;#10003; </span>',
        
'',
        
'',
        
''); ?>
</div>
<?php } else ?>
<div id="menu4"><?php show_menu2(0
        
SM2_ROOT
        
SM2_START
        
SM2_PRETTY,
        
'<span class="[class]">[ac][menu_title]</a></span>',
        
'',
        
'',
        
'' ); ?>
</div>

CSS:
Code: [Select]
/* #################### MENÜ ################### */
#menu1 {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        width: 1000px;
        height: 27px;
        border: 0px inset #ccc;
        background-image: url(/media/design/menu1_bg.jpg);
}
#menu1 span .menu-sibling, #menu1 a, #menu1 a:link, #menu1 a:visited {
    padding: 4px 25px 6px 25px;
    color: #FFFFFF;
    text-decoration: none;
}
#menu1 span .menu-parent, #menu1 span .menu-current, #menu1 a:hover, #menu1 a:active, #menu1:focus {
    padding: 4px 25px 6px 25px;
    color: #FFFFFF;
    background-image: url(/media/design/menu1_current.jpg);
    text-decoration: none;
}

 
#menu2 {
        margin-left: auto;
        margin-right: auto;
        text-align: left;
        margin-left: 20px;
        width: 1100px;
        border: 0px inset #ccc;
}
#menu2 span .menu-sibling, #menu2 a, #menu2 a:link, #menu2 a:visited {
    color: #777777;
    text-decoration: none;
}
#menu2 span .menu-parent, #menu2 span .menu-current, #menu2 a:hover, #menu2 a:active, #menu2:focus {
    color: #0033cc;
    text-decoration: none;
}

 
#menu3 {
        margin-left: auto;
        margin-right: auto;
        text-align: left;
        margin-left: 80px;
        width: 1000px;
        border: 0px inset #ccc;
}
#menu3 span .menu-sibling, #menu3 a, #menu3 a:link, #menu3 a:visited {
    color: #777777;
    text-decoration: none;
}
#menu3 span .menu-parent, #menu3 span .menu-current, #menu3 a:hover, #menu3 a:active, #menu3:focus {
    color: #666666;
    text-decoration: none;
    font-weight: bold;
}

.hook {
    color: #001199;
}
 
#menu4 {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        display: table-cell;
        vertical-align: middle;
        width: 1200px;
        height: 38px;
        border: 0px inset #ccc;
        background-image: url(/media/design/menu4_bg.jpg);
}
#menu4 span .menu-sibling, #menu4 a, #menu4 a:link, #menu4 a:visited {
    padding: 4px 25px 6px 25px;
    margin-top: 10px;
    color: #FFFFFF;
    text-decoration: none;
}
#menu4 span .menu-parent, #menu4 span .menu-current, #menu4 a:hover, #menu4 a:active, #menu4:focus {
    padding: 4px 25px 6px 25px;
    color: #FFFFFF;
    text-decoration: none;
    font-weight: bold;
}

So funktioniert es nun wie ich es mir vorgestellt habe. Jedes Menü in einer anderen Formatierung und der Pfad wird durchgehend gehighlightet. Jetzt mach ich mich noch dran Pfeile einzubauen zwischen dem 2en un dem 3en Menü. Der soll unter dem Link im 2en Menü erscheinen wenn geklickt wurde. Denke das bekomme ich gar hin. Ansonsten weiss ich ja wo ich kompetente Hilfe finde :) Vielen Dank nochmal und sry das der Code oben noch nicht bereinigt ist. Viel Zeug drin was momentan noch als Hilfe dient. Iss ja noch Baustelle derzeit :)

Offline dbs

  • Betatester
  • **
  • Posts: 8012
  • Gender: Male
  • tioz4ever
    • WebsiteBaker - jQuery-Plugins - Module - Droplets - Tests
Re: 3 Ebenen horizontales Menü, aktiven Pfad CSS highlighten
« Reply #9 on: June 02, 2013, 08:01:25 AM »
Na helfen konnte ich nicht, aber schön zu sehen, dass du klarkommst.
Dann findest du auch raus wie man eine if-Abfrage wegen menu-expand einbaut um deine Pfeile einzubauen.
Good luck.  :wink:

Offline root666

  • Posts: 7
Re: 3 Ebenen horizontales Menü, aktiven Pfad CSS highlighten
« Reply #10 on: June 02, 2013, 06:09:06 PM »
Ich finde schon das du mir geholfen hast, es war ja schon eine große Hilfe zu wissen das ich mit show_menu auf dem Holzweg bin und show_menu2 für mein Vorhaben ausgelegt ist.
Mit den if-Anweisungen habe ich probiert, allerdings ohne Erfolg. Die Theorie verstehe ich und hätte auch keine Probleme damit zu arbeiten aber es funktioniert bei mir nicht.
Hatte mal spaßeshalber dieses Beispiel ausprobiert:
Code: [Select]
<style type="text/css">
span.menu-sibling { /* hier das rein, was bisher in .siblings drin war */ }
span.menu-sibling a { /* hier die Grundformatierung für den Link */ }
span.menu-sibling a:hover { /* hier die Hover-Formatierung für den Link */ }
span.menu-sibling span { /* hier die Formatierung für den Trenner (Pipe) */ }
</style>

show_menu2(
0,
SM2_CURR,
SM2_CURR,
SM2_PRETTY,
'[if(class==menu-sibling){<span class="[class]">[a][menu_title] }][if(class==menu-sibling && class!=menu-last){<span> | </span>}][if(class==menu-sibling){</a>}]',
'[if(class==menu-sibling){</span>}]',
'',
''
);
und natürlich auch entsprechend angepasst aber beim Aufruf der Seite wird die if-Anweisung nicht verabeitet sondern als Text im Menü mit ausgegeben. Hab schon geschaut ob irgendwo ein Befehl nicht geschlossen ist aber habe nichts gefunden. Ist eigentlich recht toll was es alles für Möglichkeiten bei show_menu2 gibt nur funktionieren müsste es auch noch :)

Habe die Pfeile jetzt via CSS gelöst und lass einfach den Pfeil an definierter Position angezigen:
Code: [Select]
#menu2 {
        margin-left: auto;
        margin-right: auto;
        text-align: left;
        width: 1000px;
        height: 45px;
        border: 0px inset #ccc;
}
#menu2 span.menu-sibling, #menu2 a, #menu2 a:link, #menu2 a:visited {
    color: #777777;
    text-decoration: none;
}
#menu2 a:hover, #menu2 a:focus {
    color: #25477E;
    text-decoration: none;
    padding-bottom: 20px;
    filter:alpha(opacity=50); -moz-opacity: 0.50; opacity: 0.50;
    background:transparent url(/media/design/arrow_down.png) bottom center no-repeat;
}
#menu2 a.menu-parent, #menu2 a.menu-current, #menu2 a:active {
    color: #25477E;
    text-decoration: none;
    padding-bottom: 20px;
    background:transparent url(/media/design/arrow_down.png) bottom center no-repeat;
}
Nun habe ich nur noch das schöne Browserproblem, im Firefox und IE8 funktionierst problemlos aber im IE9 wird der Preil nur nach klick an richtiger Position angezeigt, beim Hover steht er genau hinter dem Linktext. Opera, Safari und Co. hab ich noch gar nicht getestet, mal sehen was da noch alles kommt :)

Offline dbs

  • Betatester
  • **
  • Posts: 8012
  • Gender: Male
  • tioz4ever
    • WebsiteBaker - jQuery-Plugins - Module - Droplets - Tests
Re: 3 Ebenen horizontales Menü, aktiven Pfad CSS highlighten
« Reply #11 on: June 02, 2013, 07:23:05 PM »
Wäre dann vielleicht doch gut die Sache mit der if-Abfrage zu klären.
Glaube deine kann nicht richtig funktionieren. Letzens hatten wir das hier so gelöst:
Code: [Select]
<?php
show_menu2
(0,SM2_ROOT,SM2_CURR+1,SM2_TRIM,'[if(class!=menu-expand){[li][a][menu_title]</a>}][if(class==menu-expand){[li][a][menu_title]&nbsp;&nbsp;&raquo;</a>}]','</li>','<ul>','</ul>');
http://www.WebsiteBaker.org/forum/index.php/topic,25828.msg176387.html#msg176387

Statt &nbsp;&nbsp;&raquo; kannst du da auch ein <img... einfügen.


Ansonsten kannst du natürlich für IE auch extra CSS laden lassen. Da du IE9 hast, kannst du auch auf IE8 und IE7 umschalten [F12]. Dann wird die Freude meist noch größer.