-
Texto
<div id="f2_container" class="hover"> <div id="f2_card" class="shadow"> <div class="front face"> <img src="https://img-fotki.yandex.ru/get/4909/131165231.6a/0_dc80c_3093e75b_orig"width="195" height="210"/></div> <div class="back face center"> <p>Texto</p></div></div></div>
CSS
<style> #f2_container { position: relative; margin: 10px auto; width: auto; height: auto; z-index: 1; } #f2_container { -webkit-perspective: 1000; -moz-perspective: 1000; -o-perspective: 1000; -ms-perspective: 1000; perspective: 1000; } #f2_card { width: 50%; height: 35%; -webkit-transform-style: preserve-3d; -webkit-transition: all 1.0s linear; -moz-transform-style: preserve-3d; -moz-transition: all 1.0s linear; -o-transform-style: preserve-3d; -o-transition: all 1.0s linear; -ms-transform-style: preserve-3d; -ms-transition: all 1.0s linear; transform-style: preserve-3d; transition: all 1.0s linear; } #f2_container:hover #f2_card, #f2_container.hover_effect #f2_card { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); -ms-transform: rotateY(180deg); transform: rotateY(180deg); -webkit-box-shadow: -5px 5px 5px #aaa; -moz-box-shadow: -5px 5px 5px #aaa; box-shadow: -5px 5px 5px #aaa; } </style>
-
Texto 1
Texto 2
<div id="f3_container" class="hover"> <div id="f3_card" class="shadow"> <div class="front face"> <img src="https://img-fotki.yandex.ru/get/6438/131165231.36/0_aa92e_e58bda4a_orig" width="195" height="210"/> </div> <div class="back face center"> <p>Texto 1</p> <p>Texto 2</p> </div></div></div>
CSS
<style> #f3_container { position: relative; margin: 10px auto; width: auto; height: auto; z-index: 1; } #f3_container { -webkit-perspective: 1000; -moz-perspective: 1000; -o-perspective: 1000; -ms-perspective: 1000; perspective: 1000; } #f3_card { width: 50%; height: 40%; -webkit-transform-style: preserve-3d; -webkit-transition: all 1.0s linear; -moz-transform-style: preserve-3d; -moz-transition: all 1.0s linear; -o-transform-style: preserve-3d; -o-transition: all 1.0s linear; -ms-transform-style: preserve-3d; -ms-transition: all 1.0s linear; transform-style: preserve-3d; transition: all 1.0s linear; } #f3_container:hover #f3_card, #f3_container.hover_effect #f3_card { -webkit-transform: rotateZ(180deg); -moz-transform: rotateZ(180deg); -o-transform: rotateZ(180deg); -ms-transform: rotateZ(180deg); -webkit-box-shadow: -5px -5px 5px #aaa; -moz-box-shadow: -5px -5px 5px #aaa; box-shadow: -5px -5px 5px #aaa; } </style>
-
Texto 1
Texto 2
<div id="f1_container" class="hover"> <div id="f1_card" class="shadow"> <div class="front face"> <img style="margin-left: auto; border-radius: 2%; box-shadow: 1px 1px 6px 1px #666; display: block; margin-right: auto;" src="http://dentalcompany.es/Blog/wp-content/uploads/2015/05/5-Chaplin-baile-animado.gif" width="195" height="210"/> </div> <div class="back face center"> <p>Texto 1</p> <p>Texto 2</p></div></div></div>
CSS
#f1_container { position: relative; margin: 10px auto; width: 50%; height: 50%; perspective: 1000; -webkit-perspective: 400; background: ; } #f1_card { width: auto; height: auto; transform-style: preserve-3d; transition: all 1.0s ease-in-out; -webkit-transform-style: preserve-3d; -webkit-transition: all 1s ease-in-out; -webkit-transform-origin: right; } #f1_container:hover #f1_card { -webkit-transform: scaleX(-1); } #f1_card { width: 50%; height: 50%; border-radius:2%; border: 1px dotted #000; transform-style: preserve-3d; transition: all 1.0s ease-in-out; -webkit-transform-style: preserve-3d; -webkit-transition: all 1s ease-in-out; -webkit-transform-origin: right; } #f1_container:hover #f2_card { -webkit-transition-delay: 2s; -webkit-transform: scaleX(-1); } } .face { position: absolute; left: 100%; bottom: 100%; width: 50%; height: 50%; -webkit-backface-visibility: hidden; z-index: 3; } .face.back { -webkit-transform: scaleX(-1); } } .face2 { position: absolute; left: 100%; width: 50%; height: 50%; -webkit-backface-visibility: hidden; z-index: 0; } .face2.back2 { -webkit-transform: scaleX(1); }
-
Texto 1
Texto 2
<div id="f1_container" class="hover">
<div id="f1_card" class="shadow">
<div class="front face">
<img style="margin-left: auto; border-radius: 2%;
box-shadow: 1px 1px 6px 1px #666; display: block;
margin-right: auto;"
src="http://dentalcompany.es/Blog/wp-content/uploads/2015/05/5-Chaplin-baile-animado.gif"
width="195" height="210"/>
</div> <div class="back face center">
<p>Texto 1</p> <p>Texto 2</p></div></div></div>CSS
#f1_container {
position: relative;
margin: 10px auto;
width: 400px;
height: 400px;
perspective: 1000;
-webkit-perspective: 700; background: red;
} #f1_card {
width: 400px; height: 400px;
transform-style: preserve-3d;
transition: all 1.0s ease-in-out;
-webkit-transform-style: preserve-3d;
-webkit-transition: all 1s ease-in-out;
-webkit-transform-origin: right; }
#f1_container:hover
#f1_card {
-webkit-transform: rotateY(-180deg);
}
-
33. Menú horizontal 3 niveles
<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%; }
-
32. Menú vertical 4 niveles
<ul class="nav"> <li> <a href="#">Home<span class="flecha">▼</span></a> </li> <li> <a href="#">Servicios<span class="flecha">▼</span></a> <ul> <li><a href="#">Diseno grafico<span class="flecha">▼</span></a></li> <li> <a href="#">Diseno web<span class="flecha">▼</span></a> <ul> <li><a href="#">Submenu 1<span class="flecha">▼</span></a></li> <li><a href="#">Submenu 2<span class="flecha">▼</span></a></li> <li><a href="#">Submenu 3<span class="flecha">▼</span></a></li> <li><a href="#">Submenu 4<span class="flecha">▼</span></a></li> <li><a href="#">Submenu 5<span class="flecha">▼</span></a></li> </ul> </li> <li> <a href="#">Marketing<span class="flecha">▼</span></a> <ul> <li><a href="#">Submenu 1<span class="flecha">▼</span></a></li> <li><a href="#">Submenu 2<span class="flecha">▼</span></a></li> <li> <a href="#">Submenu 3<span class="flecha">▼</span></a> <ul> <li><a href="#">Submenu 1<span class="flecha">▼</span></a></li> <li><a href="#">Submenu 2<span class="flecha">▼</span></a></li> <li><a href="#">Submenu 3<span class="flecha">▼</span></a></li> <li><a href="#">Submenu 4<span class="flecha">▼</span></a></li> </ul> </li> </ul> </li> <li><a href="#">SEO<span class="flecha">▼</span></a></li> </ul> </li> <li> <a href="#">Acerca<span class="flecha">▼</span></a> <ul> <li><a href="#">Historia<span class="flecha">▼</span></a></li> <li><a href="#">Mision<span class="flecha">▼</span></a></li> <li><a href="#">Vision<span class="flecha">▼</span></a></li> </ul> </li> <li> <a href="#">Contacto<span class="flecha">▼</span></a> </li> </ul>
CSS
* { font-family:sans-serif; list-style:none; text-decoration:none; margin:0; padding:0; } .nav > li { float:left; } .nav li a { background:#0c9ba0; color:#FFF; display:block; border-radius: 10px; border: 4px double #fff; padding:10px 12px; } .nav li a:hover { background:#0fbfc6; } .nav li ul { display:none; position:absolute; min-width:140px; } .nav li:hover > ul { display:block; } .nav li ul li { position:relative; } .nav li ul li ul { right:-140px; top:0; } .nav li .flecha{ font-size: 9px; padding-left: 6px; display: none; } .nav li a:not(:last-child) .flecha { display: inline; }
-
31. Menú vertical 4 niveles(no me funciona)
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: .85rem;
color: #fff;
background-color: #94DFE2;
border-radius: 5px;
border: 1px dotted #ccc;
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(0, 0, 0, 0.5);
background: #E2F7F8;
}
.nav label { cursor: pointer; }
/**
* Styling first level lists items
*/
.group-list a, .group-list label {
padding-left: 2rem;
background: #92E3BE;
box-shadow: inset 0 -1px #373737;
}
.group-list a:focus, .group-list a:hover, .group-list label:focus, .group-list label:hover { background: #92B6E3; }
/**
* Styling second level list items
*/
.sub-group-list a, .sub-group-list label {
padding-left: 4rem;
background: #E8A6B3;
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: #ccc; }
/**
* Styling third level list items
*/
.sub-sub-group-list a, .sub-sub-group-list label {
padding-left: 6rem;
background: #fff;
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: #ccc; }
/**
* 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);
}
-
30. Menú vertical 1 nivel
Fuente: http://www.oloblogger.com/search/label/CSS
Sombra ara texto: http://www.oloblogger.com/2014/06/borde-texto-stroke-shadow.html
<div id="lateral"> <!-- caja: lateral --> <div class="mV"> <!-- caja: navegación vertical --> <ul class="menu"> <li><a href="#">Uno</a></li> <li><a class="activo" href="#" href="#">Dos mediano</a></li> <li><a href="#">Tres más largo</a></li> </ul> </div> </div>
CSS
.menu { list-style: none; /* Elimina decoración de listas */ float: left; font-size: 1.1em; } .menu li a:link, .menu li a:visited { text-decoration: none; /* Elimina decoración de links */ display: block; /* Convierte toda la línea en link */ color: #000000; /* Color de letra del ítem */ padding: 2px 10px; /* Relleno de items de menu */ border-radius: 5px; border: 1px dotted #000; } .menu li a.activo { color: #000; /* Color de letra del ítem activo */ background:#59FFFC; /* Color de fondo del ítem activo */ } .menu li a:hover { color: #ffffff; /* Color de letra al pasar el cursor */ background: #ADFAFF; /* Color de fondo al pasar el cursor */ box-shadow: 0px 3px 3px #111111; } .mV { /* Contenedor del menú vertical */ margin: 0 0 0 10px; } .mV li { margin: 4px 0; /* Separa ítems verticalmente */ background:-webkit-gradient(linear, 44% 100%, 46% 0%, from(#FFFFFF), to(#C8FFFF)) /* Fondo ítems */ }
-
29. Menú vertical 4 niveles!!!
<div id="info"> <div class="menuHolder"> <ul class="nav"> <li><a class="top-a" href="#url"><b>Home</b></a></li> <li><a class="top-a" href="#url"><b>Blogger</b></a> <div class="col3"> <ul class="colLeft"> <li><a href="#url">blogger widget</a></li> <li><a href="#url">blogger design</a></li> <li><a href="#url">blogger tips</a></li> <li><a href="#url">blogger seo</a></li> <li><a href="#url">blogger templates</a></li> </ul> <ul class="col"> <li><a href="#url">Related post</a></li> <li><a href="#url">Popular post</a></li> <li><a href="#url">Recent Post</a></li> <li><a href="#url">Chat widget</a></li> </ul> <ul class="colRight"> <li><a href="#url">navigation menu</a></li> <li><a href="#url">Side menu</a></li> <li><a href="#url">Horizontal menu</a></li> <li><a href="#url">Vertical menu</a></li> </ul> </div> </li> <li><a class="top-a" href="#url"><b>Website SEO </b></a> <div class="col2"> <ul class="colLeft"> <li><a href="#url">Header</a></li> <li><a href="#url">Footer</a></li> <li><a href="#url">Post</a></li> <li><a href="#url">Links</a></li> <li><a href="#url">Menu</a></li> </ul> <ul class="colRight"> <li><a href="#url">Mobile </a></li> <li><a href="#url">Mobile traffic</a></li> <li><a href="#url">Mobile seo</a></li> <li><a href="#url">small screen</a></li> </ul> </div> </li> <li><a class="top-a" href="#url"><b>Contact</b></a> <div class="col1"> <ul class="colSingle"> <li><a href="#url">Email ID</a></li> <li><a href="#url">Mobile No.</a></li> <li><a href="#url">Contact Form</a></li> <li><a href="#url">My email</a></li> </ul> </div> </li> <li><a class="top-a" href="#url"><b>Privacy</b></a></li> <li><a class="top-a" href="#url"><b>Benefits</b></a> <div class="col2 left"> <ul class="colLeft"> <li><a href="#url">Google traffic</a></li> <li><a href="#url">Permanent Links</a></li> <li><a href="#url">Alexa Rank</a></li> <li><a href="#url">High page rank</a></li> </ul> <ul class="colRight"> <li><a href="#url">Snow Hotel</a></li> <li><a href="#url">The Snowman</a></li> <li><a href="#url">Ice Cavern</a></li> <li><a href="#url">Ski Inn</a></li> </ul> </div> </li> </ul> </div> <br /><br /><br /><br /><br /><br /><br /><br /> </div>
CSS cambiar posición
.menuHolder {margin:25px 0 100px 0;
text-align:center;
position: relative;
z-index: 597;
float: left;
position: absolute;
top: 135px;
left: 100px;
background:#069;
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
background-image: -webkit-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, 255, 0));
background-image: linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
border-radius:8px; box-shadow:0 15px 10px -8px rgba(0,0,0,0.4);
-moz-perspective: 100px;
-webkit-perspective: 100px;
-o-perspective: 100px;
perspective: 100px;CSS
.menuHolder {margin:25px 0 100px 0; text-align:center; position:relative; height:40px; z-index:20; background:#069; background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0)); background-image: -webkit-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, 255, 0)); background-image: linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); border-radius:8px; box-shadow:0 15px 10px -8px rgba(0,0,0,0.4); -moz-perspective: 100px; -webkit-perspective: 100px; -o-perspective: 100px; perspective: 100px; } .menuHolder ul.nav li {display:inline-block; display:inline;} .menuHolder ul.nav {padding:0; margin:0; list-style:none; display:inline-block; -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; } .menuHolder ul.nav li {float:left; display:block; padding:0 4px;} .menuHolder ul.nav > li {-moz-transform-style: preserve-3d;-webkit-transform-style: preserve-3d;} .menuHolder ul.nav li a.top-a {display:block; text-decoration:none; margin-top:4px; float:left; height:36px;} .menuHolder ul.nav li a.top-a b {display:block; padding:0 20px; font:normal 14px/30px arial, sans-serif; color:#fff;} .menuHolder ul.nav li:hover a.top-a {background:#09c; border-radius:8px 8px 0 0; -moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); -webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); -o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); } .menuHolder ul.nav div {position:absolute; top:40px; left:4px; background:#09c; padding:5px 0 10px 0; border-radius:0 0 15px 15px; box-shadow:0 15px 10px -8px rgba(0,0,0,0.4); -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; -moz-transform-origin: 0px 0px; -moz-transform: rotateX(-90deg); -webkit-transform-origin: 0px 0px; -webkit-transform: rotateX(-90deg); -o-transform-origin: 0px 0px; -o-transform: rotateX(-90deg); transform-origin: 0px 0px; transform: rotateX(-90deg); -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .menuHolder ul.nav div.left {left:auto; right:4px;} .menuHolder ul.nav div ul {padding:10px 0; list-style:none; width:140px; margin:10px 5px 0 5px; float:left; display:inline; text-align:left; background:#fff; border-radius:6px; -moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); -webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); -o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); } .menuHolder ul.nav div ul.colLeft {margin-left:10px;} .menuHolder ul.nav div ul.colRight {margin-right:10px;} .menuHolder ul.nav div ul.colSingle {margin-left:10px; margin-right:10px;} .menuHolder ul.nav div ul li {float:left; border-bottom:1px dotted #09c; margin:0 5px 0 5px; display:inline;} .menuHolder ul.nav div ul li:last-child {border:0;} .menuHolder ul.nav div ul li a {display:block; width:105px; text-decoration:none; font:13px/16px arial, sans-serif; color:#069; margin:0; padding:4px 0 4px 15px; background:transparent url(droplistcolumns/arrow.gif) no-repeat left center;} .menuHolder ul.nav div ul li a:hover {color:#09c; background:transparent url(droplistcolumns/arrow.gif) no-repeat 1px center;} .menuHolder ul.nav div.col1 {width:160px;} .menuHolder ul.nav div.col2 {width:310px;} .menuHolder ul.nav div.col3 {width:460px;} .menuHolder ul.nav li:hover div { -moz-transform: rotateX(0deg); -webkit-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); }
-
28. Menú vertical 4 niveles
<ul class="nav__list"> <li><a href="#">Bienvenido</a></li> <li><input id="group-1" type="checkbox" /> <label for="group-1"><span class="fa fa-angle-right"> </span> Bienvenido</label> <ul class="group-list"> <li><a href="#">1st level item</a></li> <li><input id="sub-group-1" type="checkbox" /> <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" /> <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" /> <label for="group-2"><span class="fa fa-angle-right"> </span> Amor</label> <ul class="group-list"> <li><a href="#">Flash</a></li> <li><a href="#">1st level item</a></li> <li><input id="sub-group-2" type="checkbox" /> <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" /> <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" /> <label for="group-3"><span class="fa fa-angle-right"> </span> First level</label> <ul class="group-list"> <li><a href="#">1st level item</a></li> <li><a href="#">1st level item</a></li> <li><input id="sub-group-3" type="checkbox" /> <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" /> <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" /> <label for="group-4"><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-4" type="checkbox" /> <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>
CSS
<style><!-- .nav a, .nav label { display: block; padding: .85rem; color: #000; background-color: #fff; 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(196, 202, 229, 0.5); } .nav label { cursor: pointer; } /** * Styling first level lists items */ .group-list a, .group-list label { padding: 2px 7px 2px 2px; font-size: 17px; font-family: Old English Text MT; text-shadow: #606060 -2px -2px 4px;#939593 1px 1px 2px;#565856 1px 2px 3px; background: #C6E4E6; border-radius: 5px; width:120px; height: 63px; border: 1px dotted #ccc; box-shadow: inset 0 -1px #373737; } .group-list a:focus, .group-list a:hover, .group-list label:focus, .group-list label:hover { background: #E6C6DC; } /** * Styling second level list items */ .sub-group-list a, .sub-group-list label { padding-left: 1rem; font-size: 17px; font-family: Old English Text MT; text-shadow: #606060 -2px -2px 4px;#939593 1px 1px 2px;#565856 1px 2px 3px; background:linear-gradient(45deg, #D8C6E6 30%,#ffffff 50%,#C6E4E6 70%); border-radius: 5px; width:120px; height: 63px; 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: #C6CCE6; } /** * Styling third level list items */ .sub-sub-group-list a, .sub-sub-group-list label { padding-left: 1rem; background: #E6E0C6; 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: #D4E6C6; } /** * 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); } --></style>
-
27. Menú horizontal 4 niveles
<ul class="nav"> <li><a href="">Home</a></li> <li><a href="">Servicios</a> <ul> <li><a href="">Diseno grafico</a></li> <li><a href="">Diseno web</a> <ul> <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 href="">Marketing</a> <ul> <li><a href="">Submenu 1</a></li> <li><a href="">Submenu 2</a></li> <li><a href="">Submenu 3</a> <ul> <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> </ul> </li> </ul> </li> <li><a href="">SEO</a></li> </ul> </li> <li><a href="">Acerca</a> <ul> <li><a href="">Historia</a></li> <li><a href="">Mision</a></li> <li><a href="">Vision</a></li> </ul> </li> <li><a href="">Contacto</a></li> </ul>
CSS
* { font-family:sans-serif; list-style:none; text-decoration:none; margin:0; padding:0; -webkit-transition: all .35s ease-in; transition: all .35s ease-in; } .nav > li { float:left; } .nav li a { background:#0c9ba0; color:#FFF; display:block; border-radius: 10px; border: 4px double #fff; padding:10px 12px; } .nav li a:hover { background:#0fbfc6; } .nav li ul { display:none; position:absolute; min-width:140px; } .nav li:hover > ul { display:block; } .nav li ul li { position:relative; } .nav li ul li ul { right:-140px; top:0; }
-
26. Menú horizontal 1 nivel
<div id='menu'> <ul> <li><a href='#'>Pestaña 1</a></li> <li><a href='#'>Pestaña 2</a></li> <li><a href='#'>Pestaña 3</a></li> <li><a href='#'>Pestaña 4</a></li> <li><a href='#'>Pestaña 5</a></li> <li><a href='#'>Pestaña 6</a></li> </ul> </div>
CSS
/* Menú envolvente---- */ #menu:after, #menu:before { content: ''; position: absolute; } #menu { height:20px; /* Alto del menú */ text-align: center; position: relative; margin: 0 -30px 5px -30px; padding: 10px 0; background: #3A819D; /* Color del menú */ background-image: -moz-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0)); background-image: -webkit-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0)); background-image: -o-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0)); background-image: -ms-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0)); background-image: linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0)); -moz-box-shadow: 0 2px 0 #bbb; -webkit-box-shadow: 0 2px #bbb; } #menu:before, #menu:after { border-style: solid; border-color: transparent; bottom: -10px; } #menu:before { border-width: 0 20px 10px 0; border-right-color: #234B5B; /* Color de la sombra del doblez */ left: 0; } #menu:after { border-width: 0 0 10px 20px; border-left-color: #234B5B; /* Color de la sombra del doblez */ right: 0; } #menu ul { margin-top: 0px; } #menu li { list-style: none; display: inline; padding-right:20px; } #menu li a { text-shadow: 0 2px 1px rgba(0,0,0,0.5); display: inline; text-decoration: none; color: #ffffff; /* Color del texto */ font-size: 14px; /* Tamaño del texto */ transition:all .1s linear; -o-transition:all .1s linear; -moz-transition:all .1s linear; -webkit-transition:all .1s linear; } #menu li a:hover { font-size:16px; /* Tamaño del texto al pasar el cursor */ transition:all .1s linear; -o-transition:all .1s linear; -moz-transition:all .1s linear; -webkit-transition:all .1s linear;}
-
24. Menú horizontal 3 niveles!!!
http://campamentoweb.blogspot.com.es/2014/01/menu-horizontal-desplegable-solo-con-css.html#.V4ZPKdSLSig
<div id='cssmenu'> <ul> <li class='active'><a href='index.html'><span>Home</span></a></li> <li class='has-sub'><a href='#'><span>Products</span></a> <ul> <li class='has-sub'><a href='#'><span>Product 1</span></a> <ul> <li><a href='#'><span>Sub Item</span></a></li> <li class='last'><a href='#'><span>Sub Item</span></a></li> </ul> </li> <li class='has-sub'><a href='#'><span>Product 2</span></a> <ul> <li><a href='#'><span>Sub Item</span></a></li> <li class='last'><a href='#'><span>Sub Item</span></a></li> </ul> </li> </ul> </li> <li><a href='#'><span>About</span></a></li> <li class='last'><a href='#'><span>Contact</span></a></li> </ul> </div>
Cambiar CSS
#cssmenu > ul {
position: relative;
z-index: 597;
float: left;
position: absolute;
top: 235px;
left: 100px;
background-image: linear-gradient(135deg, rgba(154,142,193,1) 0%, rgba(154,142,193,0.96) 10%, rgba(174,164,205,0.92) 20%, rgba(242,242,242,0.87) 35%, rgba(242,242,242,0.75) 65%, rgba(174,164,205,0.7) 80%, rgba(154,142,193,0.66) 90%, rgba(154,142,193,0.62) 100%);CSS
/* Base Styles */ #cssmenu > ul, #cssmenu > ul li, #cssmenu > ul ul { list-style: none; margin: 0; padding: 0; } #cssmenu > ul { position: relative; z-index: 597; float: left; } #cssmenu > ul li { float: left; min-height: 1px; line-height: 1.3em; vertical-align: middle; padding: 10px; } #cssmenu > ul li.hover, #cssmenu > ul li:hover { z-index: 599; cursor: default; } #cssmenu > ul ul { visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; } #cssmenu > ul ul li { float: none; } #cssmenu > ul li:hover > ul { visibility: visible; } /* Align last drop down RTL */ /* Theme Styles */ #cssmenu > ul a:link { text-decoration: none; } #cssmenu > ul a:active { color: #ffa500; } #cssmenu li { padding: 0; color: #000; } #cssmenu { font-family: 'Lato', sans-serif; width: auto; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; background: #1b9bff; font-size: 13px; -moz-box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.3); -webkit-box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.3); box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.3); } #cssmenu > ul { padding: 0 5px; -moz-box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.3); -webkit-box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.3); box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.3); -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; display: block; float: none; zoom: 1; } #cssmenu > ul:before { content: ''; display: block; } #cssmenu > ul:after { content: ''; display: table; clear: both; } #cssmenu > ul > li { padding: 8px 5px; } #cssmenu > ul > li > a, #cssmenu > ul > li > a:link, #cssmenu > ul > li > a:visited { text-shadow: 0 -1px 1px #004881; color: #fff; padding: 7px 20px; display: block; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; } #cssmenu > ul > li > a:hover, #cssmenu > ul > li:hover > a { background-color: #0082e7; } #cssmenu li li a { color: #8b8b8b; font-size: 13px; } #cssmenu li li a:hover { color: #5c5c5c; border-color: #5c5c5c; } #cssmenu ul ul { margin: 0 10px; padding: 0 10px; float: none; background: #efefef; border: 2px solid #1b9bff; border-top: none; right: 0; left: 0; -webkit-border-radius: 0 0 3px 3px; -moz-border-radius: 0 0 3px 3px; -ms-border-radius: 0 0 3px 3px; -o-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px; -moz-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2); } #cssmenu ul > li > ul > li { margin: 0 10px 0 0; position: relative; padding: 0; float: left; } #cssmenu ul > li > ul > li > a { padding: 10px 20px 10px 10px; display: block; } #cssmenu ul > li > ul > li.has-sub > a:before { content: ''; position: absolute; top: 18px; right: 6px; border: 5px solid transparent; border-top: 5px solid #8b8b8b; } #cssmenu ul > li > ul > li.has-sub > a:hover:before { border-top: 5px solid #5c5c5c; } #cssmenu ul ul ul { width: 200px; top: 100%; border: 2px solid #1b9bff; } #cssmenu ul ul ul li { float: none; }
-
23. Menú horizontal 2 niveles
Fuente: http://codepen.io/waddington/pen/fBicd
a. http://codepen.io/waddington/pen/mloCb
Se instala donde esta el código
Para cambiar posición :
.wrapper {
margin:0 auto;
width:804px;
position: absolute;
top: 35px;
left: 50px;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
-o-transform-style:preserve-3d;
transform-style:preserve-3d;
-webkit-perspective:300px;
-ms-perspective:300px;
perspective:300px;
}<ul class="wrapper"> <li class="list"><a class="non" href="#">Item</a></li> <li class="list"><a class="non" href="#">Item</a></li> <li class="wSub"><a class="front"> Hover </a> <ul class="bottom"> <li><a href="#">Sub Item</a></li> <li><a href="#">Sub Item</a></li> <li><a href="#">Sub Item</a></li> </ul> </li><li class="wSub"><a class="front"> Hover </a> <ul class="bottom"> <li><a href="#">Sub Item</a></li> <li><a href="#">Sub Item</a></li> <li><a href="#">Sub Item</a></li> </ul> </li><li class="wSub"><a class="front"> Hover </a> <ul class="bottom"> <li><a href="#">Sub Item</a></li> <li><a href="#">Sub Item</a></li> <li><a href="#">Sub Item</a></li> </ul> </li><li class="wSub"><a class="front"> Hover </a> <ul class="bottom"> <li><a href="#">Sub Item</a></li> <li><a href="#">Sub Item</a></li> <li><a href="#">Sub Item</a></li> </ul> </li> <li class="list"><a class="non" href="#">Item</a></li> </ul>
CSS
body { padding:0; background-image:url(http://www.cool-backgrounds.org/wallpapers/simple_clouds_background-1920x1080.jpg); background-position:center left; background-attachment:fixed; justify-content: center; align-items: center; font-family: 'Open Sans', sans-serif; color:#1d1d1d; } ul, li { padding:0; margin:0; list-style-type:none; } .wrapper { margin:0 auto; width:804px; padding: 110px 11px 10px 12px; -webkit-transform-style:preserve-3d; -moz-transform-style:preserve-3d; -ms-transform-style:preserve-3d; -o-transform-style:preserve-3d; transform-style:preserve-3d; -webkit-perspective:300px; -ms-perspective:300px; perspective:300px; } .front, .non { height:30px; width:100px; line-height:30px; border-radius: 5px; border: 1px solid #fff; text-align: center; background-image:-webkit-linear-gradient(top, #ff7000 70%, #ff560f 100%); background-image:linear-gradient(to bottom, #ff7000 70%, #ff560f 100%); display:block; } .bottom { background-image:-webkit-linear-gradient(top,#ff7000,#ff560f 40px); background-image:linear-gradient(to bottom, #ff7000,#ff560f 40px); } .bottom li:hover { background-image:-webkit-linear-gradient(top, #ff8931 , #ff5012); background-image:linear-gradient(to bottom, #ff8931 , #ff5012); } .bottom li:first-of-type { border-radius: 5px; border: 1px solid #fff; } .non:hover, .front:hover { background-image:-webkit-linear-gradient(top, #ff8931 , #ff5012); background-image:linear-gradient(to bottom, #ff8931 , #ff5012); } .wSub, .list { height:30px; -webkit-transform-origin: center center -20px; -moz-transform-origin: center center -20px; -ms-transform-origin: center center -20px; -o-transform-origin: center center -20px; transform-origin: center center -20px; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition:all 500ms ease-in-out 300ms; -moz-transition:all 500ms ease-in-out 300ms; -ms-transition:all 500ms ease-in-out 300ms; -o-transition:all 500ms ease-in-out 300ms; transition:all 500ms ease-in-out 300ms; display:block; cursor:pointer; float:left; } .bottom { height:120px; border-radius:0 0 5px 5px; -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-transform:rotateX(-90deg); -moz-transform:rotateX(-90deg); -ms-transform:rotateX(-90deg); -o-transform:rotateX(-90deg); transform:rotateX(-90deg); border-top:none; text-align:center; line-height:40px; } a { text-decoration:none; color:inherit; } .bottom li:last-of-type, .bottom li:last-of-type a { border-radius:0 0 5px 5px; } .wSub:hover { -webkit-transform:rotateX(90deg); -moz-transform:rotateX(90deg); -ms-transform:rotateX(90deg); -o-transform:rotateX(90deg); transform:rotateX(90deg); -webkit-transition:all 500ms ease-in-out; -moz-transition:all 500ms ease-in-out; -ms-transition:all 500ms ease-in-out; -o-transition:all 500ms ease-in-out; transition:all 500ms ease-in-out; } .list:first-of-type .non { border-radius:5px 0 0 5px; } .list:last-of-type .non { border-radius:0 5px 5px 0; } .list, .front { border-radius:5px; border-right:1px solid #ccc; border-left:1px solid #ccc; } .list:last-of-type { border:none; } }
-
22. Menú horizontal 3 niveles
<ul class="nav"> <li><a href="">Home</a></li> <li><a href="">Servicios</a> <ul> <li><a href="">Diseno grafico</a></li> <li><a href="">Diseno web</a> <ul> <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 href="">Marketing</a> <ul> <li><a href="">Submenu 1</a></li> <li><a href="">Submenu 2</a></li> <li><a href="">Submenu 3</a> <ul> <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> </ul> </li> </ul> </li> <li><a href="">SEO</a></li> </ul> </li> <li><a href="">Acerca</a> <ul> <li><a href="">Historia</a></li> <li><a href="">Mision</a></li> <li><a href="">Vision</a></li> </ul> </li> <li><a href="">Contacto</a></li> </ul>
CSS
* { font-family:sans-serif; list-style:none; text-decoration:none; margin:0; padding:0; } .nav > li { float:left; } .nav li a { background:#0c9ba0; color:#FFF; display:block; border-radius: 10px; border: 4px double #fff; padding:10px 12px; } .nav li a:hover { background:#0fbfc6; } .nav li ul { display:none; position:absolute; min-width:140px; } .nav li:hover > ul { display:block; } .nav li ul li { position:relative; } .nav li ul li ul { right:-140px; top:0; }
-
21. Menú vertical
En Eklablog no funciona
<nav> <div id="logo">Your Logo here</div> <label for="drop" class="toggle">Menu</label> <input type="checkbox" id="drop" /> <ul class="menu"> <li><a href="#">Home</a></li> <li> <!-- First Tier Drop Down --> <label for="drop-1" class="toggle">Service +</label> <a href="#">Service</a> <input type="checkbox" id="drop-1"/> <ul> <li><a href="#">Service 1</a></li> <li><a href="#">Service 2</a></li> <li><a href="#">Service 3</a></li> </ul> </li> <li> <!-- First Tier Drop Down --> <label for="drop-2" class="toggle">Portfolio +</label> <a href="#">Portfolio</a> <input type="checkbox" id="drop-2"/> <ul> <li><a href="#">Portfolio 1</a></li> <li><a href="#">Portfolio 2</a></li> <li> <!-- Second Tier Drop Down --> <label for="drop-3" class="toggle">Works +</label> <a href="#">Works</a> <input type="checkbox" id="drop-3"/> <ul> <li><a href="#">HTML/CSS</a></li> <li><a href="#">jQuery</a></li> <li><a href="#">Python</a></li> </ul> </li> </ul> </li> <li><a href="#">Blog</a></li> <li><a href="#">Submit</a></li> <li><a href="#">Contact</a></li> <li><a href="#">About</a></li> </ul> </nav>
CSS
nav { margin: 0; padding: 0; background-color: #FEBFDC; border-radius: 5px; border: 1px dotted #ccc; box-shadow: inset 0 -1px #373737; } #logo { display: block; padding: 0 30px; float: left; font-size: 20px; line-height: 60px; } nav:after { content: ""; display: table; clear: both; } nav ul { float: right; padding: 0; margin: 0; list-style: none; position: relative; } nav ul li { margin: 0px; display: inline-block; float: left; background-color: #FE80B9; border-radius: 5px; border: 1px dotted #ccc; box-shadow: inset 0 -1px #373737; } nav a { display: block; padding: 0 20px; color: #FFF; font-size: 20px; line-height: 60px; text-decoration: none; } nav ul li ul li:hover { background: #C4C2FF; } nav a:hover { background-color: #C4C2FF; } nav ul ul { display: none; position: absolute; top: 60px; } nav ul li:hover > ul { display: inherit; } nav ul ul li { width: 170px; float: none; display: list-item; position: relative; } nav ul ul ul li { position: relative; top: -60px; left: 170px; } li > a:after { content: ' +'; } @media all and (max-width : 768px) { #logo { display: block; padding: 0; width: 100%; text-align: center; float: none; } nav { margin: 0; } .toggle + a, .menu { display: none; } .toggle { display: block; background-color: #F2C2FF; padding: 0 20px; color: #FFF; font-size: 20px; line-height: 60px; text-decoration: none; border: none; } .toggle:hover { background-color: #C4C2FF; } [id^=drop]:checked + ul { display: block; } nav ul li { display: block; width: 100%; } nav ul ul .toggle, nav ul ul a { padding: 0 40px; } nav ul ul ul a { padding: 0 80px; } nav a:hover, nav ul ul ul a { background-color: #F2C2FF; } nav ul li ul li .toggle, nav ul ul a { background-color: #C2EEFF; } nav ul ul { float: none; position: static; color: #ffffff; } nav ul ul li:hover > ul, nav ul li:hover > ul { display: none; } nav ul ul li { display: block; width: 100%; } nav ul ul ul li { position: static; } } @media all and (max-width : 330px) { nav ul li { display: block; width: 94%; } }
-
20. Menú vertical 3 niveles (no me funciona bien)
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: .85rem; color: #000; background-color: #fff; 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: #030303; } .nav label { cursor: pointer; } /** * Styling first level lists items */ .group-list a, .group-list label { padding-left: 2rem; background: #252525; box-shadow: inset 0 -1px #373737; } .group-list a:focus, .group-list a:hover, .group-list label:focus, .group-list label:hover { background: #131313; } /** * Styling second level list items */ .sub-group-list a, .sub-group-list label { padding-left: 4rem; background: #353535; 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: #232323; } /** * Styling third level list items */ .sub-sub-group-list a, .sub-sub-group-list label { padding-left: 6rem; background: #454545; 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); }
-
19. Menú horizontal 2 niveles
<div id="subnavbar"> <ul id="subnav"> <li><a href="#" title="Inicio">Inicio</a> </li> <li><a href="#" title="Texto">Menu 1 </a> <ul> <li><a href="#" title="Texto">Submenu 1-1</a> </li> <li><a href="#" title="Texto">Submenu 1-2</a> </li> <li><a href="#" title="Texto">Submenu 1-3</a> </li> </ul> </li> <li><a href="#" title="Texto">Menu 2</a> <ul> <li><a href="#" title="Texto">Submenu2-1</a> </li> <li><a href="#" title="Texto">Submenu 2-2</a> </li> <li><a href="#" title="Texto">Submenu 2-3</a> </li> </ul> </li> <li><a href="#" title="Texto">Menu 3</a> <ul> <li><a href="#" title="Texto">Submenu 3-1</a> </li> <li><a href="#" title="Texto">Submenu 3-2</a> </li> </ul> </li> <li><a href="#" title="Texto">Menu 4</a> <ul> <li><a href="#" title="Texto">Submenu 4-1</a> </li> <li><a href="#" title="Texto">Submenu 4-2</a> </li> </ul> </li> <li><a href="#" title="Texto">Menu 5</a> <ul> <li =><a href="#" title="Texto">Submenu 5-1</a> </li> <li><a href="#" title="Texto">Submenu 5-2</a> </li> <li><a href="#" title="Texto">Submenu 5-3</a> </li> <li><a href="#" title="Texto">Submenu 5-4</a> </li> </ul> <li><a href="#" title="Texto">Contacto</a> </li> </li></ul></div>
CSS
#subnavbar { width: 540px; height: 33px; font-weight:bold; color: #000; margin: 5px; padding: 5px; font-family:"Trebuchet MS"; background: #F1D7FF; border-radius: 5px; border: 4px double #3C005A; } #subnav { margin: 0px; padding: 0px; } #subnav ul { float: left; list-style: none; margin: 0px; padding: 0px; } #subnav li { list-style: none; margin: 0px; padding: 0px; } #subnav li a, #subnav li a:link, #subnav li a:visited { color: #000; display: block; font-size: 16px; margin: 0px 0px 0px 0px; padding: 5px 10px 5px 10px; border-radius: 5px; border: 1px dotted #3C005A; } #subnav li a:hover, #subnav li a:active { background: #DDD7E0; color: #fff; display: block; text-decoration: none; margin: 0px 0px 0px 0px; padding: 5px 10px 5px 10px; } #subnav li li a, #subnav li li a:link, #subnav li li a:visited { background-color: rgba(186, 169, 207, 0.6); background: rgba(186, 169, 207, 0.6); color: rgba(186, 169, 207, 0.6); color: #000; width: 120px; heigth: 20px float: none; margin: 0px; padding: 5px 10px 5px 10px; border-bottom: 1px solid #FFFFFF; border-left: 1px solid #FFFFFF; border-right: 1px solid #FFFFFF; } #subnav li li a:hover, #subnav li li a:active { background-color: rgba(221, 195, 233, 0.9); background: rgba(221, 195, 233, 0.9); color: rgba(221, 195, 233, 0.9); color: #fff; margin: 0px; padding: 5px 10px 5px 10px; } #subnav li { float: left; padding: 0px; } #subnav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 160px; margin: 0px; padding: 0px; } #subnav li li { } #subnav li ul a { width: 140px; } #subnav li ul a:hover, #subnav li ul a:active { } #subnav li ul ul { margin: -25px 0 0 161px; } #subnav li:hover ul ul, #subnav li:hover ul ul ul, #subnav li.sfhover ul ul, #subnav li.sfhover ul ul ul { left: -999em; } #subnav li:hover ul, #subnav li li:hover ul, #subnav li li li:hover ul, #subnav li.sfhover ul, #subnav li li.sfhover ul, #subnav li li li.sfhover ul { left: auto; } #subnav li:hover, #subnav li.sfhover { position: static; }
-
18. Menú horizontal 2 niveles
<ul id="navbar"> <!--Lista que define los elementos principales que se muestran siempre--> <li><a href="http://aprenderaprogramar.com">Libros</a> <!--Item principal de menú--> <ul> <!--Lista que define subitems de menú que se mostrarán sólo al posicionar el ratón sobre el item principal--> <li><a href="http://aprenderaprogramar.com">Aprender a programar desde cero</a></li> <!--SubItem de menú--> <li><a href="http://aprenderaprogramar.com">Creación y administración web con Joomla</a></li> <!--SubItem de menú--> <li><a href="http://aprenderaprogramar.com">Lenguaje de programación Java</a></li> <!--SubItem de menú--> </ul> </li> <li><a href="http://aprenderaprogramar.com">Divulgación</a> <!--Item principal de menú--> <ul> <!--Lista que define subitems de menú que se mostrarán sólo al posicionar el ratón sobre el item principal--> <li><a href="http://aprenderaprogramar.com">Los 100 trucos de CSS</a></li> <!--SubItem de menú--> </ul> </li> <li><a href="http://aprenderaprogramar.com">Preguntas frecuentes</a></li><!--Item principal de menú--> <li><a href="http://aprenderaprogramar.com">Humor</a> <!--Item principal de menú--> <ul> <!--Lista que define subitems de menú que se mostrarán sólo al posicionar el ratón sobre el item principal--> <li><a href="http://aprenderaprogramar.com">Humor informático</a></li> <!--SubItem de menú--> <li><a href="http://aprenderaprogramar.com">Humor bases de datos</a></li> <!--SubItem de menú--> <li><a href="http://aprenderaprogramar.com">Humor programación</a></li> <!--SubItem de menú--> <li><a href="http://aprenderaprogramar.com">Humor universidad</a></li> <!--SubItem de menú--> </ul> </li> </ul>
CSS
/* Curso CSS estilos aprenderaprogramar.com*/ body {font: 92.5%/1.9 Arial, Helvetica, sans-serif;background-color: #eee; } h2 {margin:0;} /*Caja contenedora*/ #wrap { font-size: 1.8em; width: 520px; padding: 30px; margin: 0 auto; /*Da lugar al centrado de la caja en el elemento superior body*/ background-color: #fff;} /* Estilos que crean el menú desplegable */ /*Eliminamos padding y margin que introducen navegadores por defecto en listas*/ #navbar { padding:0; margin:0; } /*Elementos items principales de menú que se muestran siempre*/ #navbar li { list-style: none; float: left; margin:10px;} #navbar li a { display: block; /* Usamos display block para poder aplicar propiedades de caja a links */ padding: 3px 8px; background-color: #5e8ce9; color: #fff; border-radius: 10px; border: 4px double #fff; text-decoration: none; } /*Listas de subitems de menú*/ #navbar li ul { display: none; /*La lista inicialmente no se muestra debido a display:none; */ background-color: #69f; border-radius: 5px; border: 1px dotted #fff;} #navbar li:hover ul { font-size: 18px; display: block; /*Al situar el cursor sobre el item la lista de subitems pasa de display none a display block y se muestra*/ position: absolute; /*Al desplegarse el submenú no ocupa espacio y no desplaza a otros elementos gracias a que establecemos position absolute*/ margin: 0; padding: 0; /*Anulamos margin y padding que por defecto introducen navegadores*/ } #navbar li:hover li { float: none; } /*Anulamos el float left que define el elemento padre para que los subitems se muestren en vertical */ /*Creamos la apariencia de los subitems de menú, color de fondo, borde inferior, color de texto*/ #navbar li:hover li a { background-color: #69f; border-bottom: 1px solid #fff; color: #000; } /*Creamos el efecto de cambio de color y aspecto cuando ponemos el puntero del ratón sobre un subitem de menú*/ #navbar li li a:hover { background-color: #8db3ff; } .limpiador{padding:0; border-style:none; clear:both; } /*Forzamos a la caja a mostrarse aún conteniendo elementos flotantes*/