Strana 1 z 1

Rozbalovacie menu

Napísané: So Aug 11, 2012 4:08 pm
od používateľa Marek Adamec
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).

Obrázok

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>
Toto je vyhat zo vzoroveho CSS pre Andreas01 - kod pre menu:

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;}
skusal som pouzit snippety [!ListMenu?LM_levels=-1!] , [!ListGlobal!] ale nebolo to ono... :(

Re: Rozbalovacie menu

Napísané: Ne Aug 12, 2012 1:08 am
od používateľa _rasel^
Templat Andreas01 nebol primárne vyvinutý pre Etomite a snippet ListMenu a preto defaultné CSS tohto templatu používa iné názvy CSS atribútov, aj keď je funkčnosť rovnaká. Môžeš použiť snippet ListMenu, ale musíš si vybrať z dvoch možností:
  1. premenuješ odkazované CSS id a class v snippete ListMenu tak, aby kód odkazoval na CSS atribúty z templatu Andreas01,
  2. premenuj CSS id a class templatu Andreas01, aby sa zhodoval s tým čo generuje snippet ListMenu.
Odporúčam možnosť A, keďže templat je plne funkčný (aj kvôli budúcim aktualizáciám templatu), ale to je vecou pohľadu, čo ti príde jednoduchšie. Len pridaj do templatu snippet ListMenu a porovnaj, ktoré atribúty CSS majú iný názov.