CSS horizontální rozbalovací menu – HTML / XHTML – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu

CSS horizontální rozbalovací menu – HTML / XHTML – Fórum – Programujte.comCSS horizontální rozbalovací menu – HTML / XHTML – Fórum – Programujte.com

 

plasmo0
Věrný člen
7. 2. 2009   #1
-
0
-

Ahoj, potřebuju na stránkách, které právě kutím vytvořit rozbalovací menu, tak abych měl xhtml v následujícím tvaru:



<ul class="menu">
<li><a href="#">Položka</a>
<ul>
<li><a href="#">Položka1</a></li>
<li><a href="#">Položka2</a></li>
<li><a href="#">Položka3</a></li>
<li><a href="#">Položka4</a></li>
</ul>
</li>
</ul>


Na stránce bylo vidět jen Položka a po najetí na položku aby se otevřel zbytek nabýtky. Včera jsem googlil jak šílený, ale co jsem našel mi nechtělo fungovat. Submenu se mi stále otevíralo v levo na začátku stránky i když mělo například uprostřed pod 3 položkou mena. Díky za pomoc.

Nahlásit jako SPAM
IP: 82.150.166.–
Jak vzniká vynález? To všichni vědí, že je něco nemožné, a pak se objeví nějaký blázen, který neví, že je to nemožné, a udělá vynález. [br] Albert Einstein [br][br] http://plasmo.cz [br] http://bleskovaregistrace.cz [br] http://livetrading.cz
plasmo0
Věrný člen
7. 2. 2009   #2
-
0
-

Na stránce mám takové to menu:

<ul class="menu">

<li><a href="#" class="nav1">DOMU</a></li>
<li class="divider"></li>
<li><a href="#" class="nav3">AKCE</a>
</li>
<li class="divider"></li>
<li><a href="#" class="nav4">PROFIL</a></li>
<li class="divider"></li>
<li><a href="#" class="nav4">REGISTRACE</a></li>
<li class="divider"></li>
<li><a href="index.php?co=obchod" class="nav5">Informace</a>
<ul class="uroven2">
<li><a href="../html/text.php">Položka 1</a></li>
<li><a href="../html/seznamy.php">Položka 2</a></li>
<li><a href="../html/odkazy.php">Položka 3</a></li>
</ul></li>
<li class="divider"></li>
<li><a href="contact.html" class="nav6">KONTAKT</a></li>
<li class="divider"></li>
</ul>

K tomu následující CSS:


ul.menu {
list-style-type:none; float:left; display:block; width:982px;
margin:0px; padding:0px;background:url(images/menu_bg.gif) repeat-x;}

ul.menu li {
display:inline;
font-size:11px;
font-weight:bold;
line-height:50px;
}
ul.menu li.divider {
display:inline;
width:2px;
height:50px;
float:left;
background:url(images/menu_divider.gif) no-repeat center;
}

.menu li ul{
display: none;
}
.menu li:hover ul{
display: block;
position: absolute;
}


Vše funguje jak má, jen submenu se zobrazju stále pod první položkou, i když patří k 5 položce. Co stím?

Nahlásit jako SPAM
IP: 82.150.166.–
Jak vzniká vynález? To všichni vědí, že je něco nemožné, a pak se objeví nějaký blázen, který neví, že je to nemožné, a udělá vynález. [br] Albert Einstein [br][br] http://plasmo.cz [br] http://bleskovaregistrace.cz [br] http://livetrading.cz
plasmo0
Věrný člen
7. 2. 2009   #3
-
0
-

Tak jsem to vyřešil, css jsem upravil na:



ul.menu {
list-style-type:none; float:left; display:inline; width:982px;
margin:0px; padding:0px;background:url(images/menu_bg.gif) repeat-x;
}

.menu li{
float:left;
font-size:11px;
font-weight:bold;
line-height:50px;
}

ul.menu li.divider {
display:inline;
width:2px;
height:50px;
float:left;
background:url(images/menu_divider.gif) no-repeat center;
}

.menu li ul{
display: none;
}

.uroven2 li{
clear: both;
display: block;
}

.menu li:hover ul{
display: block;
list-style-type:none;
position: absolute;
background-color: rgb(224,224,224);
margin-top: 50px;
padding: 5px 5px 5px 10px;
}

