• Par GloriaV dans Menu le 23 Février 2015 à 11:41
     

    6. Menú con imagen

     

    <html>   <head>     <title>Ejemplo</title>     <link rel="stylesheet" href="estilo.css" type="text/css" />   </head>   <body>     <div id="izquierda">       <ul id="menu">         <li><a href="#"><img src="img/1.jpg" alt="#" title="#" /></a></li>         <li><a href="#"><img src="img/2.jpg" alt="#" title="#" /></a></li>         <li><a href="#"><img src="img/3.jpg" alt="#" title="#" /></a></li>         <li><a href="#"><img src="img/4.jpg" alt="#" title="#" /></a></li>         <li><a href="#"><img src="img/5.jpg" alt="#" title="#" /></a></li>         <li><a href="#"><img src="img/6.jpg" alt="#" title="#" /></a></li>         <li><a href="#"><img src="img/7.jpg" alt="#" title="#" /></a></li>      </ul>    </div>     <div class="derecha">       <ul id="menu2">         <li><a href="#"><img src="img/21.jpg" alt="#" title="#" /></a></li>         <li><a href="#"><img src="img/22.jpg" alt="#" title="#" /></a></li>         <li><a href="#"><img src="img/23.jpg" alt="#" title="#" /></a></li>         <li><a href="#"><img src="img/24.jpg" alt="#" title="#" /></a></li>         <li><a href="#"><img src="img/25.jpg" alt="#" title="#" /></a></li>         <li><a href="#"><img src="img/26.jpg" alt="#" title="#" /></a></li>         <li><a href="#"><img src="img/27.jpg" alt="#" title="#" /></a></li>       </ul>     </div>     <div class="derecha">       <ul id="galeria">         <li><img src="img/31.jpg" alt="#" title="#" /></li>         <li><img src="img/32.jpg" alt="#" title="#" /></li>         <li><img src="img/33.jpg" alt="#" title="#" /></li>         <li><img src="img/34.jpg" alt="#" title="#" /></li>         <li><img src="img/35.jpg" alt="#" title="#" /></li>         <li><img src="img/36.jpg" alt="#" title="#" /></li>         <li><img src="img/37.jpg" alt="#" title="#" /></li>       </ul> </div> </body></html>
    /* CAPAS CONTENEDORAS */ #izquierda { 
    width: 170px; 
    float: left; 
    } 
    .derecha { 
    width: 750px; 
    float: left; 
    } 
    /* ELEMENTOS DEL MENU LATERAL */ #menu { 
    padding:0; 
    margin:0 auto; 
    list-style-type:none; 
    width:160px; 
    height:312px; 
    }
    #menu li a { 
    height:30px; 
    width:160px; 
    float:left; 
    border-bottom:2px solid #fff; 
    overflow: hidden; 
    }
    #menu li a img { 
    border:0; 
    }
    #menu li a:hover { 
    height:120px; 
    }
     /* ELEMENTOS DEL MENU SUPERIOR */ #menu2 { 
    padding:0; 
    margin:0 auto; 
    list-style-type:none; 
    height:120px; width:354px; 
    }
    #menu2 li a {
     width:30px; 
    height:120px; 
    float:left; 
    border-right:2px solid #fff; 
    overflow: hidden; 
    }
    #menu2 li a img { 
    border:0; 
    }
    #menu2 li a:hover {
     background:#eee; 
    width:160px; 
    }
     /* ELEMENTOS DE LA GALERIA DE IMAGENES */ 
    #galeria { 
    padding:0; 
    margin:40px auto 0 auto; 
    list-style-type:none; 
    height:300px; 
    width:774px; 
    border:1px solid #888; 
    }
    #galeria li {
     width:60px; 
    height:300px; 
    float:left; 
    border-left:2px solid #000; 
    }
    #galeria li img { 
    height:300px;
    width:60px; 
    border:0; 
    }
    #galeria li:hover {
     background:#eee; 
    width:400px; 
    }
    #galeria li:hover img {
     width:400px; 
    }