Autor | Zpráva | ||
---|---|---|---|
Novy Profil |
#1 · Zasláno: 11. 9. 2011, 16:24:11
Chtěl bych si udělat v CSS rozbalovací menu, mám něco takového, ale nejede to:
#menu{ background: #F4F4F4; border: 1px solid #BEBEBE; border-left: none; display: block!important; font: 13px/17px Helvetica, Arial, sans-serif; height: 200px; left: 0; position: fixed; top: 10%; width: 24px; -webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.10); -moz-box-shadow: 1px 1px 3px rgba(0,0,0,0.10); box-shadow: 1px 1px 3px rgba(0,0,0,0.10); text-overflow:ellipsis; -o-text-overflow: ellipsis; overflow:hidden; white-space:nowrap; } #menu li:hover{ width: 200px; white-space: normal; } </style> </head> <body> <div id="menu"> <li>Lorem ipsum</li> <li>Lorem ipsum</li> <li>Lorem ipsum</li> <li>Lorem ipsum</li> <li>Lorem ipsum</li> <li>Lorem ipsum</li> <li>Lorem ipsum</li> <li>Lorem ipsum</li> <li>Lorem ipsum</li> <li>Lorem ipsum</li> <li>Lorem ipsum</li> <li>Lorem ipsum</li> </div> Při najetí na položku menu se má zvětšit šířka jen té položky (li). Jak to mám udělat? |
||
jenikkozak Profil |
#2 · Zasláno: 11. 9. 2011, 16:35:45
Novy:
„Při najetí na položku menu se má zvětšit šířka jen té položky (li). Jak to mám udělat?“ Bez hover efektu nemá položka <li> nastavený žádný rozměr, zaplňuje tedy 100 % obsahu divu s id menu. Po najetí myší se roztáhne. Není to však vidět, neboť ten div má nastavenou šířku 24 px a ořezávání přesahujícího obsahu (overflow:hidden). Nastavte rozměr <li> a zvětšete šířku menu. Je lepší položky seznamu vložit do nějakého ze seznamů (odrážkového nebo číslovaného), než je dávat přímo do <div>u. |
||
Novy Profil |
#3 · Zasláno: 11. 9. 2011, 16:51:37 · Upravil/a: Novy
To vypadá divně :-) ... ale je to pokrok
#menu{ background: #F4F4F4; border: 1px solid #BEBEBE; border-left: none; display: block!important; font: 13px/17px Helvetica, Arial, sans-serif; height: 200px; left: 0; position: fixed; top: 10%; width: 24px; -webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.10); -moz-box-shadow: 1px 1px 3px rgba(0,0,0,0.10); box-shadow: 1px 1px 3px rgba(0,0,0,0.10); } #menu li { width: 24px; text-overflow:ellipsis; -o-text-overflow: ellipsis; overflow:hidden; white-space:nowrap; } #menu li:hover{ width: 200px; white-space: normal; } </style> </head> <body> <div id="menu"> <li>a Lorem ipsum</li> <li>a Lorem ipsum</li> <li>a Lorem ipsum</li> <li>a Lorem ipsum</li> <li>a Lorem ipsum</li> <li>a Lorem ipsum</li> <li>a Lorem ipsum</li> <li>a Lorem ipsum</li> <li>a Lorem ipsum</li> <li>a Lorem ipsum</li> <li>a Lorem ipsum</li> <li>a Lorem ipsum</li> </div> |
||
Rellik Profil |
#4 · Zasláno: 11. 9. 2011, 17:09:13 · Upravil/a: Rellik
Nenapsal si jak se to menu má vysunovat. Pro vysouvání zleva doprava to zkus to tak:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Untitled</title> <style type="text/css"> body { background-color:#e5e5e5; } ul#mainMenu { width:100px; background-color:white; } ul#mainMenu, ul { padding:0; margin:0; list-style-type:none; } ul#mainMenu ul { position:absolute; top:0; left:100px; visibility:hidden; background-color:white; } ul#mainMenu li { position:relative; width:100px; } ul#mainMenu a { color:black; display:block; font:12px arial,sans-serif; text-decoration:none; display:block; width:100%; } ul#mainMenu a:hover, ul#mainMenu li:hover a, ul#mainMenu li.hover a { background-color:black; color:white; } ul#mainMenu li:hover ul a, ul#mainMenu li.hover ul a { background-color:white; color:black; } ul#mainMenu li:hover ul a:hover, ul#mainMenu li.hover ul a:hover { background-color:black; color:white; } ul#mainMenu li:hover ul, ul#mainMenu li.hover ul{ visibility:visible; } ul#mainMenu li li { border:none; padding:0; background-color:white; } ul#mainMenu li { behavior: url(hover.htc); } </style> </head> <body> <ul id="mainMenu"> <li><a href="">About</a> <ul> <li><a href="">Interactive</a></li> <li><a href="">E-business</a></li> <li><a href="">Digital</a></li> </ul> </li> <li><a href="">Services</a> <ul> <li><a href="">Dummy</a></li> <li><a href="">Web</a></li> </ul> </li> <li><a href="">Contact</a> <ul> <li><a href="">Email</a></li> <li><a href="">Address</a></li> <li><a href="">Earth</a></li> </ul> </li> </ul> </body> </html> potřebuješ k tomu soubor hover.htc - ten jde lehce stáhnout z internetu, stačí když si ho necháš vyhledat... |
||
Časová prodleva: 13 let
|
0