| Autor | Zpráva | ||
|---|---|---|---|
| Fuzena Profil * |
#1 · Zasláno: 16. 2. 2013, 00:51:43
Dobrý den, potřebuji udělat menu, které se rozbalí, ale ne do sloupečku pod sebe, ale vše na jeden řádek ->
Menu něco něco něco něco Zkoušel jsem googlit, ale nic kloudného mi to nevyhodilo, mám vytvořené menu, které vyskakuje pod sebe, ale nevím jak to přehodit, aby se vše rozbalilo na druhém řádku... Poradí mi prosím někdo? css styl .menu {color: black; padding: 0; margin: 0; list-style-type: none; display:block}
.menu ul {margin-top: 0px; position: absolute; visibility: hidden; margin: 0; padding: 0; list-style-type: none;}
.menu li {float: left; padding: 2px 2px 0 2px; width: 100%; white-space: nowrap;}
.menu a {padding: 2px; text-align: left; padding-left: 15px; color: black; display: block; text-decoration: none; font-weight: bold;}
.menu ul a:link {color: black; border-bottom: none; padding-left: 15px; _padding-left: 19px;}
.menu ul a:visited {color: black; border-bottom: none; padding-left: 15px; _padding-left: 19px;}
.menu ul a:hover {color: black;}
.menu li:hover ul, ul.menu li.hover ul { visibility: visible;}
.menu li li {float: none; border: none; padding: 0; margin: 0;}a zapsané menu <table> <tr> <td> <ul class="menu"> <li><a href="">rozbal menu</a> <ul> <li><a href="">něco1</a></li> <li><a href="">něco2</a></li> <li><a href="">něco3</a></li> <li><a href="">něco4</a></li> </ul> </li> </ul> </td> </tr></table> |
||
| Sir Tom Profil |
#2 · Zasláno: 16. 2. 2013, 01:33:10
Fuzena:
Také dobrý den. <style>
.menu {color: black; padding: 0; margin: 0; list-style-type: none; display:block}
.menu ul {margin-top: 0px; position: absolute; visibility: hidden; margin: 0; padding: 0; list-style-type: none;}
.menu li {float: left; padding: 2px 2px 0 2px; white-space: nowrap;} //nesmí zde být width: 100%
.menu a {padding: 2px; text-align: left; padding-left: 15px; color: black; text-decoration: none; font-weight: bold;}
.menu ul a:link {color: black; border-bottom: none; padding-left: 15px; _padding-left: 19px;}
.menu ul a:visited {color: black; border-bottom: none; padding-left: 15px; _padding-left: 19px;}
.menu ul a:hover {color: black;}
.menu li:hover ul, ul.menu li:hover { visibility: visible;} //opravena deklarace prvků, které mají viditelnou viditelnost
.menu li li {border: none; padding: 0; margin: 0;} //odstranit float
</style>
<ul class="menu">
<li><a href="">rozbal menu</a>
<ul>
<li><a href="">něco1</a></li>
<li><a href="">něco2</a></li>
<li><a href="">něco3</a></li>
<li><a href="">něco4</a></li>
</ul>
</li>
</ul>BTW - proč to máš v tabulce? |
||
|
Časová prodleva: 4 měsíce
|
|||
| rurij Profil |
Sir Tom:
Sir Tom: Rád bych se zeptal, že v případe, že chci na miesto rozbalovania menu na jeden riadok, nechať menu rozbalovať pod seba.... čo musím zmeniť? Ďekuju. |
||
| Sir Tom Profil |
#4 · Zasláno: 24. 6. 2013, 19:57:01
rurij:
Zkusím: <style>
.menu {color: black; padding: 0; margin: 0; list-style-type: none; display:block}
.menu ul {margin-top: 0px; position: absolute; visibility: hidden; margin: 0; padding: 0; list-style-type: none;}
.menu li {float: left; padding: 2px 2px 0 2px; white-space: nowrap;} //nesmí zde být width: 100%
.menu a {padding: 2px; text-align: left; padding-left: 15px; color: black; text-decoration: none; font-weight: bold;}
.menu ul a:link {color: black; border-bottom: none; padding-left: 15px; _padding-left: 19px;}
.menu ul a:visited {color: black; border-bottom: none; padding-left: 15px; _padding-left: 19px;}
.menu ul a:hover {color: black;}
.menu li:hover ul, ul.menu li:hover { visibility: visible;} //opravena deklarace prvků, které mají viditelnou viditelnost
.menu li li {border: none; padding: 0; margin: 0; display: block;} //odstranit float
</style>
<ul class="menu">
<li><a href="">rozbal menu</a>
<ul>
<li><a href="">něco1</a></li>
<li><a href="">něco2</a></li>
<li><a href="">něco3</a></li>
<li><a href="">něco4</a></li>
</ul>
</li>
</ul>Netestoval jsem to, kdyby to nešlo, napiš. |
||
| margin Profil * |
#5 · Zasláno: 24. 6. 2013, 21:28:29
Sir Tom:
V CSS používej CSS komentáře, jsem se divil, proč mi to nefungovalo, takovou zradu jsem nečekal ;-) „.menu li li {border: none; padding: 0; margin: 0; display: block;} //odstranit float“ Delkarovat blokové položky jako blokové je zbytečné. Float se všem položkám LI nastavuje na 4. řádku, takže je nutné float zrušit: float: none;
.menu li li {border: none; padding: 0; margin: 0; float: none;} /* zrušit float */Jiná možnost je použít na 4. řádku selektor >
.menu > li {float: left; padding: 2px 2px 0 2px; white-space: nowrap;} |
||
| Sir Tom Profil |
#6 · Zasláno: 24. 6. 2013, 23:35:55
margin:
Jo, pravdu díš :) Promiň za zradu. |
||
| rurij Profil |
#7 · Zasláno: 25. 6. 2013, 15:18:15
Děkuju moc :)
|
||
|
Časová prodleva: 4 roky
|
|||
| Dan612 Profil |
#8 · Zasláno: 31. 3. 2017, 08:13:27
rurij:
Prosím Vás, nemohl by někdo dát živou ukázku? Já to nerozchodim ale hodilo byse mi to do krámu, teda do webky? Děkují. |
||
| Tomáš123 Profil |
#9 · Zasláno: 31. 3. 2017, 12:04:35
Dan612:
Internet je plný ukážok, hľadaj dropdown menu, vysúvacie menu a iné. |
||
|
Časová prodleva: 7 let
|
|||
0