-
Par GloriaV le 23 Juillet 2016 à 11:47
Horizontal 2 niveles
Fuente
<div id="menu">
<ul>
<li class="nivel1"><a href="http://www.forosdelweb.com" class="nivel1">Opción 1</a>
<!--[if lte IE 6]><a href="http://www.forosdelweb.com" class="nivel1ie">Opción 1<table class="falsa"><tr><td><![endif]-->
<ul class="uno">
<li><a href="#">Opción 1.1</a></li>
<li><a href="http://www.idplus.org">idplus.org</a></li>
</ul>
<!--------------------------------------------->
</li>
<li class="nivel1"><a href="#" class="nivel1">Opción 2</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 2<table class="falsa"><tr><td><![endif]-->
<ul class="dos">
<li><a href="#">Opción 2.1</a></li>
<li><a href="http://www.google.es">Opción 2.2</a></li>
<li><a href="#">Opción 2.3</a></li>
<li><a href="#">Opción 2.4</a></li>
<li><a href="http://www.idplus.org">idplus.org</a></li>
</ul>
<!--------------------------------------------->
</li>
<li class="nivel1"><a href="#" class="nivel1">Opción 3</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 3<table class="falsa"><tr><td><![endif]-->
<ul class="tres">
<li><a href="#"></a></li>
<li><a href="#">Opción 3.1</a></li>
<li><a href="#">Opción 3.2</a></li>
<li><a href="http://www.idplus.org">idplus.org</a></li>
</ul>
<!--------------------------------------------->
</li>
<li class="nivel1"><a href="#" class="nivel1">Opción 4</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 4<table class="falsa"><tr><td><![endif]-->
<ul class="cuatro">
<li><a href="#"></a></li>
<li><a href="#">Opción 4.1</a></li>
<li><a href="#">Opción 4.2</a></li>
<li><a href="#">Opción 4.3</a></li>
<li><a href="http://www.idplus.org">idplus.org</a></li>
</ul>
<!--------------------------------------------->
</li>
<li class="nivel1"><a href="#" class="nivel1">Opción 5</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 5<table class="falsa"><tr><td><![endif]-->
<ul class="cinco">
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#">Opción 5.1</a></li>
<li><a href="#">Opción 5.2</a></li>
<li><a href="http://www.idplus.org">idplus.org</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
CSS
/*--------- Menu CSS --------------*/
* { margin: 0px;
padding: 0px; outline: 0;
}
html, body { width: 100%;}
body { background: #366;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-shadow: 0 0 3px #FFf, 0 0 5px #fFF;
}
#menu { text-align: center;
font-size: 0.7em;
width: 820px;
margin: 20px auto;
position: relative;
}
#menu ul { list-style-type: none;}
#menu ul li.nivel1 { float: left;
width: 162px;
margin-right: 2px;
position: relative;
}
#menu ul li { float: left;}
#menu ul li a {display: block;
text-decoration: none;
color: #fff;
background-color: #399;
border: solid 1px #fff;
padding: 8px;
position: relative;
}
#menu ul li a:hover, #menu ul li:hover a.nivel1 {
background-color: #6CC;
color: #000;
text-shadow: 2px 2px 4px #000000;
position: relative;
border-bottom: solid 1px #6CC;
}
#menu ul li a.nivel1 {display: block!important;display: none;
}
#menu ul li ul {display: none;
}
#menu ul li a:hover ul, #menu ul li:hover ul {display: block;
position: absolute;width: 816px;border: solid 1px #fff;border-top: none;background-color: #6CC;
}
#menu ul li ul li a {width: 160px;
padding: 6px 0px 8px 0px;
border: none;
background-color: #6CC;
}
#menu ul li ul li a:hover {
position: relative;
text-decoration: underline;
border-bottom: none;
}
table.falsa {border-collapse:collapse;
border:0px;
float: left;
position: relative;
}
ul.uno {left: -0px;}
ul.dos {left: -164px;}
ul.tres {left: -328px;}
ul.cuatro {left: -492px;}
ul.cinco {left: -656px;}CSS 2º opción
/*--------- Menu CSS --------------*/
* { margin: 0px;padding: 0px; outline: 0;
}
html, body {
width: 100%;}
body {
background: #366;
font-family: Verdana, Arial, Helvetica, sans-serif;}
#menu {
font-size: 0.7em;margin: 20px;}
#menu ul { list-style-type: none;}
#menu ul li.nivel1 { width: 162px;}
#menu ul li { text-align: center;}
#menu ul li.primera {
border-top: solid 1px #FFF;}
#menu ul li a {display: block;
text-decoration: none;color: #fff;
background-color: #399;
border: solid 1px #fff;border-top: none;padding: 8px 8px 9px;position: relative;}
#menu ul li:hover {
position: relative;
background- color: #6CC;color: #000;}
#menu ul li a:hover,
#menu ul li:hover a.nivel1 {
background-color: #6CC;color: #000;
position: relative;}
#menu ul li a.nivel1 {
display: block!important;
display: none;position: relative;}
#menu ul li ul {display: none;}
#menu ul li:hover > ul {
display: block;position: absolute;left: 161px;top:-1px;}
#menu ul li ul li a {
width: 144px;background-color: #399;
color: #FFF;position: relative;}
#menu ul li ul li a:hover {
position: relative;
background-color: #6CC;
color: #000;}
#menu ul li a.nivel1ie {
width: 144px;padding: 8px;}
#menu ul li a.subnivel {padding-bottom: 8px;}
#menu ul li a:hover ul.nivel2,
#menu ul.nivel2 li a:hover ul.nivel3,
#menu ul.nivel3 li a:hover ul.nivel4 {
display: block;position: absolute;left: 160px;top:-1px;}
table.falsa {
border-collapse:collapse;border:0px;
float: left;}CSS 2aº opción
/*--------- Menu CSS --------------*/
* { margin: 0px;
padding: 0px; outline: 0;
}
html, body { width: 100%;}
body { background: #366;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#menu { text-align: center;
font-size: 0.7em;
width: 820px;
margin: 20px auto;
}
#menu ul { list-style-type: none;}
#menu ul li.nivel1 { float: left;
width: 162px;
margin-right: 2px;
}
#menu ul li a {display: block;
text-decoration: none;
color: #fff;
background-color: #399;
border: solid 1px #fff;
padding: 8px;
position: relative;
}
#menu ul li:hover {position: relative;
}
#menu ul li a:hover, #menu ul li:hover a.nivel1 {background-color: #6CC;
color: #000;
position: relative;
}
#menu ul li a.nivel1 {display: block!important;display: none;
position: relative;
}
#menu ul li ul {display: none;
}
#menu ul li a:hover ul, #menu ul li:hover ul {display: block;
position: absolute;left: 0px;
}
#menu ul li ul li a {width: 160px;
padding: 6px 0px 8px 0px;
border-top-color: #000;
}
#menu ul li ul li a:hover {border-top-color: #000;
position: relative;
}
table.falsa {border-collapse:collapse;
border:0px;
float: left;
position: relative;
}
-
Par GloriaV le 23 Juillet 2016 à 12:00
Horizontal 2 niveles 3º opción
<div id="menu">
<ul>
<li class="nivel1"><a href="http://www.forosdelweb.com" class="nivel1">Opción 1</a>
<!--[if lte IE 6]><a href="http://www.forosdelweb.com" class="nivel1ie">Opción 1<table class="falsa"><tr><td><![endif]-->
<ul id="uno">
<li><a href="http://www.idplus.org">idplus.org</a></li>
<li><a href="#">Opción 1.1</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="#" class="nivel1">Opción 2</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 2<table class="falsa"><tr><td><![endif]-->
<ul id="dos">
<li><a href="http://www.idplus.org">idplus.org</a></li>
<li><a href="#">Opción 2.4</a></li>
<li><a href="#">Opción 2.3</a></li>
<li><a href="#">Opción 2.2</a></li>
<li><a href="#">Opción 2.1</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="#" class="nivel1">Opción 3</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 3<table class="falsa"><tr><td><![endif]-->
<ul id="tres">
<li><a href="http://www.idplus.org">idplus.org</a></li>
<li><a href="#">Opción 3.2</a></li>
<li><a href="#">Opción 3.1</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="#" class="nivel1">Opción 4</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 4<table class="falsa"><tr><td><![endif]-->
<ul id="cuatro">
<li><a href="http://www.idplus.org">idplus.org</a></li>
<li><a href="#">Opción 4.3</a></li>
<li><a href="#">Opción 4.2</a></li>
<li><a href="#">Opción 4.1</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="#" class="nivel1">Opción 5</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 5<table class="falsa"><tr><td><![endif]-->
<ul id="cinco">
<li><a href="http://www.idplus.org">idplus.org</a></li>
<li><a href="#">Opción 5.2</a></li>
<li><a href="#">Opción 5.1</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>CSS
/*--------- Menu CSS --------------*/
* { margin: 0px;
padding: 0px; outline: 0;
}
html, body { width: 100%;}
body { background: #366;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#menu { text-align: center;
font-size: 0.7em;
width: 820px;
margin: 200px auto;
}
#menu ul { list-style-type: none;}
#menu ul li.nivel1 { float: left;
width: 162px;
margin-right: 2px;
}
#menu ul li a {display: block;
text-decoration: none;
color: #fff;
background-color: #399;
border: solid 1px #fff;
padding: 8px;
position: relative;
}
#menu ul li:hover {position: relative;
}
#menu ul li a:hover, #menu ul li:hover a.nivel1 {background-color: #6CC;
color: #000;
position: relative;
}
#menu ul li a.nivel1 {display: block!important;display: none;
}
#menu ul li ul {display: none;
}
#menu ul li a:hover ul, #menu ul li:hover ul {display: block;
position: absolute;left: 0px;
}
#menu ul li ul li a {width: 160px;
padding: 6px 0px 8px 0px;
border-bottom-color: #000;
}
#menu ul li ul li a:hover {border-bottom-color: #000;
position: relative;
}
table.falsa {border-collapse:collapse;
border:0px;
float: left;
position: relative;
}
ul#uno {top: -58px!important; top: -89px;}
ul#dos {top: -145px!important; top: -176px;}
ul#tres {top: -87px!important; top: -118px;}
ul#cuatro {top: -116px!important; top: -147px;}
ul#cinco {top: -87px!important; top: -118px;}
-
Par GloriaV le 23 Juillet 2016 à 12:02
2º niveels 4º opción
<div id="menu">
<ul>
<li class="nivel1 primera" tabindex="1"><span class="nivel1">Opción 1</span>
<!--[if IE]><a href="#" class="nivel1ie">Opción 1<table class="falsa"><tr><td><![endif]-->
<ul>
<li class="primera"><a href="http://www.google.es">Opción 1.1</a></li>
<li><a href="http://www.idplus.org">idplus.org</a></li>
</ul>
<!--[if IE]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1" tabindex="2"><span class="nivel1">Opción 2</span>
<!--[if IE]><a href="#" class="nivel1ie">Opción 2<table class="falsa"><tr><td><![endif]-->
<ul>
<li class="primera"><a href="#">Opción 2.1</a></li>
<li><a href="http://www.google.es">Opción 2.2</a></li>
<li><a href="#">Opción 2.3</a></li>
<li><a href="#">Opción 2.4</a></li>
<li><a href="http://www.idplus.org">idplus.org</a></li>
</ul>
<!--[if IE]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1" tabindex="3"><span class="nivel1">Opción 3</span>
<!--[if IE]><a href="#" class="nivel1ie">Opción 3<table class="falsa"><tr><td><![endif]-->
<ul>
<li class="primera"><a href="http://www.google.es">Opción 3.1</a></li>
<li><a href="#">Opción 3.2</a></li>
<li><a href="http://www.idplus.org">idplus.org</a></li>
</ul>
<!--[if IE]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1" tabindex="4"><span class="nivel1">Opción 4</span>
<!--[if IE]><a href="#" class="nivel1ie">Opción 4<table class="falsa"><tr><td><![endif]-->
<ul>
<li class="primera"><a href="#">Opción 4.1</a></li>
<li><a href="#">Opción 4.2</a></li>
<li><a href="#">Opción 4.3</a></li>
<li><a href="http://www.idplus.org">idplus.org</a></li>
</ul>
<!--[if IE]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1" tabindex="5"><span class="nivel1">Opción 5</span>
<!--[if IE]><a href="#" class="nivel1ie">Opción 5<table class="falsa"><tr><td><![endif]-->
<ul>
<li class="primera"><a href="#">Opción 5.1</a></li>
<li><a href="#">Opción 5.2</a></li>
<li><a href="http://www.idplus.org">idplus.org</a></li>
</ul>
<!--[if IE]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>CSS
/*--------- Menu CSS --------------*
* { margin: 0px;
padding: 0px; outline: 0;
}
html, body { width: 100%;}
body { background: #366;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#menu { text-align: center;
font-size: 0.7em;
width: 320px;
margin: 20px;
}
#menu ul { list-style-type: none;
}
#menu ul li.nivel1 {
width: 162px;
}
#menu ul li.primera { border-top: solid 1px #FFF;
}
#menu ul li a, #menu ul li span {display: block;
text-decoration: none;
color: #fff;
background-color: #399;
border: solid 1px #fff;
border-top: none;
padding: 8px;
position: relative;
}
a:active {position: relative;
}
#menu ul li a:active {background-color: #6CC;
color: #000;
border-bottom: solid 1px #6CC;
position: relative;
}
#menu ul li span.nivel1 {display: block;
}
#menu ul li:hover span.nivel1 {cursor: pointer;
}
#menu ul li ul {display: none;
}
#menu ul li a:hover ul, #menu ul li a:active ul {display: block;
position: relative;width: 162px;background-color: #6CC;
}
#menu ul li a:link:hover ul {display: none;
}
#menu ul li a:active:hover ul {display: block;
}
#menu ul li ul li a {width: 160px;
padding: 6px 0px 8px 0px;
border: none;
border-top: solid 1px #fff;
background-color: #3AB7CB;
font-weight: normal;
}
#menu ul li ul li a:hover {
position: relative;
text-decoration: underline;
border-bottom: none;
color: #000;
background-color: #359BB8;
}
#menu ul li ul li.primera {border-top: none;
}
table.falsa {border-collapse:collapse;
border:0px;
float: left;
position: relative;
}
-
Par GloriaV le 23 Juillet 2016 à 12:13
2 niveles 6º opción
<!------------------------------------------------------------------------->
<div id="principal">Menú principal
<div id="menu">
<ul>
<li class="nivel1 primera"><a href="#" class="nivel1">Opción 1</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 1<table class="falsa"><tr><td><![endif]-->
<ul>
<li class="primera"><a href="http://www.google.es">Opción 1.1</a></li>
<li><a href="http://www.idplus.org">idplus.org</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="#" class="nivel1">Opción 2</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 2<table class="falsa"><tr><td><![endif]-->
<ul>
<li class="primera"><a href="#">Opción 2.1</a></li>
<li><a href="#">Opción 2.2</a></li>
<li><a href="#">Opción 2.3</a></li>
<li><a href="#">Opción 2.4</a></li>
<li><a href="http://www.idplus.org">idplus.org</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="#" class="nivel1">Opción 3</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 3<table class="falsa"><tr><td><![endif]-->
<ul>
<li class="primera"><a href="#">Opción 3.1</a></li>
<li><a href="#">Opción 3.2</a></li>
<li><a href="http://www.idplus.org">idplus.org</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="#" class="nivel1">Opción 4</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 4<table class="falsa"><tr><td><![endif]-->
<ul>
<li class="primera"><a href="#">Opción 4.1</a></li>
<li><a href="#">Opción 4.2</a></li>
<li><a href="#">Opción 4.3</a></li>
<li><a href="http://www.idplus.org">idplus.org</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="#" class="nivel1">Opción 5</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 5<table class="falsa"><tr><td><![endif]-->
<ul>
<li class="primera"><a href="#">Opción 5.1</a></li>
<li><a href="#">Opción 5.2</a></li>
<li><a href="http://www.idplus.org">idplus.org</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
</div>CSS
* { margin: 0px; padding: 0px; outline: 0; } html, body { width: 100%;} body { background: #366; font-family: Verdana, Arial, Helvetica, sans-serif; } #principal {width: 144px; color: #fff; background-color: #399; border: solid 1px #fff; padding: 8px; position: relative; margin: 20px; font-size: 0.9em; text-align: center; cursor: pointer; } #principal:hover {background-color: #0000CA;} #principal:hover #menu {display: block; } #menu { text-align: center; font-size: 0.85em; width: 320px; display: none; position: relative; padding-top: 10px; left: -9px; margin-bottom: -10px; } #menu ul { list-style-type: none;border: 0; } #menu ul li.nivel1 { width: 162px; } #menu ul li.primera { border-top: solid 1px #FFF; } #menu ul li a {display: block; text-decoration: none; color: #fff; background-color: #399; border: solid 1px #fff; border-top: none; padding: 8px; position: relative; } #menu ul li:hover {position: relative; background-color: #6CC; color: #000; } #menu ul li a:hover, #menu ul li:hover a.nivel1 {background-color: #6CC; color: #000; position: relative; } #menu ul li a.nivel1 {display: block!important;display: none; position: relative; } #menu ul li ul {display: none; } #menu ul li a:hover ul, #menu ul li:hover ul {display: block; position: absolute;left: 161px;top:-1px!important;top: -31px; } #menu ul li ul li a {width: 150px; background-color: #6CC; color: #000; } #menu ul li ul li a:hover {position: relative; background-color: #399; color: #FFF; } table.falsa {border-collapse:collapse; border:0px; float: left; position: relative; }
-
Par GloriaV le 31 Juillet 2016 à 10:41
Horizontal 3 niveles
<div class="example">
<ul id="nav">
<li class="current"><a href="https://www.script-tutorials.com/">Home</a></li>
<li><a href="https://www.script-tutorials.com/">Tutorials</a>
<ul>
<li><a href="https://www.script-tutorials.com/category/html-css/">HTML / CSS</a></li>
<li><a href="https://www.script-tutorials.com/category/jquery/">JS / jQuery</a>
<ul>
<li><a href="https://www.script-tutorials.com/category/jquery/">jQuery</a></li>
<li><a href="https://www.script-tutorials.com/category/javascript/">JS</a></li>
</ul>
</li>
<li><a href="https://www.script-tutorials.com/category/php/">PHP</a></li>
<li><a href="https://www.script-tutorials.com/category/mysql/">MySQL</a></li>
<li><a href="https://www.script-tutorials.com/category/xslt/">XSLT</a></li>
<li><a href="https://www.script-tutorials.com/category/ajax/">Ajax</a></li>
</ul>
</li>
<li><a href="https://www.script-tutorials.com/category/resources/">Resources</a>
<ul>
<li><a href="https://www.script-tutorials.com/category/resources/">By category</a>
<ul>
<li><a href="https://www.script-tutorials.com/category/php/">PHP</a></li>
<li><a href="https://www.script-tutorials.com/category/mysql/">MySQL</a></li>
<li><a href="https://www.script-tutorials.com/category/xslt/">XSLT</a></li>
<li><a href="https://www.script-tutorials.com/category/ajax/">Ajax</a></li>
</ul>
</li>
<li><a href="https://www.script-tutorials.com/category/resources/">By tag name</a>
<ul>
<li><a href="https://www.script-tutorials.com/tag/captcha/">captcha</a></li>
<li><a href="https://www.script-tutorials.com/tag/gallery/">gallery</a></li>
<li><a href="https://www.script-tutorials.com/tag/animation/">animation</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="https://www.script-tutorials.com/about/">About</a></li>
<li><a href="https://www.script-tutorials.com/creating-css3-dropdown-menu/">Go Back To The Tutorial</a></li>
</ul>
</div>CSS
/* demo page styles */
body {
background:#eee;
margin:0;
padding:0;
}
.example {
background:#fff url(../images/clouds-in-blue-sky.jpg);
width:770px;
height:570px;
border:1px #000 solid;
margin:20px auto;
padding:15px;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
/* main menu styles */
#nav {
display:inline-block;
width:100%;
margin:0px auto;
padding:0;
background:#335599 url(../images/bg.png) repeat-x 0 -110px;
border-radius:10px; /*some css3*/
-moz-border-radius:10px;
-webkit-border-radius:10px;
box-shadow:0 2px 2px rgba(0,0,0, .5);
-moz-box-shadow:0 2px 2px rgba(0,0,0, .5);
-webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);
}
#nav li {
margin:10px;
float:left;
position:relative;
list-style:none;
}
#nav a {
font-weight:bold;
color:#e7e5e5;
text-decoration:none;
display:block;
padding:8px 20px;
border-radius:10px; /*some css3*/
-moz-border-radius:10px;
-webkit-border-radius:10px;
text-shadow:0 2px 2px rgba(0,0,0, .7);
}
/* selected menu element */
#nav .current a, #nav li:hover > a {
background:#7788aa url(../images/bg.png) repeat-x 0 -20px;
color:#000;
border-top:1px solid #f8f8f8;
box-shadow:0 2px 2px rgba(0,0,0, .7); /*some css3*/
-moz-box-shadow:0 2px 2px rgba(0,0,0, .7);
-webkit-box-shadow:0 2px 2px rgba(0,0,0, .7);
text-shadow:0 2px 2px rgba(255,255,255, 0.7);
}
/* sublevels */
#nav ul li:hover a, #nav li:hover li a {
background:none;
border:none;
color:#000;
}
#nav ul li a:hover {
background:#335599 url(../images/bg.png) repeat-x 0 -100px;
color:#fff;
border-radius:10px; /*some css3*/
-moz-border-radius:10px;
-webkit-border-radius:10px;
text-shadow:0 2px 2px rgba(0,0,0, 0.7);
}
#nav ul li:first-child > a {
-moz-border-radius-topleft:10px; /*some css3*/
-moz-border-radius-topright:10px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
}
#nav ul li:last-child > a {
-moz-border-radius-bottomleft:10px; /*some css3*/
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:10px;
}
/* drop down */
#nav li:hover > ul {
opacity:1;
visibility:visible;
}
#nav ul {
opacity:0;
visibility:hidden;
padding:0;
width:175px;
position:absolute;
background:#aabbcc url(../images/bg.png) repeat-x 0 0;
border:1px solid #7788aa;
border-radius:10px; /*some css3*/
-moz-border-radius:10px;
-webkit-border-radius:10px;
box-shadow:0 2px 2px rgba(0,0,0, .5);
-moz-box-shadow:0 2px 2px rgba(0,0,0, .5);
-webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);
-moz-transition:opacity .25s linear, visibility .1s linear .1s;
-webkit-transition:opacity .25s linear, visibility .1s linear .1s;
-o-transition:opacity .25s linear, visibility .1s linear .1s;
transition:opacity .25s linear, visibility .1s linear .1s;
}
#nav ul li {
float:none;
margin:0;
}
#nav ul a {
font-weight:normal;
text-shadow:0 2px 2px rgba(255,255,255, 0.7);
}
#nav ul ul {
left:160px;
top:0px;
}
-
Par GloriaV le 31 Juillet 2016 à 10:41
Horizontal 2 niveles
<ul id="menu">
<li><a href="#">Home</a></li>
<li>
<a href="#">Categories</a>
<ul>
<li><a href="#">CSS</a></li>
<li><a href="#">Graphic design</a></li>
<li><a href="#">Development tools</a></li>
<li><a href="#">Web design</a></li>
</ul>
</li>
<li><a href="#">Work</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>CSS
#menu, #menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu {
width: 960px;
margin: 60px auto;
border: 1px solid #222;
background-color: #fff;
background-image: linear-gradient(#444, #111);
border-radius: 6px;
box-shadow: 0 1px 1px #777;
}
#menu:before,
#menu:after {
content: "";
display: table;
}
#menu:after {
clear: both;
}
#menu {
zoom:1;
}
#menu li {
float: left;
border-right: 1px solid #222;
box-shadow: 1px 0 0 #444;
position: relative;
}
#menu a {
float: left;
padding: 12px 30px;
color: #999;
font: bold 12px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#menu li:hover > a {
color: #fafafa;
}
*html #menu li a:hover { /* IE6 only */
color: #fafafa;
}
#menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 1;
background: #444;
background: linear-gradient(#444, #111);
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
border-radius: 3px;
transition: all .2s ease-in-out;
}
#menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
box-shadow: -1px 0 0 rgba(255,255,255,.3);
}
#menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
#menu ul li:last-child {
box-shadow: none;
}
#menu ul a {
padding: 10px;
width: 130px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#menu ul a:hover {
background-color: #0186ba;
background-image: linear-gradient(#04acec, #0186ba);
}
#menu ul li:first-child > a {
border-radius: 3px 3px 0 0;
}
#menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #444;
}
#menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #3b3b3b;
}
#menu ul li:first-child a:hover:after {
border-bottom-color: #04acec;
}
#menu ul ul li:first-child a:hover:after {
border-right-color: #0299d3;
border-bottom-color: transparent;
}
#menu ul li:last-child > a {
border-radius: 0 0 3px 3px;
-
Par GloriaV le 31 Juillet 2016 à 10:44
Horizontal 2 niveles
<ul id="nav">
<li><a href="#">Menu element</a>
<ul>
<li><a href="#">Submenu element</a></li>
.....
</ul>
</li>
<li><a href="#">Menu 4</a></li>
.....
</ul>CSS
#nav,#nav ul {
list-style: none outside none;
margin: 0;
padding: 0;
}
#nav {
font-family: "Lucida Sans Unicode",Verdana,Arial,sans-serif;
font-size: 13px;
height: 36px;
list-style: none outside none;
margin: 40px auto;
text-shadow: 0 -1px 3px #202020;
width: 700px;
/* border radius */
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
/* box shadow */
-moz-box-shadow: 0px 3px 3px #cecece;
-webkit-box-shadow: 0px 3px 3px #cecece;
box-shadow: 0 3px 4px #8b8b8b;
/* gradient */
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));
background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
background-color: #5f5f5f;
}
#nav li {
border-bottom: 1px solid #575757;
border-left: 1px solid #929292;
border-right: 1px solid #5d5d5d;
border-top: 1px solid #797979;
display: block;
float: left;
height: 34px;
position: relative;
width: 105px;
}
#nav > li:first-child {
border-left: 0 none;
margin-left: 5px;
}
#nav ul {
left: -9999px;
position: absolute;
top: -9999px;
z-index: 2;
}
#nav ul li {
background: none repeat scroll 0 0 #838383;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
width: 100%;
}
#nav li a {
color: #FFFFFF;
display: block;
line-height: 34px;
outline: medium none;
text-align: center;
text-decoration: none;
/* gradient */
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));
background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
background-color: #5f5f5f;
}
/* keyframes #animation */
@-webkit-keyframes animation {
0% {
-webkit-transform: scale(1);
}
30% {
-webkit-transform: scale(1.2);
}
100% {
-webkit-transform: scale(1.1);
}
}
@-moz-keyframes animation {
0% {
-moz-transform: scale(1);
}
30% {
-moz-transform: scale(1.2);
}
100% {
-moz-transform: scale(1.1);
}
}
#nav li > a:hover {
/* CSS3 animation */
-webkit-animation-name: animation;
-webkit-animation-duration: 0.3s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
-moz-animation-name: animation;
-moz-animation-duration: 0.3s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: 1;
-moz-animation-direction: normal;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;
}
#nav li:hover ul {
left: 0;
top: 34px;
width: 150px;
}
-
Par GloriaV le 31 Juillet 2016 à 10:45
Horizontal 2 niveles!!!
<ul id="nav">
<li><a href="https://www.script-tutorials.com/">Home</a></li>
<li><a class="hsubs" href="#">Menu 1</a>
<ul class="subs">
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
<li><a href="#">Submenu 5</a></li>
</ul>
</li>
<li><a class="hsubs" href="#">Menu 2</a>
<ul class="subs">
<li><a href="#">Submenu 2-1</a></li>
<li><a href="#">Submenu 2-2</a></li>
<li><a href="#">Submenu 2-3</a></li>
<li><a href="#">Submenu 2-4</a></li>
<li><a href="#">Submenu 2-5</a></li>
<li><a href="#">Submenu 2-6</a></li>
<li><a href="#">Submenu 2-7</a></li>
<li><a href="#">Submenu 2-8</a></li>
</ul>
</li>
<li><a class="hsubs" href="#">Menu 3</a>
<ul class="subs">
<li><a href="#">Submenu 3-1</a></li>
<li><a href="#">Submenu 3-2</a></li>
<li><a href="#">Submenu 3-3</a></li>
<li><a href="#">Submenu 3-4</a></li>
<li><a href="#">Submenu 3-5</a></li>
</ul>
</li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
<li><a href="#">Menu 6</a></li>
<li><a href="https://www.script-tutorials.com/flying-css3-navigation-menu/">Back</a></li>
</ul>CSS
#nav,#nav ul { list-style: none outside none; margin: 0; padding: 0; } #nav { font-family: "Lucida Sans Unicode",Verdana,Arial,sans-serif; font-size: 13px; height: 36px; list-style: none outside none; margin: 40px auto; text-shadow: 0 -1px 3px #202020; width: 980px; /* border radius */ -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; /* box shadow */ -moz-box-shadow: 0px 3px 3px #cecece; -webkit-box-shadow: 0px 3px 3px #cecece; box-shadow: 0 3px 4px #8b8b8b; /* gradient */ background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383)); background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%); background-color:#5f5f5f; } #nav ul { left: -9999px; position: absolute; top: -9999px; z-index: 2; } #nav li { border-bottom: 1px solid #575757; border-left: 1px solid #929292; border-right: 1px solid #5d5d5d; border-top: 1px solid #797979; display: block; float: left; height: 34px; position: relative; width: 105px; } #nav li:first-child { border-left: 0 none; margin-left: 5px; } #nav li a { color: #FFFFFF; display: block; line-height: 34px; outline: medium none; text-align: center; text-decoration: none; /* gradient */ background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383)); background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%); background-color:#5f5f5f; } /* keyframes #animation1 */ @-webkit-keyframes animation1 { 0% { -webkit-transform: scale(1); } 30% { -webkit-transform: scale(1.3); } 100% { -webkit-transform: scale(1); } } @-moz-keyframes animation1 { 0% { -moz-transform: scale(1); } 30% { -moz-transform: scale(1.3); } 100% { -moz-transform: scale(1); } } #nav li > a:hover { /* css3 animation */ -moz-animation-name: animation1; -moz-animation-duration: 0.7s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: running; -moz-animation-fill-mode: forwards; -webkit-animation-name: animation1; -webkit-animation-duration: 0.7s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards; } #nav li:hover > a { z-index: 4; } #nav li:hover ul.subs { left: 0; top: 34px; width: 150px; } #nav ul li { background: none repeat scroll 0 0 #838383; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); opacity: 0; width: 100%; /*-webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; -ms-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out;*/ } /* keyframes #animation2 */ @-webkit-keyframes animation2 { 0% { margin-left:185px; } 100% { margin-left:0px; opacity:1; } } @-moz-keyframes animation2 { 0% { margin-left:185px; } 100% { margin-left:0px; opacity:1; } } #nav li:hover ul li { /* css3 animation */ -moz-animation-name: animation2; -moz-animation-duration: 0.3s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: 1; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: running; -moz-animation-fill-mode: forwards; -webkit-animation-name: animation2; -webkit-animation-duration: 0.3s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: 1; -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards; /*-webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; -ms-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out;*/ } /* animation delays */ #nav li:hover ul li:nth-child(1) { -moz-animation-delay: 0; -webkit-animation-delay: 0; } #nav li:hover ul li:nth-child(2) { -moz-animation-delay: 0.05s; -webkit-animation-delay: 0.05s; } #nav li:hover ul li:nth-child(3) { -moz-animation-delay: 0.1s; -webkit-animation-delay: 0.1s; } #nav li:hover ul li:nth-child(4) { -moz-animation-delay: 0.15s; -webkit-animation-delay: 0.15s; } #nav li:hover ul li:nth-child(5) { -moz-animation-delay: 0.2s; -webkit-animation-delay: 0.2s; } #nav li:hover ul li:nth-child(6) { -moz-animation-delay: 0.25s; -webkit-animation-delay: 0.25s; } #nav li:hover ul li:nth-child(7) { -moz-animation-delay: 0.3s; -webkit-animation-delay: 0.3s; } #nav li:hover ul li:nth-child(8) { -moz-animation-delay: 0.35s; -webkit-animation-delay: 0.35s; }
-
Par GloriaV le 31 Juillet 2016 à 10:46
Horizontal 2 niveles
Fuente: http://www.html5xcss3.com/p/horizontal-css3-menus-tutorials.html
<ul id="nav">
<li><a href="https://www.script-tutorials.com/">Home</a></li>
<li><a class="hsubs" href="#">Menu 1</a>
<ul class="subs">
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
<li><a href="#">Submenu 5</a></li>
</ul>
</li>
<li><a class="hsubs" href="#">Menu 2</a>
<ul class="subs">
<li><a href="#">Submenu 2-1</a></li>
<li><a href="#">Submenu 2-2</a></li>
<li><a href="#">Submenu 2-3</a></li>
<li><a href="#">Submenu 2-4</a></li>
<li><a href="#">Submenu 2-5</a></li>
<li><a href="#">Submenu 2-6</a></li>
<li><a href="#">Submenu 2-7</a></li>
<li><a href="#">Submenu 2-8</a></li>
</ul>
</li>
<li><a class="hsubs" href="#">Menu 3</a>
<ul class="subs">
<li><a href="#">Submenu 3-1</a></li>
<li><a href="#">Submenu 3-2</a></li>
<li><a href="#">Submenu 3-3</a></li>
<li><a href="#">Submenu 3-4</a></li>
<li><a href="#">Submenu 3-5</a></li>
</ul>
</li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
<li><a href="#">Menu 6</a></li>
<li><a href="https://www.script-tutorials.com/pure-css3-lavalamp-menu/">Back</a></li>
<div id="lavalamp"></div>
</ul>CSS
#nav,#nav ul {
list-style: none outside none;
margin: 0;
padding: 0;
}
#nav {
background: url('menu_bg.png') no-repeat scroll 0 0 transparent;
clear: both;
font-size: 12px;
height: 58px;
padding: 0 0 0 9px;
position: relative;
width: 957px;
}
#nav ul {
background-color: #222;
border:1px solid #222;
border-radius: 0 5px 5px 5px;
border-width: 0 1px 1px;
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
left: -9999px;
overflow: hidden;
position: absolute;
top: -9999px;
z-index: 2;
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-o-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-moz-transition: -moz-transform 0.1s linear;
-ms-transition: -ms-transform 0.1s linear;
-o-transition: -o-transform 0.1s linear;
-webkit-transition: -webkit-transform 0.1s linear;
transition: transform 0.1s linear;
}
#nav li {
background: url('menu_line.png') no-repeat scroll right 5px transparent;
float: left;
position: relative;
}
#nav li a {
color: #FFFFFF;
display: block;
float: left;
font-weight: normal;
height: 30px;
padding: 23px 20px 0;
position: relative;
text-decoration: none;
text-shadow: 1px 1px 1px #000000;
}
#nav li:hover > a {
color: #00B4FF;
}
#nav li:hover, #nav a:focus, #nav a:hover, #nav a:active {
background: none repeat scroll 0 0 #121212;
outline: 0 none;
}
#nav li:hover ul.subs {
left: 0;
top: 53px;
width: 180px;
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-o-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
#nav ul li {
background: none;
width: 100%;
}
#nav ul li a {
float: none;
}
#nav ul li:hover > a {
background-color: #121212;
color: #00B4FF;
}
#lavalamp {
background: url('lavalamp.png') no-repeat scroll 0 0 transparent;
height: 16px;
left: 13px;
position: absolute;
top: 0px;
width: 64px;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
}
#lavalamp:hover {
-moz-transition-duration: 3000s;
-ms-transition-duration: 3000s;
-o-transition-duration: 3000s;
-webkit-transition-duration: 3000s;
transition-duration: 3000s;
}
#nav li:nth-of-type(1):hover ~ #lavalamp {
left: 13px;
}
#nav li:nth-of-type(2):hover ~ #lavalamp {
left: 90px;
}
#nav li:nth-of-type(3):hover ~ #lavalamp {
left: 170px;
}
#nav li:nth-of-type(4):hover ~ #lavalamp {
left: 250px;
}
#nav li:nth-of-type(5):hover ~ #lavalamp {
left: 330px;
}
#nav li:nth-of-type(6):hover ~ #lavalamp {
left: 410px;
}
#nav li:nth-of-type(7):hover ~ #lavalamp {
left: 490px;
}
#nav li:nth-of-type(8):hover ~ #lavalamp {
left: 565px;
}
-
Par GloriaV le 31 Juillet 2016 à 10:47
2 niveles
Fuente: http://stackoverflow.com/questions/tagged/css<ul tabindex='0'>
<li>
<input id='item1' type='radio' name='item' checked='true' />
<label for='item1'>Item 1</label>
</li>
<li>
<input id='item2' type='radio' name='item' />
<label for='item2'>Item 2</label>
</li>
<li>
<input id='item3' type='radio' name='item' />
<label for='item3'>Item 3</label>
</li>
</ul>CSS
ul, li {
list-style:none;
margin:0;
padding:0;
}
li input {
display:none;
}
ul:not(:focus) input:not(:checked), ul:not(:focus) input:not(:checked) + label {
display:none;
}
input:checked+label {
color:red;
}
-
Par GloriaV le 31 Juillet 2016 à 10:48
Horizontal 2 niveles!!!
<div class="example" align="center">
<div class="menuholder">
<ul class="menu slide">
<li><a href="index.php?id=1" class="blue">Home</a></li>
<li><a href="index.php?id=14" class="blue">About Us</a></li>
<li><a href="index.php?id=4" class="blue">Mens</a>
<div class="subs">
<dl>
<dd><a href="index.php?id=15">Coats & Jackets</a></dd>
<dd><a href="index.php?id=22">Chinos</a></dd>
<dd><a href="index.php?id=23">Jeans</a></dd>
<dd><a href="index.php?id=24">Jumpers & Cardigans</a></dd>
<dd><a href="index.php?id=25">Linen</a></dd>
</dl>
<dl>
<dd><a href="index.php?id=26">Polo Shirts</a></dd>
<dd><a href="index.php?id=16">Shirts Casual</a></dd>
<dd><a href="index.php?id=27">Shirts Formal</a></dd>
<dd><a href="index.php?id=28">Shorts</a></dd>
<dd><a href="index.php?id=18">Sportswear</a></dd>
</dl>
<dl>
<dd><a href="index.php?id=19">Tops & T-Shirts</a></dd>
<dd><a href="index.php?id=20">Trousers Casual</a></dd>
<dd><a href="index.php?id=29">Trousers Formal</a></dd>
<dd><a href="index.php?id=30">Nightwear</a></dd>
<dd><a href="index.php?id=17">Socks</a></dd>
</dl>
<dl>
<dd><a href="index.php?id=21">Underwear</a></dd>
<dd><a href="index.php?id=31">Swimwear</a></dd>
</dl>
</div>
</li>
<!--menu-->
<li><a href="index.php?id=5" class="blue">Ladie's</a>
<div class="subs">
<dl>
<dd><a href="index.php?id=32">Coats & Jackets</a></dd>
<dd><a href="index.php?id=33">Dresses</a></dd>
<dd><a href="index.php?id=34">Jeans</a></dd>
<dd><a href="index.php?id=35">Jumpers & Cardigans</a></dd>
<dd><a href="index.php?id=36">Jumpsuits</a></dd>
</dl>
<dl>
<dd><a href="index.php?id=37">Leggings & Jeggings</a></dd>
<dd><a href="index.php?id=38">Linen</a></dd>
<dd><a href="index.php?id=39">Lingerie & Underwear</a></dd>
<dd><a href="index.php?id=40">Maternity Wear</a></dd>
<dd><a href="index.php?id=41">Nightwear</a></dd>
</dl>
<dl>
<dd><a href="index.php?id=42">Shorts</a></dd>
<dd><a href="index.php?id=43">Skirts</a></dd>
<dd><a href="index.php?id=44">Sportswear</a></dd>
<dd><a href="index.php?id=45">Suits & Tailoring</a></dd>
<dd><a href="index.php?id=46">Swimwear & Beachwear</a></dd>
</dl>
<dl>
<dd><a href="index.php?id=47">Thermals</a></dd>
<dd><a href="index.php?id=48">Tops & T-Shirts</a></dd>
<dd><a href="index.php?id=49">Trousers & Chinos</a></dd>
<dd><a href="index.php?id=50">Socks</a></dd>
</dl>
</div>
</li><!--menu end-->
<!--menu-->
<li><a href="index.php?id=7" class="blue">Girls</a>
<div class="subs">
<dl>
<dd><a href="index.php?id=51">Coats & Jackets</a></dd>
<dd><a href="index.php?id=52">Dresses</a></dd>
<dd><a href="index.php?id=53">Jeans</a></dd>
<dd><a href="index.php?id=54">Joggers & Sweatshirts</a></dd>
<dd><a href="index.php?id=55">Jumpers & Cardigans</a></dd>
</dl>
<dl>
<dd><a href="index.php?id=56">Jumpsuits & Playsuits</a></dd>
<dd><a href="index.php?id=57">Leggings</a></dd>
<dd><a href="index.php?id=58">Nightwear</a></dd>
<dd><a href="index.php?id=59">Shorts</a></dd>
<dd><a href="index.php?id=60">Skirts</a></dd>
</dl>
<dl>
<dd><a href="index.php?id=61">Swimwear</a></dd>
<dd><a href="index.php?id=62">Tops & T-Shirts</a></dd>
<dd><a href="index.php?id=63">Trousers & Jeans</a></dd>
<dd><a href="index.php?id=64">Socks</a></dd>
<dd><a href="index.php?id=65">Underwear</a></dd>
</dl>
<dl>
</dl>
</div>
</li><!--menu end-->
<!--menu-->
<li><a href="index.php?id=8" class="blue">Boys</a>
<div class="subs">
<dl>
<dd><a href="index.php?id=66">Coats & Jackets</a></dd>
<dd><a href="index.php?id=67">Jeans</a></dd>
<dd><a href="index.php?id=68">Joggers & Sweatshirts</a></dd>
<dd><a href="index.php?id=69">Jumpers & Cardigans</a></dd>
<dd><a href="index.php?id=70">Nightwear</a></dd>
</dl>
<dl>
<dd><a href="index.php?id=71">Shirts</a></dd>
<dd><a href="index.php?id=72">Shorts</a></dd>
<dd><a href="index.php?id=73">Sportswear</a></dd>
<dd><a href="index.php?id=74">Swimwear</a></dd>
<dd><a href="index.php?id=75">T-Shirts & Polo Shirts</a></dd>
</dl>
<dl>
<dd><a href="index.php?id=76">Trousers & Jeans</a></dd>
<dd><a href="index.php?id=77">Socks</a></dd>
<dd><a href="index.php?id=78">Underwear</a></dd>
</dl>
<dl>
</dl>
</div>
</li><!--menu end-->
<!--menu-->
<li><a href="index.php?id=9" class="blue">Toddlers</a>
<div class="subs">
<dl>
<dd><a href="index.php?id=79">Newborn</a></dd>
<dd><a href="index.php?id=80">0-2 Years</a></dd>
</dl>
</div>
</li><!--menu end-->
<!--menu-->
<li><a href="index.php?id=10" class="blue">Accessories</a>
<div class="subs">
<dl>
<dd><a href="index.php?id=81">Shoes</a></dd>
<dd><a href="index.php?id=82">Ties</a></dd>
<dd><a href="index.php?id=83">Caps</a></dd>
<dd><a href="index.php?id=84">Belts</a></dd>
</dl>
</div>
</li><!--menu end-->
<li><a href="index.php?id=13" class="blue">Contact Us</a></li>
</ul>
<div class="back"></div>
<div class="shadow"></div>
</div>
<div style="clear:both"></div>
</div>CSS
<style>
body{margin:0px;}
.example {
width:980px;
height:40px;
margin:0px auto;
position:absolute;
margin-bottom:60px;
top:95px;
}
.menuholder {
float:left;
font:normal bold 11px/35px verdana, sans-serif;
overflow:hidden;
position:relative;
}
.menuholder .shadow {
-moz-box-shadow:0 0 20px rgba(0, 0, 0, 1);
-o-box-shadow:0 0 20px rgba(0, 0, 0, 1);
-webkit-box-shadow:0 0 20px rgba(0, 0, 0, 1);
background:#888;
box-shadow:0 0 20px rgba(0, 0, 0, 1);
height:10px;
left:5%;
position:absolute;
top:-9px;
width:100%;
z-index:100;
}
.menuholder .back {
-moz-transition-duration:.4s;
-o-transition-duration:.4s;
-webkit-transition-duration:.4s;
background-color:rgba(0, 0, 0, 0.88);
height:0;
width:980px; /*100%*/
}
.menuholder:hover div.back {
height:280px;
}
ul.menu {
display:block;
float:left;
list-style:none;
margin:0;
padding:0 125px;
position:relative;
}
ul.menu li {
float:left;
margin:0 10px 0 0;
}
ul.menu li > a {
-moz-border-radius:0 0 10px 10px;
-moz-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.9);
-moz-transition:all 0.3s ease-in-out;
-o-border-radius:0 0 10px 10px;
-o-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.9);
-o-transition:all 0.3s ease-in-out;
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:10px;
-webkit-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.9);
-webkit-transition:all 0.3s ease-in-out;
border-radius:0 0 10px 10px;
box-shadow:2px 2px 4px rgba(0, 0, 0, 0.9);
color:#eee;
display:block;
padding:0 10px;
text-decoration:none;
transition:all 0.3s ease-in-out;
}
ul.menu li a.red {
background:#a00;
}
ul.menu li a.orange {
background:#da0;
}
ul.menu li a.yellow {
background:#aa0;
}
ul.menu li a.green {
background:#060;
}
ul.menu li a.blue {
background:#073263;
}
ul.menu li a.violet {
background:#682bc2;
}
.menu li div.subs {
left:0;
overflow:hidden;
position:absolute;
top:35px;
width:0;
}
.menu li div.subs dl {
-moz-transition-duration:.2s;
-o-transition-duration:.2s;
-webkit-transition-duration:.2s;
float:left;
margin:0 130px 0 0;
overflow:hidden;
padding:40px 0 5% 2%;
width:0;
}
.menu dt {
color:#fc0;
font-family:arial, sans-serif;
font-size:12px;
font-weight:700;
height:20px;
line-height:20px;
margin:0;
padding:0 0 0 10px;
white-space:nowrap;
}
.menu dd {
margin:0;
padding:0;
text-align:left;
}
.menu dd a {
background:transparent;
color:#fff;
font-size:12px;
height:20px;
line-height:20px;
padding:0 0 0 10px;
text-align:left;
white-space:nowrap;
width:80px;
}
.menu dd a:hover {
color:#fc0;
}
.menu li:hover div.subs dl {
-moz-transition-delay:0.2s;
-o-transition-delay:0.2s;
-webkit-transition-delay:0.2s;
margin-right:2%;
width:21%;
}
ul.menu li:hover > a,ul.menu li > a:hover {
background:#aaa;
color:#fff;
padding:10px 10px 0;
}
ul.menu li a.red:hover,ul.menu li:hover a.red {
background:#c00;
}
ul.menu li a.orange:hover,ul.menu li:hover a.orange {
background:#fc0;
}
ul.menu li a.yellow:hover,ul.menu li:hover a.yellow {
background:#cc0;
}
ul.menu li a.green:hover,ul.menu li:hover a.green {
background:#080;
}
ul.menu li a.blue:hover,ul.menu li:hover a.blue {
background:#00c;
}
ul.menu li a.violet:hover,ul.menu li:hover a.violet {
background:#8a2be2;
}
.menu li:hover div.subs,.menu li a:hover div.subs {
width:100%;
}
-
Par GloriaV le 31 Juillet 2016 à 10:49
Horizontal 3 niveles !!!
<ul class="top-level-menu">
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li>
<a href="#">Offices</a>
<ul class="second-level-menu">
<li><a href="#">Chicago</a></li>
<li><a href="#">Los Angeles</a></li>
<li>
<a href="#">New York</a>
<ul class="third-level-menu">
<li><a href="#">Information</a></li>
<li><a href="#">Book a Meeting</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Jobs</a></li>
</ul>
</li>
<li><a href="#">Seattle</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>CSS
/* Menu Styles */
.third-level-menu
{
position: absolute;
top: 0;
right: -150px;
width: 150px;
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.third-level-menu > li
{
height: 30px;
background: #999999;
}
.third-level-menu > li:hover { background: #CCCCCC; }
.second-level-menu
{
position: absolute;
top: 30px;
left: 0;
width: 150px;
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.second-level-menu > li
{
position: relative;
height: 30px;
background: #999999;
}
.second-level-menu > li:hover { background: #CCCCCC; }
.top-level-menu
{
list-style: none;
padding: 0;
margin: 0;
}
.top-level-menu > li
{
position: relative;
float: left;
height: 30px;
width: 150px;
background: #999999;
}
.top-level-menu > li:hover { background: #CCCCCC; }
.top-level-menu li:hover > ul
{
/* On hover, display the next level's menu */
display: inline;
}
/* Menu Link Styles */
.top-level-menu a /* Apply to all links inside the multi-level menu */
{
font: bold 14px Arial, Helvetica, sans-serif;
color: #FFFFFF;
text-decoration: none;
padding: 0 0 0 10px;
/* Make the link cover the entire list item-container */
display: block;
line-height: 30px;
}
.top-level-menu a:hover { color: #000000; }
-
Par GloriaV le 31 Juillet 2016 à 10:50
Horizontal 3 niveles
<ul id="nav">
<li><a href="#">1 HTML</a></li>
<li><a href="#">2 CSS</a></li>
<li><a href="#">3 Javascript</a>
<ul>
<li><a href="#">3.1 jQuery</a>
<ul>
<li><a href="#">3.1.1 Download</a></li>
<li><a href="#">3.1.2 Tutorial</a></li>
</ul>
</li>
<li><a href="#">3.2 Mootools</a></li>
<li><a href="#">3.3 Prototype</a></li>
</ul>
</li>
</ul>CSS
#nav, #nav ul{
margin:0;
padding:0;
list-style-type:none;
list-style-position:outside;
position:relative;
line-height:1.5em;
}
#nav a:link, #nav a:active, #nav a:visited{
display:block;
padding:0px 5px;
border:1px solid #333;
color:#fff;
text-decoration:none;
background-color:#333;
}
#nav a:hover{
background-color:#fff;
color:#333;
}
#nav li{
float:left;
position:relative;
}
#nav ul {
position:absolute;
width:12em;
top:1.5em;
display:none;
}
#nav li ul a{
width:12em;
float:left;
}
#nav ul ul{
top:auto;
}
#nav li ul ul {
left:12em;
margin:0px 0 0 10px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
display:none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
display:block;
}
-
Par GloriaV le 31 Juillet 2016 à 11:10
3 niveles
Fuente: http://web.tursos.com/como-hacer-un-menu-desplegable-multinivel-usando-solo-css/<ul id="dropdownmenu">
<li><a href="#">Link 1</a></li>
<li>
<a href="#">Link 2</a>
<ul>
<li><a href="#">SubLink 2.1</a></li>
<li><a href="#">SubLink 2.2</a></li>
<li><a href="#">SubLink 2.3</a></li>
</ul>
</li>
<li>
<a href="#">Link 3</a>
<ul>
<li><a href="#">SubLink 3.1</a></li>
<li><a href="#">SubLink 3.2</a></li>
</ul>
</li>
<li><a href="#">Link 4</a></li>
<li>
<a href="#">Link 5</a>
<ul>
<li>
<a href="#">SubLink 5.1</a>
<ul>
<li><a href="#">SubLink5.1.1</a></li>
<li><a href="#">SubLink5.1.2</a></li>
</ul>
</li>
<li><a href="#">SubLink 5.2</a></li>
</ul>
</li>
</ul>CSS
body, ul, li { margin:0; padding:0; } ul { list-style:none; display:inline-block; } ul li { float:left; } ul#dropdownmenu { margin:none; list-style:none; height:40px; width:100%; background:#C1F2FB; border-radius: 5px; border-bottom: 4px solid #0FA7C1; } ul#dropdownmenu li { height:40px; } ul#dropdownmenu li a { display:block; padding:8px; height:24px; color:#000; font-family:Arial, Verdana, Geneva, sans-serif; font-size:18px; text-decoration:none; } ul#dropdownmenu li a:hover { background:#0D8FA5; border-radius: 5px; border: 1px dotted #0FA7C1; } ul#dropdownmenu li ul { display:none; } ul#dropdownmenu li:hover ul { display:block; background:#84E5F6; border-radius: 5px; border: 1px dotted #0FA7C1; position:absolute; } ul#dropdownmenu li:hover ul li { float:none; position:relative; /* Gracias por el consejo, Álex */ background:#fff; } ul#dropdownmenu li ul li ul, ul#dropdownmenu li:hover ul li ul { display:none; } ul#dropdownmenu li:hover ul li:hover ul { display:block; top:0; left:100%; }
-
Par GloriaV le 31 Juillet 2016 à 11:17
Vertical 3 niveles
Fuente. http://www.cssscript.com/multilevel-accordion-menu-with-plain-html-css/<nav class="nav" role="navigation"> <ul class="nav__list"> <li> <input id="group-1" type="checkbox" hidden /> <label for="group-1"><span class="fa fa-angle-right"></span> First level</label> <ul class="group-list"> <li><a href="#">1st level item</a></li> <li> <input id="sub-group-1" type="checkbox" hidden /> <label for="sub-group-1"><span class="fa fa-angle-right"></span> Second level</label> <ul class="sub-group-list"> <li><a href="#">2nd level nav item</a></li> <li><a href="#">2nd level nav item</a></li> <li><a href="#">2nd level nav item</a></li> <li> <input id="sub-sub-group-1" type="checkbox" hidden /> <label for="sub-sub-group-1"><span class="fa fa-angle-right"></span> Third level</label> <ul class="sub-sub-group-list"> <li><a href="#">3rd level nav item</a></li> <li><a href="#">3rd level nav item</a></li> <li><a href="#">3rd level nav item</a></li> </ul> </li> </ul> </li> </ul> </li> <li> <input id="group-2" type="checkbox" hidden /> <label for="group-2"><span class="fa fa-angle-right"></span> First level</label> <ul class="group-list"> <li> <li><a href="#">1st level item</a></li> <li><a href="#">1st level item</a></li> <input id="sub-group-2" type="checkbox" hidden /> <label for="sub-group-2"><span class="fa fa-angle-right"></span> Second level</label> <ul class="sub-group-list"> <li><a href="#">2nd level nav item</a></li> <li><a href="#">2nd level nav item</a></li> <li> <input id="sub-sub-group-2" type="checkbox" hidden /> <label for="sub-sub-group-2"><span class="fa fa-angle-right"></span> Third level</label> <ul class="sub-sub-group-list"> <li><a href="#">3rd level nav item</a></li> </ul> </li> </ul> </li> </ul> </li> <li> <input id="group-3" type="checkbox" hidden /> <label for="group-3"><span class="fa fa-angle-right"></span> First level</label> <ul class="group-list"> <li> <li><a href="#">1st level item</a></li> <li><a href="#">1st level item</a></li> <input id="sub-group-3" type="checkbox" hidden /> <label for="sub-group-3"><span class="fa fa-angle-right"></span> Second level</label> <ul class="sub-group-list"> <li><a href="#">2nd level nav item</a></li> <li><a href="#">2nd level nav item</a></li> <li><a href="#">2nd level nav item</a></li> <li> <input id="sub-sub-group-3" type="checkbox" hidden /> <label for="sub-sub-group-3"><span class="fa fa-angle-right"></span> Third level</label> <ul class="sub-sub-group-list"> <li><a href="#">3rd level nav item</a></li> <li><a href="#">3rd level nav item</a></li> <li><a href="#">3rd level nav item</a></li> </ul> </li> </ul> </li> </ul> </li> <li> <input id="group-4" type="checkbox" hidden /> <label for="group-4"><span class="fa fa-angle-right"></span> First level</label> <ul class="group-list"> <li> <li><a href="#">1st level item</a></li> <input id="sub-group-4" type="checkbox" hidden /> <label for="sub-group-4"><span class="fa fa-angle-right"></span> Second level</label> <ul class="sub-group-list"> <li><a href="#">2nd level nav item</a></li> <li><a href="#">2nd level nav item</a></li> </ul> </li> </ul> </li> </ul> </nav>CSS
.nav a, .nav label { display: block; padding: .40rem; color: #000; background: linear-gradient(to right, rgba(243,211,211,1) 0%, rgba(254,247,225,0.9) 24%, rgba(247,58,34,0.78) 51%, rgba(254,247,225,0.69) 71%, rgba(243,211,211,0.6) 94%, rgba(243,211,211,0.57) 100%); border-radius: 5px; border: 1px dotted #543F03; box-shadow: inset 0 -1px #1d1d1d; -webkit-transition: all .25s ease-in; transition: all .25s ease-in; } .nav a:focus, .nav a:hover, .nav label:focus, .nav label:hover { color: rgba(255, 255, 255, 0.5); background: #FFE6E5; } .nav label { cursor: pointer; } /** * Styling first level lists items */ .group-list a, .group-list label { padding-left: 3rem; background: linear-gradient(to right, rgba(243,211,211,1) 0%, rgba(254,247,225,0.9) 24%, rgba(254,247,225,0.69) 71%, rgba(243,211,211,0.6) 94%, rgba(243,211,211,0.57) 100%); box-shadow: inset 0 -1px #373737; } .group-list a:focus, .group-list a:hover, .group-list label:focus, .group-list label:hover { background: #FFE5F8; } /** * Styling second level list items */ .sub-group-list a, .sub-group-list label { padding-left: 3rem; background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(254,247,225,0.9) 24%, rgba(255,255,255,0.8) 46%, rgba(254,247,225,0.69) 71%, rgba(255,255,255,0.6) 94%, rgba(255,255,255,0.57) 100%); box-shadow: inset 0 -1px #474747; } .sub-group-list a:focus, .sub-group-list a:hover, .sub-group-list label:focus, .sub-group-list label:hover { background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(254,247,225,0.9) 24%, rgba(255,255,255,0.8) 46%, rgba(254,247,225,0.69) 71%, rgba(255,229,248,0.6) 94%, rgba(255,229,248,0.57) 100%); } /** * Styling third level list items */ .sub-sub-group-list a, .sub-sub-group-list label { padding-left: 4rem; background: #FFE6E5; box-shadow: inset 0 -1px #575757; } .sub-sub-group-list a:focus, .sub-sub-group-list a:hover, .sub-sub-group-list label:focus, .sub-sub-group-list label:hover { background: #333333; } /** * Hide nested lists */ .group-list, .sub-group-list, .sub-sub-group-list { height: 100%; max-height: 0; overflow: hidden; -webkit-transition: max-height .5s ease-in-out; transition: max-height .5s ease-in-out; } .nav__list input[type=checkbox]:checked + label + ul { /* reset the height when checkbox is checked */ max-height: 1000px; } label > span { float: right; -webkit-transition: -webkit-transform .65s ease; transition: transform .65s ease; } .nav__list input[type=checkbox]:checked + label > span { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); }HTML
-
Par GloriaV le 31 Juillet 2016 à 11:19
Horizontal 2 niveles (en Eklablog no funciona)
<nav class="wrapper"> <ul class="main"> <li class="front"><a href="#">Item</a></li> <li class="front"><a href="#">Item</a></li> <li class="front"><a href="#">Hover</a> <!--2---------------> <ul class="sub"> <li class="bottom"><a href="#">Sub Item</a></li> <li class="bottom"><a href="#">Sub Item</a></li> <li class="bottom"><a href="#">Sub Item</a></li> </ul> </li> <!-----------------> <li class="front"><a href="#">Item</a></li> <li class="front"><a href="#">Item</a></li> </ul> </nav>CSS
nav { color: #1d1d1d; margin: 0 auto; width: 541px; } a { text-decoration: none; color: inherit; } nav ul ul { -webkit-transition: all 500ms ease-in-out 500ms; -moz-transition: all 500ms ease-in-out 500ms; -ms-transition: all 500ms ease-in-out 500ms; -o-transition: all 500ms ease-in-out 500ms; transition: all 500ms ease-in-out 500ms; -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); -ms-transform: rotateX(-90deg); -o-transform: rotateX(-90deg); transform: rotateX(-90deg); -webkit-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -o-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; -webkit-box-shadow: 0px -100px 500px rgba(0,0,0,0); box-shadow: 0px -100px 500px rgba(0,0,0,0); } nav ul li:hover > ul { -webkit-transition: all 500ms ease-in-out 0ms; -moz-transition: all 500ms ease-in-out 0ms; -ms-transition: all 500ms ease-in-out 0ms; -o-transition: all 500ms ease-in-out 0ms; transition: all 500ms ease-in-out 0ms; -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); -webkit-box-shadow: 10px 10px 10px rgba(0,0,0,0.1); box-shadow: 10px 10px 10px rgba(0,0,0,0.1); } nav ul { background-image: -webkit-linear-gradient(top, #ff7000 70%, #ff560f 100%); background-image: linear-gradient(to bottom, #ff7000 70%, #ff560f 100%); padding: 0; list-style: none; position: relative; display: inline-table; border-radius: 5px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-perspective: 200px; -ms-perspective: 200px; perspective: 200px; } nav ul:after { content: ""; clear: both; display: block; } nav ul li { float: left; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-perspective: 200px; -ms-perspective: 200px; perspective: 200px; border-right: 1px solid #890456; } nav ul > li:last-of-type { border-right: none; border-radius: 0 5px 5px 0; } nav ul span li { border-right: 1px solid #890456; } nav ul li:first-of-type { border-radius: 5px 0 0 5px; } nav ul li:hover { background-image: -webkit-linear-gradient(top, #ff8931, #ff5012); background-image: linear-gradient(to bottom, #ff8931, #ff5012); } nav ul li:hover > a { color: #fff; } nav ul li a { display: block; padding: 10px 31px 10px 32px; } nav ul ul { position: absolute; top: 100%; padding: 0; border-radius: 0 0 5px 5px; background: #ff560f; } nav ul ul li { float: none; position: relative; border: none; } nav ul ul li:last-of-type { border-radius: 0 0 5px 5px; } nav ul ul li a { padding: 8px 21px; }CSS mejorada
nav { color: #1d1d1d; margin: 0 auto; width: 841px; } a { text-decoration: none; color: inherit; } nav ul ul { -webkit-transition: all 500ms ease-in-out 500ms; -moz-transition: all 500ms ease-in-out 500ms; -ms-transition: all 500ms ease-in-out 500ms; -o-transition: all 500ms ease-in-out 500ms; transition: all 500ms ease-in-out 500ms; -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); -ms-transform: rotateX(-90deg); -o-transform: rotateX(-90deg); transform: rotateX(-90deg); -webkit-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -o-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; -webkit-box-shadow: 0px -100px 500px rgba(0,0,0,0); box-shadow: 0px -100px 500px rgba(0,0,0,0); } nav ul li:hover > ul { -webkit-transition: all 500ms ease-in-out 0ms; -moz-transition: all 500ms ease-in-out 0ms; -ms-transition: all 500ms ease-in-out 0ms; -o-transition: all 500ms ease-in-out 0ms; transition: all 500ms ease-in-out 0ms; -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); -webkit-box-shadow: 10px 10px 10px rgba(0,0,0,0.1); box-shadow: 10px 10px 10px rgba(0,0,0,0.1); } nav ul { background-image: -webkit-linear-gradient(top, #ff7000 70%, #ff560f 100%); background-image: linear-gradient(to bottom, #ff7000 70%, #ff560f 100%); padding: 0; list-style: none; position: relative; display: inline-table; border-radius: 5px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-perspective: 200px; -ms-perspective: 200px; perspective: 200px; } nav ul:after { content: ""; clear: both; display: block; } nav ul li { float: left; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-perspective: 200px; -ms-perspective: 200px; perspective: 200px; border-right: 1px solid #890456; } nav ul > li:last-of-type { border-right: none; border-radius: 0 5px 5px 0; } nav ul span li { border-right: 1px solid #890456; } nav ul li:first-of-type { border-radius: 5px 0 0 5px; } nav ul li:hover { background-image: -webkit-linear-gradient(top, #ff8931, #ff5012); background-image: linear-gradient(to bottom, #ff8931, #ff5012); border-radius: 5px; border: 1px solid #fff; } nav ul li:hover > a { color: #fff; } nav ul li a { display: block; padding: 10px 11px 10px 12px; } nav ul ul { position: absolute; top: 100%; padding: 0; border-radius: 0 0 5px 5px; background: #ff560f; } nav ul ul li { float: none; position: relative; border: none; } nav ul ul li:last-of-type { border-radius: 0 0 5px 5px; } nav ul ul li a { padding: 8px 11px; }
-
Par GloriaV le 7 Février 2017 à 14:59
Menu horizontal
HTML<ul class="nav">
<li>
<a href="http://megaweb.su/">Меню 1</a>
<ul class="sub1">
<li class="p1">
<a href="http://megaweb.su/">Категория 1</a>
</li>
<li class="p2">
<a href="http://megaweb.su/">Категория 2</a>
</li>
<li class="p3">
<a href="http://megaweb.su/">Категория 3</a>
</li>
<li class="p4">
<a href="http://megaweb.su/">Категория 4</a>
</li>
<li class="p5">
<a href="http://megaweb.su/">Категория 5</a>
</li>
</ul>
</li>
<li>
<a href="http://megaweb.su/">Меню 2</a>
<ul class="sub2">
<li class="p1">
<a href="http://megaweb.su/">Категория 1</a>
</li>
<li class="p2">
<a href="http://megaweb.su/">Категория 2</a>
</li>
<li class="p3">
<a href="http://megaweb.su/">Категория 3</a>
</li>
</ul>
</li>
<li>
<a href="http://megaweb.su/">Меню 3</a>
<ul class="sub3">
<li class="p1">
<a href="http://megaweb.su/">Категория 1</a>
</li>
<li class="p2">
<a href="http://megaweb.su/">Категория 2</a>
</li>
<li class="p3">
<a href="http://megaweb.su/">Категория 3</a>
</li>
<li class="p4">
<a href="http://megaweb.su/">Категория 4</a>
</li>
<li class="p5">
<a href="http://megaweb.su/">Категория 5</a>
</li>
<li class="p6">
<a href="http://megaweb.su/">Категория 6</a>
</li>
</ul>
</li>
<li>
<a href="http://megaweb.su/">Меню 4</a>
<ul class="sub4">
<li class="p1">
<a href="http://megaweb.su/">Категория 1</a>
</li>
<li class="p2">
<a href="http://megaweb.su/">Категория 2</a>
</li>
<li class="p3">
<a href="http://megaweb.su/">Категория 3</a>
</li>
</ul>
</li>
<li>
<a href="http://megaweb.su/">Меню 5</a>
<ul class="sub5">
<li class="p1">
<a href="http://megaweb.su/">Категория 1</a>
</li>
<li class="p2">
<a href="http://megaweb.su/">Категория 2</a>
</li>
<li class="p3">
<a href="http://megaweb.su/">Категория 3</a>
</li>
</ul>
</li>
</ul>
<div class="clear"></div>
CSS
.nav, .nav ul {
padding:0;
margin:0;
list-style:none; }
.nav {
position:relative;
width:540px;
margin:0 auto;
}
.nav ul {
position:absolute;
top:37px;
left:0;
height:0;
overflow:hidden;
}
.nav li {
float:left;
position:relative; background:transparent;
}
.nav li a {
display:block;
line-height:35px;
padding:0 20px;
border:1px solid #444;
border-bottom-color:#000;
color: #999;
text-shadow: 1px -1px 1px #000; text-decoration:none;
font-size:12px;
font-weight:bold;
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
-o-transition: 0.6s;
transition: 0.6s;
}
.nav li:hover >
a {
background:#666;
border-color:#888 #777 #444 #555; color:#fff;
}
.nav li:hover ul.sub1 {
width:180px;
height:185px;
}
.nav li:hover ul.sub2 {
width:150px;
height:111px;
} .nav li:hover ul.sub3 { width:130px;
height:222px;
} .nav li:hover ul.sub4 { width:150px;
height:111px;
}
.nav li:hover ul.sub5 {
width:160px;
height:111px;
} .nav ul li {
width:100%;
opacity:0;
-webkit-transition: 0.5s;
-moz-transition: 0.5s; -o-transition: 0.5s;
transition: 0.5s;
} .nav li ul li.p1 {
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s; transition-delay: 0s;
}
.nav li ul li.p2 {
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s; transition-delay: 0s;
}
.nav li ul li.p3 {
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s; transition-delay: 0s;
}
.nav li ul li.p4 {
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s; transition-delay: 0s;
}
.nav li ul li.p5 {
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s; transition-delay: 0s;
}
.nav li ul li.p6 {
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s; transition-delay: 0s;
}
.nav li:hover ul li {
opacity:1;
}
.nav li:hover ul li.p1 {
-webkit-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-o-transition-delay: 0.5s; transition-delay: 0.5s;
}
.nav li:hover ul li.p2 {
-webkit-transition-delay: 0.6s;
-moz-transition-delay: 0.6s;
-o-transition-delay: 0.6s; transition-delay: 0.6s;
}
.nav li:hover ul li.p3 {
-webkit-transition-delay: 0.7s;
-moz-transition-delay: 0.7s;
-o-transition-delay: 0.7s; transition-delay: 0.7s;
}
.nav li:hover ul li.p4 {
-webkit-transition-delay: 0.8s;
-moz-transition-delay: 0.8s;
-o-transition-delay: 0.8s; transition-delay: 0.8s;
}
.nav li:hover ul li.p5 {
-webkit-transition-delay: 0.9s;
-moz-transition-delay: 0.9s;
-o-transition-delay: 0.9s; transition-delay: 0.9s;
}
.nav li:hover ul li.p6 {
-webkit-transition-delay: 1s;
-moz-transition-delay: 1s;
-o-transition-delay: 1s; transition-delay: 1s;
}
.nav ul li a {
background:#666;
border-color:#888 #777 #444 #555;
color:#bbb;
line-height:1px;
-webkit-transition: 1.5s;
-moz-transition: 1.5s;
-o-transition: 1.5s;
transition: 1.5s;
}
.nav li:hover ul li a {
line-height:35px;
}
.nav ul li a:hover { background:#09c;
background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0))); background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); background-image: -o-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 25, 0));
}
* html .nav a {
border-color:#444 #444 #000 #444; height:35px; float:left;
}
.nav a:hover {
background:#666;
border-color:#888 #777 #444 #555; color:#fff;
}
.nav a:hover ul.sub1 {
width:180px; height:185px;
} .nav a:hover ul.sub2 { width:150px; height:111px; }
.nav a:hover ul.sub3 {
width:130px;
height:222px;
}
.nav a:hover ul.sub4 {
width:150px; height:111px;
} .nav a:hover ul.sub5 { width:160px;
height:111px;
}
.nav a:hover ul li a {
line-height:35px;
height:35px; float:none;
}
.clear {
clear:both; height:0;
line-height:1px;
margin:0;
padding:0;
}
-
Par GloriaV le 7 Février 2017 à 15:11
Menu vertical 1 nivel
HTML<div id="vdknopka">
<a title="MegaWeb.su - уютный уголок для web-мастера" href="http://megaweb.su/">Пункт 1</a>
<a title="MegaWeb.su - уютный уголок для web-мастера" href="http://megaweb.su/">Пункт 2</a>
<a title="MegaWeb.su - уютный уголок для web-мастера" href="http://megaweb.su/">Пункт 3</a>
<a title="MegaWeb.su - уютный уголок для web-мастера" href="http://megaweb.su/">Пункт 4</a>
<a title="MegaWeb.su - уютный уголок для web-мастера" href="http://megaweb.su/">Пункт 5</a>
</div>
CSS#vdknopka a, #vdknopka a:visited { position:relative;
text-decoration:none;
text-align:center;
background-color:#9ab;
color:#fff;
display:block; width:10em;
border:2px solid #fff;
border-color:#def #678 #345 #cde; padding:0.25em;
margin:0.5em auto;
}
#vdknopka a:hover {
top:2px;
left:2px;
color:#fff;
border-color:#345 #cde #def #678;
}
Menu horixontal 1 nivel
HTML<div id="vdknopka1">
<a title="MegaWeb.su - уютный уголок для web-мастера" href="http://megaweb.su/">Пункт 1</a>
<a title="MegaWeb.su - уютный уголок для web-мастера" href="http://megaweb.su/">Пункт 2</a>
<a title="MegaWeb.su - уютный уголок для web-мастера" href="http://megaweb.su/">Пункт 3</a>
<a title="MegaWeb.su - уютный уголок для web-мастера" href="http://megaweb.su/">Пункт 4</a>
<a title="MegaWeb.su - уютный уголок для web-мастера" href="http://megaweb.su/">Пункт 5</a>
</div>
CSS#vdknopka1 {
text-align:center;
width:41em;
margin:0 auto;
}
#vdknopka1 a,
#vdknopka1 a:visited { position:relative;
text-decoration:none;
text-align:center;
background-color:#9ab;
color:#fff;
border:2px solid #fff;
border-color:#def #678 #345 #cde; padding:0.25em 2em;
margin:0.5em auto;
}
#vdknopka1 a:hover {
top:2px;
left:2px;
color:#fff;
border-color:#345 #cde #def #678;
}
-
Par GloriaV le 8 Mars 2017 à 15:03
Menu horizontal 1 nivel
HTML<ul id="liste">
CSS
<li>
<p class="jingle"><a onmouseover="PlayMusic('url mp3');" href="http://com/">Inicio</a></p>
</li>
<li>
<p class="jingle"><a onmouseover="PlayMusic('url mp3');" href="http://com/">Pagina 1</a></p>
</li>
<li>
<p class="jingle"><a onmouseover="PlayMusic('url mp3');" href="http://com/">Pagina 2 </a></p>
</li>
<li>
<p class="jingle"><a onmouseover="PlayMusic('url mp3');" href="http://com/">Pagina 3</a></p>
</li>
<li>
<p class="jingle"><a onmouseover="PlayMusic('url mp3');" href="http://com/">Contacto</a></p>
</li>
</ul>
<style type="text/css"><!--
#liste li{position: absolute;
top: -180px;
list-style-type: none;
float:left;
width:10px;
margin-left:50px;
transition: all 1s ease 0s;
-webkit-transition: 1s;
-moz-transition: 1s;}
#liste li a:hover{
transition: all 1s ease 0s;
-webkit-transition: 1s;
-moz-transition: 1s;
transform:scale(1.2);
-webkit-transform:scale(1.2);
-moz-transform:scale(1.2);
transition: all 1s ease 0s;
/*---animation-duration: 0.5s;--pourquoi une durée ?-----
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
transition:0.5s;------*/
}
/*-----------------------nth-1--------------------------*/
#liste li:nth-child(1) a {
background-image: url(https://lh3.googleusercontent.com/-3kwZy2jQx8w/WMAHj6CtHII/AAAAAAACtXk/69e9ko6_qgIQMuetrEU5vttys0NGxTF8wCL0B/w150-d-h50-p-rw/5c.png);
background-repeat: no-repeat;
position: absolute;
top: 300px;
height: 70px; width: 170px;
background-position:10px 0px;
padding-top: 80px;
color: black;
font-family: Edwardian Script ITC;
font-size:25px;
transition: all 1s ease 0s;
-webkit-transition: 1s;
-moz-transition: 1s;
}
#liste li:nth-child(1) a:hover {
color: #b33369;
transform:scale(1.2);
-webkit-transform:scale(1.2);
-moz-transform:scale(1.2);
transition: all 1s ease 0s;
/*---animation-duration: 0.5s;--pourquoi une durée ?-----*/
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
transition:0.5s;
}
/*-----------------------nth-2--------------------------*/
#liste li:nth-child(2) a {
background-image:url(https://lh3.googleusercontent.com/-PATtG58cIQI/WMAHykRxS_I/AAAAAAACtYA/7T2Y0k2vMogna_wsBsAYOYuvkiyHxCQvQCJoC/w150-h50-p-rw/5e.png);
background-repeat: no-repeat;
position: absolute;
top: 270px;margin-left:180px;
height: 70px; width: 150px;
background-position: 0px 0px;
padding-top: 60px;
color: black;
font-family: Edwardian Script ITC;
font-size:25px;
transition: all 1s ease 0s;
-webkit-transition: 1s;
-moz-transition: 1s;
}
#liste li:nth-child(2) a:hover {
color:#2d6197;
transform:scale(1.2);
-webkit-transform:scale(1.2);
-moz-transform:scale(1.2);
transition: all 1s ease 0s;
/*---animation-duration: 0.5s;--pourquoi une durée ?-----*/
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
transition:0.5s;
}
/*-----------------------nth-3--------------------------*/
#liste li:nth-child(3) a {
background-image:url(https://lh3.googleusercontent.com/-2Nx-1X_6ptM/WMAIU2aG62I/AAAAAAACtYo/sASEL12dOt4jJPmpO3_eMXgc0I03pwB-gCL0B/w150-d-h50-p-rw/5d.png);
background-repeat: no-repeat;
position: absolute;
top:270px;margin-left:330px;
height: 70px; width: 170px;
background-position: 20px 0px;
padding-top: 60px;
color: black;
font-family: Edwardian Script ITC;
font-size:25px;
transition: all 1s ease 0s;
-webkit-transition: 1s;
-moz-transition: 1s;
}
#liste li:nth-child(3) a:hover {
color:#e50141;
transform:scale(1.2);
-webkit-transform:scale(1.2);
-moz-transform:scale(1.2);
transition: all 1s ease 0s;
/*---animation-duration: 0.5s;--pourquoi une durée ?-----*/
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
transition:0.5s;
}
/*-----------------------nth-4--------------------------*/
#liste li:nth-child(4) a {
background-image: url(https://lh3.googleusercontent.com/-BTvoTIU0pMg/WMAIwxW2ezI/AAAAAAACtZU/TMg-TQ3d1f0B8GSTdlMK0RbRa-LWx5kPgCL0B/w150-d-h50-p-rw/5f.png);
background-repeat: no-repeat;
position: absolute;
top: 240px;margin-left:490px;
height: 70px; width: 180px;
background-position: 30px 0px;
padding-top: 60px;
color: black;
font-family: Edwardian Script ITC;
font-size:25px;
transition: all 1s ease 0s;
-webkit-transition: 1s;
-moz-transition: 1s;
}
#liste li:nth-child(4) a:hover {
color:#82cd80;
transform:scale(1.2);
-webkit-transform:scale(1.2);
-moz-transform:scale(1.2);
transition: all 1s ease 0s;
/*---animation-duration: 0.5s;--pourquoi une durée ?-----*/
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
transition:0.5s;
}
/*-----------------------nth-5--------------------------*/
#liste li:nth-child(5) a {
background-image: url(https://lh3.googleusercontent.com/-tofoB21W2EY/WMAKRNKdn4I/AAAAAAACtaQ/MzQhHUlqh3IdmALika9TjlboylgSj-CxACL0B/w150-d-h50-p-rw/5g.png);
background-repeat: no-repeat;
position: absolute;
top:270px;margin-left:710px;
height: 70px; width: 170px;
background-position: 0px 0px;
padding-top: 60px;
color: #000;
font-family: Edwardian Script ITC;
font-size:25px;
transition: all 1s ease 0s;
-webkit-transition: 1s;
-moz-transition: 1s;
}
#liste li:nth-child(5) a:hover {
color:#dc8100;
transform:scale(1.2);
-webkit-transform:scale(1.2);
-moz-transform:scale(1.2);
transition: all 1s ease 0s;
/*---animation-duration: 0.5s;-------*/
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
transition:0.5s;
}
--></style>
-
Par GloriaV le 6 Avril 2017 à 16:29
HTML
<div class="myS">
<div class="myS1"><a href="#">Texto</a></div>
<div class="myS1"><a href="#">Texto</a></div>
<div class="myS1"><a href="#">Texto</a></div>
<div class="myS1"><a href="#">Texto</a></div>
<div class="myS1"><a href="#">Texto</a></div>
<div class="myS1"><a href="#">Texto</a></div>
<div class="myS1"><a href="#">Texto</a></div> </div>
CSS
.myS{
width:90px;
height:200px;
border-radius: 5px;
border: 4px double #534054;
box-shadow: 10px -10px 10px rgba(0, 0, 0, 0.5);
background-color:rgba(186, 165, 178, 0.5);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EBCCE7), to(#F0ADE9), color-stop(.6,#D4CBD2));
float:left;
position:absolute;
top:30px; left:125px;
}
.myS1{
width:80px;
height:20px;
color: 000000;
font-size: 22px;
font-family: Monotype Corsiva;
background-color:#FDE7FE;
border-radius: 25px;
border: 1px dotted #534054;
box-shadow: 3px -3px 3px rgba(0, 0, 0, 0.5);
text-align:center;
margin-top:5px;
float:left；
}
-
-
Numquam renuntiabit
<a href="http://tutorialgloriav.eklablog.com/"
target="_blank"><img src=
"http://ekladata.com/cEEYfZtSNwWA8Pt7k--C97p7qFs/34.gif"
alt="" width="120" /> -
Con mucho gusto y
gran placer os
presentó mi ayudante
-
"No puedes enseñárselo todo: sólo puedes ayudarle a encontrarlo por sí mismo."
Galileo Galilei y
-
Vivir en armonía con el universo es vivir lleno de alegría, amor y abundancia.
Shakti Gawain -
-
-
-
GloriaV666@gmail.com
Créer mon blog