.uroven2 li{
font: 12px ;
line-height: 15px;
}

.uroven2 li a{
color:#676d77;
text-decoration:none;
}

.uroven2 li a:hover{
color:#676d77;
color:#333333;
}


ale v IE mi menu uskakuje o položku do prava, co stím?

Nahlásit jako SPAM
IP: 82.150.166.–
Jak vzniká vynález? To všichni vědí, že je něco nemožné, a pak se objeví nějaký blázen, který neví, že je to nemožné, a udělá vynález. [br] Albert Einstein [br][br] http://plasmo.cz [br] http://bleskovaregistrace.cz [br] http://livetrading.cz
plasmo0
Věrný člen
7. 2. 2009   #4
-
0
-

Ahoj, tak menu chodi jak má, jen mám problém s IEčkama, v IE7 to uskakuje a v IE6 to nedělá radši nic :smile5:

Firefox: [IMG]http://sdilej.net/pics/16210384ce6ba6559ce2eed6719270c4.png[/IMG]

IE7:[IMG]http://sdilej.net/pics/67b3466c97e03bcc754fe3dfa33182ad.png[/IMG]

To menu mi uskakuje v IE7 pod kontakty misto aby bylo pod informacemi :smile10:

Nahlásit jako SPAM
IP: 82.150.166.–
Jak vzniká vynález? To všichni vědí, že je něco nemožné, a pak se objeví nějaký blázen, který neví, že je to nemožné, a udělá vynález. [br] Albert Einstein [br][br] http://plasmo.cz [br] http://bleskovaregistrace.cz [br] http://livetrading.cz
Pavel
~ Anonymní uživatel
383 příspěvků
8. 2. 2009   #5
-
0
-

1) Dělat z blokových prvků inline prvky mi přijde docela odvážné.
2) Používat jako oddělovač prvek seznamu (který simbolizuje obsahový význam) je návrhová chyba.
3) IE se většinou zblázní, pokud má víc plovoucích prvků a zde jimi šetřeno nebylo.
4) Jsou zbytečně nastavovány defaultní hodnoty - je to méně přehledné.
5) Pokud je "float" nastaven pro všechny vnořené elementy, tak se nevypíná vlastností "clear". Jde o chybné pochopení principů CSS.
6) Absolutní pozicování bez zadání pozice by mělo způsobit vykreslení prvku na pozici, kde by byl při statickém pozicování. Nikdy bych se na to nespoléhal.
7) Nastavením "position: relative;" pro prvky vnějšího seznamu, přidáním "top: 50px; left: 0;" vnitřnímu seznamu a záměnou "clear: both;" za "float: none;" v prvcích vnitřního seznamu možná docílíte toho, co jste chtěl :).

Nahlásit jako SPAM
IP: 88.102.73.–
plasmo0
Věrný člen
8. 2. 2009   #6
-
0
-

Děkuji za analýzu mého řešení, stránku jsem nekódoval já, pouze jsem do ni doplňoval menu. Ale ještě jednou děkuji, Vyřešil jsem to nakonec zápisem stylu pro IE:



.menu li:hover ul
{position:absolute; left:-40px; min-width: 120px; max-width: 200px;}

Nahlásit jako SPAM
IP: 82.150.166.–
Jak vzniká vynález? To všichni vědí, že je něco nemožné, a pak se objeví nějaký blázen, který neví, že je to nemožné, a udělá vynález. [br] Albert Einstein [br][br] http://plasmo.cz [br] http://bleskovaregistrace.cz [br] http://livetrading.cz
wokena0
Stálý člen
24. 2. 2009   #7
-
0
-
Nahlásit jako SPAM
IP: 78.102.188.–
md5-generator.wokena.com | blog.wokena.com | wokena.com
predskolaci.cz
~ Anonymní uživatel
1 příspěvek
16. 2. 2010   #8
-
0
-
Nahlásit jako SPAM
IP: 88.146.167.–
Michal
~ Anonymní uživatel
683 příspěvků
30. 11. 2015   #9
-
0
-

Parádní kluci, moc mi to pomohlo, bez Java Scriptu mám funkční rozbalovací horizontální menu v CSS.

Super!!
 

Nahlásit jako SPAM
IP: 2a00:1028:8b40:d636:50a5:...–
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 1 host

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032024 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý