Hace un tiempo, vi por una web un menu que me llamo la atencion. Ahora, basado en aquel menu, he diseñado este tan divertido y a la vez visualmente muy estetico. Ahora solo nos queda implementarlo en nuestro blog o web.
Lo primero de todo es poner los estilos (los podeis añadir aparte o conjuntamente con el HTML)
estilos CSS
<style> #menucomic, ul#menucomic li { float: left; } ul#menucomic li { background-repeat: no-repeat; list-style-type: none; margin-right: 5px; overflow: hidden; } ul#menucomic li a { color: #FF7700 !important; display: block; font-family: "Lucida Grande",Arial,Helvetica,sans-serif; font-size: 18px; font-style: normal; font-weight: normal; height: 40px; overflow: hidden; padding-bottom: 20px; padding-top: 20px; text-align: center; text-decoration: none; text-shadow: 0 2px 2px #000000; text-transform: uppercase; width: 110px; } ul#menucomic li a:hover { background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMzMDYLL9iZNWDKeqoccauB1DvGQDw0s4W5pwZBAYBGnRDLBIx5jOzUeDNjrHjrlWUBvYZY_M-4wqNk6G6I1RroZ0-UU86GiKeAz_q4vSalFBnlikRLlDDwlOuugG3ku__HVYTlkaTpqCt/s1600/hovercomic.png"); background-position: center top; background-repeat: no-repeat; color: #FFFFFF !important; font-style: normal; font-weight: normal; overflow: visible; } ul#menucomic li a:active { position: relative; top: 2px; } ul#menucomic li#active a { background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_cwKQxVbdjaNxGvWerWIX7vNIxgoJ2prvltjxosxpX0LMBQP5pOXkPispqBSWTvWMYlywbyVJh3TdNdELaXiHjgDiC8m0kXS2CkA80y8QiWgcVwlCd23W9BQalw822NM-PU_sfPiap3kS/s1600/activecomic.png"); background-position: center top; background-repeat: no-repeat; color: #FFFFFF !important; } </style>
Ahora colocaremos el HTML donde queramos que aparezca el menu, cambiando lo que esta en rojo. Si queremos añadir mas enlaces al menu, añadimos la linea <li> <a href="URL">Texto</a></li> tantas veces como queramos
<ul id="menucomic">
<li id="active"> <a href="URL">Inicio</a></li>
<li> <a href="URL">Texto</a></li>
<li> <a href="URL">Texto</a></li>
<li> <a href="URL">Texto</a></li>
</ul>
<li id="active"> <a href="URL">Inicio</a></li>
<li> <a href="URL">Texto</a></li>
<li> <a href="URL">Texto</a></li>
<li> <a href="URL">Texto</a></li>
</ul>
Aquí lo tenéis armado y listo para el montaje en un gadget solo le falta colocar las URL de los enlaces.
<style> #menucomic, ul#menucomic li { float: left; } ul#menucomic li { background-repeat: no-repeat; list-style-type: none; margin-right: 5px; overflow: hidden; } ul#menucomic li a { color: #FF7700 !important; display: block; font-family: "Lucida Grande",Arial,Helvetica,sans-serif; font-size: 18px; font-style: normal; font-weight: normal; height: 40px; overflow: hidden; padding-bottom: 20px; padding-top: 20px; text-align: center; text-decoration: none; text-shadow: 0 2px 2px #000000; text-transform: uppercase; width: 110px; } ul#menucomic li a:hover { background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMzMDYLL9iZNWDKeqoccauB1DvGQDw0s4W5pwZBAYBGnRDLBIx5jOzUeDNjrHjrlWUBvYZY_M-4wqNk6G6I1RroZ0-UU86GiKeAz_q4vSalFBnlikRLlDDwlOuugG3ku__HVYTlkaTpqCt/s1600/hovercomic.png"); background-position: center top; background-repeat: no-repeat; color: #FFFFFF !important; font-style: normal; font-weight: normal; overflow: visible; } ul#menucomic li a:active { position: relative; top: 2px; } ul#menucomic li#active a { background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_cwKQxVbdjaNxGvWerWIX7vNIxgoJ2prvltjxosxpX0LMBQP5pOXkPispqBSWTvWMYlywbyVJh3TdNdELaXiHjgDiC8m0kXS2CkA80y8QiWgcVwlCd23W9BQalw822NM-PU_sfPiap3kS/s1600/activecomic.png"); background-position: center top; background-repeat: no-repeat; color: #FFFFFF !important; } </style><ul id="menucomic">
<li id="active"> <a href="URL">Inicio</a></li>
<li> <a href="URL">Texto</a></li>
<li> <a href="URL">Texto</a></li>
<li> <a href="URL">Texto</a></li>
</ul>
<li id="active"> <a href="URL">Inicio</a></li>
<li> <a href="URL">Texto</a></li>
<li> <a href="URL">Texto</a></li>
<li> <a href="URL">Texto</a></li>
</ul>
Fuente; redeando
Publicado por;
0 Comments