Rozbalovacie menu
Napísané: So Aug 11, 2012 4:08 pm
Viete mi niekdo poradit spravny snippet pre "rozbalovacie" menu (moja predstava zobrazovat sa bude len klasicke menu, ale ak adresare obsahuju aj podadresare tak aby sa podadresare (submenu) zobrazili len po kliknuti na nadradeny adresar, potrebujem len dve urovne (hlavne menu + 1 uroven niysie...) neviem ci som spravne vysvetlil oco mi ide preto pripajam demonstracny obrazok).
Pouzivam templat Andreas01 od Andreas Viklund http://andreasviklund.com/files/demo/an ... ndex2.html
Toto je vyhat zo vzoroveho templatu pre Andreas01 - kod pre menu:
Toto je vyhat zo vzoroveho CSS pre Andreas01 - kod pre menu:
skusal som pouzit snippety [!ListMenu?LM_levels=-1!] , [!ListGlobal!] ale nebolo to ono...
Pouzivam templat Andreas01 od Andreas Viklund http://andreasviklund.com/files/demo/an ... ndex2.html
Toto je vyhat zo vzoroveho templatu pre Andreas01 - kod pre menu:
Kód: Vybrať všetko
<div id="leftside">
<h2 class="hide">Menu:</h2>
<ul class="avmenu">
<li><a class="current" href="index.html">index</a></li>
<li><a href="index.html">1</a></li>
<li><a href="index.html">2</a></li>
<li><a href="#">Subpage demo</a>
<ul>
<li><a href="#">Marek Adamec</a></li>
<li><a href="#">Juraj Marušinec</a></li>
</ul>
</li>
</ul>
<div class="announce">
<h2>Najbližšie štarty:</h2>
<p><strong>11. 8. 2012:</strong><br /><a href="#">Rajecký polmaratón</a></p>
<p><strong>15. 9. 2012:</strong><br /><a href="#">River Park Night Run</a></p>
</div>
</div>
Kód: Vybrať všetko
/*Left and right sidebar */
#leftside {clear:left; float:left; margin:0 0 5px; padding:0; width:140px;}
#rightside {float:right; line-height:1.4em; margin:0 0 5px; padding:0; width:140px;}
#leftside p,#leftside ul, #rightside p,#rightside ul {margin:0 0 16px; padding:0;}
#leftside p, #rightside p {font-size:0.9em; line-height:1.4em;}
#leftside li, #rightside li {line-height:1.2em; list-style:none; margin:0 0 6px; padding:0;}
#leftside ul ul, #rightside ul ul {margin:6px 0 0 10px; padding:0;}
#leftside ul ul li, #rightside ul ul li {margin:0 0 4px;}
#leftside ul ul li a, #rightside ul ul li a {font-weight:400;}
#leftside h2,#leftside h3, #rightside h2,#rightside h3 {color:#505050; font-size:1.2em; margin:0 0 8px; padding:0;}
/* Main menu */
#leftside ul.avmenu, #rightside ul.avmenu {display:block; list-style:none; margin:0 0 18px 0; padding:0; width:140px;}
#leftside ul.avmenu li, #rightside ul.avmenu li {display:inline; line-height:1.4em; padding:0; width:140px;}
#leftside ul.avmenu li a, #rightside ul.avmenu li a {background-color:#f4f4f4; border-left:4px solid #ccc; color:#505050; float:left; font-weight:700; margin-bottom:5px; padding:5px 1px 5px 5px; text-decoration:none; width:130px;}
#leftside ul.avmenu li a:hover,#leftside ul.avmenu li a.current, #rightside ul.avmenu li a:hover,#rightside ul.avmenu li a.current {background-color:#eaeaea; border-left:4px solid #286ea0; color:#505050;}
#leftside ul.avmenu ul, #rightside ul.avmenu ul {font-size:0.9em; margin:0 0 0 15px; padding:0 0 5px; width:125px;}
#leftside ul.avmenu ul a, #rightside ul.avmenu ul a {font-weight:400; padding:3px 1px 3px 5px; width:115px;}
#leftside ul.avmenu ul ul, #rightside ul.avmenu ul ul {width:113px;}
#leftside ul.avmenu ul ul a, #rightside ul.avmenu ul ul a {width:100px;}