Eklablog Tous les blogs Top blogs Technologie & Science Tous les blogs Technologie & Science
Editer l'article Suivre ce blog Administration + Créer mon blog
MENU

Tutorial, CSS, HTML

 

2. Menú acordeón vertical 

<ul id="ulmenu1" class="ulmodule_menu"> <li id="module_menu143430540" class="module_menu module_menu_type_html" data-id="143430540"> <div id="module_menu_titre143430540" class="module_menu_titre">&nbsp;</div> <div id="module_menu_contenu143430540" class="module_menu_contenu"> <div class="module_menu_contenu_block"><ul class="list-menu"><li><a href="http://tutorialgloriav.eklablog.com/bienvenido-c26002526">Bienvenido</a></li><li><a href="http://tutorialgloriav.eklablog.com/color-rgb-hex-c26005604">Color RGB HEX</a></li> <li><a href="http://tutorialgloriav.eklablog.com/imagen-c26001612">Imagen</a><ul><li><a href="http://tutorialgloriav.eklablog.com/imagen-en-movimiento-c26005670">Imagen en movimiento</a></li><li><a href="http://tutorialgloriav.eklablog.com/imagen-efectos-c26001614">Efectos</a></li> </ul></li><li><a href="http://tutorialgloriav.eklablog.com/texto-c25997896">Texto</a> <ul><li><a href="http://tutorialgloriav.eklablog.com/texto-efectos-c26001412">Efectos</a></li></ul></li><li><a href="http://tutorialgloriav.eklablog.com/tutorial-html-css-c26010984">Tutorial HTML CSS</a>
<ul><li><a href="http://tutorialgloriav.eklablog.com/boton-c26019840">Bot&oacute;n</a></li> <li><a href="http://tutorialgloriav.eklablog.com/menu-c26017216">Men&uacute;</a></li> <li><a href="http://tutorialgloriav.eklablog.com/tutorial-html-css-mostrar-ocultar-spoiler-c26019754">Mostrar/Ocultar Spoiler</a></li> </ul></li><li><a href="http://tutorialgloriav.eklablog.com/ventanas-para-texto-codigo-imagen-c26022606">Ventanas-para texto,codigo imagen</a></li></ul></div></div></li></ul>
.list-menu{
padding:0;
list-style:none;
width:250px;
font-size:28px;
font-family: Edwardian Script ITC; 
border: 1px dotted rgba(0,0,0,0.8);
margin-top: -1px;
box-shadow: 0 5px 15px rgba(0,0,0,0.9);
   border-radius:10px;
}
.list-menu li a{
display: block;
border-bottom: 1px dotted #dee2ea;
 border-top: 1px solid #dee2ea;
border-radius:10px;
background:#afbbe7;
text-decoration:none;
color:rgb(0,0,0);
text-shadow: 0px 1px 1px #ffffff,1px 0px 2px#ffffff,2px 3px 3px #000000;
filter: dropshadow(color=#000, offx=1, offy=0);
padding:10px;
padding-left:10px;
} 

.list-menu li ul li a{
font-size:25px;
color:rgb(0,0,10);
text-shadow: 0px 1px 1px #ffffff,1px 0px 2px#ffffff,2px 3px 3px #000000,1px 3px 2px #B6B6B6;
}

.list-menu li a:hover{
background:#ebf1fc;
-moz-transition: background 0.3s ease-in;
-webkit-transition: background 0.3s ease-in;
-o-transition: background 0.3s ease-in;
border: solid 1px #92748c;  
}

.list-menu ul{
margin:0;
padding:0;
list-style:none;
height:0;
overflow: hidden;
transition:1s;
-moz-transition:1s;
-webkit-transition:1s;
}

.list-menu li ul{
transition:1s;
-moz-transition:1s;
-webkit-transition:1s;
}

.list-menu li:hover ul{
height: 120px;
overflow-y:auto;
overflow-x:hidden;
background:#dab7c4,0.5; 
}

.list-menu ul li a{
background:rgb(250,250,250);
}

.list-menu ul li a:hover {
    color: #dcdee9; 
-moz-transition: color 0.4s ease;
-webkit-transition: color 0.4s ease;
-o-transition: color 0.4s ease;
text-shadow: 0px 0px 2px rgba(0,0,0,0.7);
}
.menu{
padding:0;
list-style:none;
width:260px;
font-size:22px;
background:#e7ecf8;  
    border: 1px dotted #92748c;   
}

.menu li a{
display: block;
border-bottom: 1px solid rgba(0,0,0, 0.2);
    border-top: 1px solid #92748c;
    background:#ebf1fc;  
text-decoration:none;
color:#FFF;
text-shadow: 1px 0px 1px rgba(0,0,0,0.2);
filter: dropshadow(color=#000, offx=1, offy=0);
padding:10px;
padding-left:15px;
}

.menu li ul li a{
font-size:22px;
color:#47689d;
text-shadow: 0px 1px 1px #ffffff,1px 0px 2px#ffffff,2px 3px 3px #000000,1px 3px 2px #B6B6B6; 
}
Retour à l'accueil
Partager cet article
Repost0
Pour être informé des derniers articles, inscrivez vous :
Commenter cet article