| 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