| Autor | Zpráva | ||
|---|---|---|---|
| Santy Profil |
#1 · Zasláno: 2. 12. 2013, 18:12:28
Ahoj, chci si na web zavést podobné menu, ale nevim jak ho udelat a taky sem dost hledal ... nemohl by mi nekdo z vas poslat kod nebo nejaky hotové menu podobným k tomuhle? http://glowingmines.eu
|
||
| Marschmallow Profil |
Ten začátek CSS samozřejmě můžeš dát do samostatného souboru. Trošku jsem to obarvil. Co třeba takhle:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
<head>
<meta http-equiv="Content-Language" content="cs"/>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250"/>
<title>Vysouvací menu</title>
<style type="text/css">
body {
background: #eaf6ff;
font-family: 'Arial CE', 'Helvetica CE', Arial, sans-serif;
font-size: 15px;
}
.menu {
padding: 0;
margin: 0;
}
.menu a {
text-decoration: none;
color: #333;
display: block;
width: 100%;
text-align: center;
}
.menu ul, .menu li {
list-style-type: none;
margin: 0;
padding: 0 .5em;
}
ul.uroven1 li.polozka1 {
float: left;
position: relative;
font-weight: bold;
background: #fff;
padding: .2em .5em;
height: 1em;
_width: 1px; /* IE */
}
ul.uroven2 {
position: absolute;
left: 0;
top: 1.4em;
_top: 1.6em; /* IE */
width: 120px;
background: #adf;
border: solid #8bd 2px;
visibility: hidden;
padding: .8em .5em;
}
ul.uroven2 img {
border: solid #368 2px;
}
ul.uroven2 li.polozka2 a {
font-weight: normal;
text-align: left;
padding: 0 .5em .1em;
margin: 0 -.5em;
}
ul.uroven2 li.polozka2 a:hover {
background: #8bd;
}
.menu a:hover {
text-decoration: underline;
}
ul.uroven1 li.polozka1 {
behavior: url(hover.htc);
}
ul.uroven1 li.polozka1:hover,
ul.uroven1 li.polozka1Hover {
background: #ddd;
}
ul.uroven1 li.polozka1Hover ul.uroven2,
ul.uroven1 li.polozka1:hover ul.uroven2 {
visibility: visible;
}
</style>
</head>
<body>
<ul class="menu uroven1">
<li class="polozka1">
<a href="">Rubrika1</a>
<ul class="menu uroven2">
<li class="polozka2"><a
href="">Podrubrika1</a></li>
<li class="polozka2"><a
href="">Podrubrika2</a></li>
<li class="polozka2"><a
href="">Podrubrika3</a></li>
</ul>
</li>
<li class="polozka1">
<a href="">Rubrika2</a>
<ul class="menu uroven2">
<li class="polozka2"><a
href="">Podrubrika1</a></li>
<li class="polozka2"><a
href="">Podrubrika2</a></li>
<li class="polozka2"><a
href="">Podrubrika3</a></li>
</ul>
</li>
<li class="polozka1">
<a href="">Rubrika3</a>
<ul class="menu uroven2">
<li class="polozka2"><a
href="">Podrubrika1</a></li>
<li class="polozka2"><a
href="">Podrubrika2</a></li>
<li class="polozka2"><a
href="">Podrubrika3</a></li>
</ul>
</li>
</ul>
</body>
</html> |
||
| Santy Profil |
#3 · Zasláno: 2. 12. 2013, 19:12:36
neprijde mi to moc podobne k tamtomu....
|
||
| ed11 Profil |
#4 · Zasláno: 2. 12. 2013, 19:14:03 · Upravil/a: ed11
Santy:
A nechtěl by ses o dané téma někdy taky zajímat v dokumentaci, než abys šel přímo pro radu? http://www.aryweb.nl/projects/MooDropMenu/ |
||
| Santy Profil |
#5 · Zasláno: 2. 12. 2013, 19:35:49
a vedel bys mi ho prepsat aby bylo ve strede?
|
||
| ed11 Profil |
1. Za poslední položku menu vlož
<div style="clear:both;"></div>
2. Přidej u #nav { display: table; width: x%; margin: 0 auto; }
3. Odstraň u #nav li{ float: left;}
4. Dej pro #nav li tuto vlastnost { display: table-cell; }
5. Vytvoř nový selektor #nav li ul li { display: block; }
Jedničku můžeš vlastně vynechat, díky 3. kroku |
||
|
Časová prodleva: 10 let
|
|||
0