Autor Zpráva
Novy
Profil
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
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
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
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...

(Zapomenuté heslo?)

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: