| Autor | Zpráva | ||
|---|---|---|---|
| hoverM Profil * |
#1 · Zasláno: 27. 1. 2011, 19:44:05
Ahoj. Snažím se čistě jen v CSS udělat víceúrovňové vysouvací menu. Má to vypadat takto: 1 úroveň položky vedle sebe, po najetí na položku se pod ní objeví pod sebou podnabídka, po najetí na položku v podnabídce se vedle ní objeví další atd. atd. Našel jsem kvanta různých příkladů na menu, které buď nefungovaly nebo byly absolutně pozicovány či s fixní šířkou/výškou nebo jen 2 úrovňové nebo byly částečně v javascriptu, což já nechci. Proto jsem začal bastlit menu vlastní, bohužel jaksi nefunguje a nevím jak dál.
HTML: <div class="topmenu"> <ul> <li> <div>koren1</div> <ul> <li> <a href="#"><div>vetev1</div></a> <ul> <li> <a href="#"><div>vetev11a</div></a> </li> <li> <a href="#"><div>vetev11b</div></a> <ul> <li> <a href="#"><div>vetev111a</div></a> </li> <li> <a href="#"><div>vetev111b</div></a> </li> </ul> </li> </ul> </li> <li> <a href="#"><div>vetevb</div></a> </li> </ul> </li> <li> <a href="#"><div>koren2</div></a> </li> <li> <a href="#"><div>koren3</div></a> </li> </ul> </div> CSS:
.topmenu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.topmenu > ul > li {
display: block;
margin: 0;
padding: 0;
float: left;
}
.topmenu > ul > li div {
display: block;
margin: 0;
padding: 0;
border: 1px solid black;
background: yellow;
line-height: 25px;
}
.topmenu > ul ul {
display: none;
}
.topmenu > ul > li:hover > ul {
display: block;
}
.topmenu > ul ul > li {
display: block;
margin: 0;
padding: 0;
}
.topmenu > ul ul > li div {
display: block;
margin: 0;
padding: 0;
border: 1px solid black;
background: whitesmoke;
line-height: 25px;
float: left;
}
.topmenu > ul ul > li:hover > ul {
display: block;
float: left;
}
.topmenu > ul ul > li:hover > ul > li {
display: block;
margin: 0;
padding: 0;
}
.topmenu > ul ul > li:hover > ul > li div {
display: block;
margin: 0;
padding: 0;
border: 1px solid black;
background: whitesmoke;
line-height: 25px;
}
Mohli byste mě prosím navést správným směrem? Vlastně řeším jeden hlavní problém: jak zobrazit podnabídku vedle položky z nadřazené podnabídky tak aby byla vedle ní a přitom se neroztáhla položka z nabídky 1. úrovně. |
||
| xmark Profil |
#2 · Zasláno: 27. 1. 2011, 19:47:09
|
||
| hoverM Profil * |
#3 · Zasláno: 27. 1. 2011, 19:55:53
To bylo první na co jsem koukal. Pomocí toho jsem tak nějak začal "bastlit". Tam jsou pevné šířky a navíc je jen 3 úrovňové. Já potřebuju N-úrovňové.
|
||
| Chamurappi Profil |
#4 · Zasláno: 27. 1. 2011, 19:59:06
Reaguji na hoverMa:
Přečti si, proč dávat odkaz na živou ukázku. Mimochodem, ty znáš nějakého uživatele, který by rád obsluhoval tříúrovňové hover menu? Podobná bludiště pro myš nejsou moc oblíbená. |
||
| hoverM Profil * |
#5 · Zasláno: 27. 1. 2011, 20:28:16
Vytvářím něco kde bude potřeba i víceúrovňové menu, protože velice ulehčí práci. Menu vytvářím tak, aby se rozevíralo po najetí na blok div, tzn. není potřeba odkaz. Pokud tam takový odkaz je a ještě se menu rozevírá dává uživateli vybrat třeba:
vybrané záznamy ---> editovat (obecná editace) ------> nastavit hodnotuX + 1 ------> ..... HTML kód si generuju pomocí php, takže to je také snadné. Horší je to s tím CSS. Odkaz na ukázku jsem dát nemohu, protože to mám jen lokálně na notebooku. Nicméně tady je to složené dohromady, takže stačí uložit do souboru .html s otevřít v prohlížeči:
<html>
<head>
<title>ukazka</title>
<style type="text/css">
.topmenu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.topmenu > ul > li {
display: block;
margin: 0;
padding: 0;
float: left;
}
.topmenu > ul > li div {
display: block;
margin: 0;
padding: 0;
border: 1px solid black;
background: yellow;
line-height: 25px;
}
.topmenu > ul ul {
display: none;
}
.topmenu > ul > li:hover > ul {
display: block;
}
.topmenu > ul ul > li {
display: block;
margin: 0;
padding: 0;
}
.topmenu > ul ul > li div {
display: block;
margin: 0;
padding: 0;
border: 1px solid black;
background: whitesmoke;
line-height: 25px;
float: left;
}
.topmenu > ul ul > li:hover > ul {
display: block;
float: left;
}
.topmenu > ul ul > li:hover > ul > li {
display: block;
margin: 0;
padding: 0;
}
.topmenu > ul ul > li:hover > ul > li div {
display: block;
margin: 0;
padding: 0;
border: 1px solid black;
background: whitesmoke;
line-height: 25px;
}
</style>
</head>
<body>
<div class="topmenu">
<ul>
<li>
<div>koren1</div>
<ul>
<li>
<a href="#"><div>vetev1</div></a>
<ul>
<li>
<a href="#"><div>vetev11a</div></a>
</li>
<li>
<a href="#"><div>vetev11b</div></a>
<ul>
<li>
<a href="#"><div>vetev111a</div></a>
</li>
<li>
<a href="#"><div>vetev111b</div></a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#"><div>vetevb</div></a>
</li>
</ul>
</li>
<li>
<a href="#"><div>koren2</div></a>
</li>
<li>
<a href="#"><div>koren3</div></a>
</li>
</ul>
</div>
</body>
</html>
|
||
| Chamurappi Profil |
#6 · Zasláno: 27. 1. 2011, 20:31:24 · Upravil/a: Chamurappi
Reaguji na hoverMa:
„Odkaz na ukázku jsem dát nemohu, protože to mám jen lokálně na notebooku.“ Přečti si i zbytek toho povídání, na které jsem tě odkázal minule. „Nicméně tady je to složené dohromady, takže stačí uložit do souboru .html s otevřít v prohlížeči“ Netvrdím, že to nikdo neudělá, ale úplně zbytečně si snižuješ šanci na odpověď. |
||
| hoverM Profil * |
#7 · Zasláno: 27. 1. 2011, 20:39:09
Ok, tady je odkaz: http://jsfiddle.net/vT3TZ/1/
|
||
|
Časová prodleva: 13 let
|
|||
0