Gran menú con imágenes de fondo

Tweet

detalles

Hace tiempo Pizcos blog en su sección de enlaces del mes mostraba un menú muy especial, es un menú elegante y yo diría que majestuoso.

Lo encontré de nuevo en Codrops donde explican su funcionamiento y proporcionan la descarga de archivos, se visualiza perfectamente en Google Chrome, Firefox, Opera, Safari, IE8, IE7 incluso en IE6. Trabaja con un Pugin de jQuery y el menú original y que vamos a añadir podemos verlo en CODROPS.

Descargamos el ZIP con las imágenes para añadirlas posteriormente a los estilos.
Nos situamos en plantilla edición de html justo después de ]]></b:skin> y los añadimos:

<style type='text/css'>
* {margin:0;padding:0;}
.menuWrapper{
border:1px solid #000;
text-shadow:0 1px 1px #000;
font-style: normal;
font-weight: normal;
text-transform:uppercase;
letter-spacing: normal;
line-height: 1.45em;
position:relative;
margin:20px auto;
height:542px;
width:797px;
background-position:0 0;
background-repeat:no-repeat;
background-color:transparent; }

ul.menu{
padding: 0;
list-style:none;
width:797px; }
ul.menu > li{
float:left;
width:265px;
height:542px;
background-repeat:no-repeat;
background-color:transparent; }
ul.menu > li.last{
border:none; }

.bg1{
background-image: url(Url-imagen); }
.bg2{
background-image: url(Url-imagen); }
.bg3{
background-image: url(Url-imagen); }

ul.menu > li > a{
text-shadow:0 1px 1px #000;
border-bottom: 1px solid #000;
border-top: 1px solid #000;
float:left;
font-size: 21px;
width:268px;
height: 48px;
margin-top:450px;
text-align:center;
line-height:50px;
color:#ddd;
background-color:#333;
letter-spacing:1px;
cursor:pointer;
font-family: 'Tangerine', century gothic, verdana;
text-decoration:none;
}

ul.menu > li ul{
list-style:none;
float:left;
margin-top:-180px;
width:130%;
height:110px;
padding-top:10px;
background-repeat:no-repeat;
background-color:transparent; }
ul.menu > li ul li{
text-shadow:0 1px 1px #000;
display:none; }
ul.menu > li ul.sub1{
background-image:url(Url-imagen-transparente); }

ul.menu > li ul.sub2{
background-image:url(Url-imagen-transparente); }

ul.menu > li ul.sub3{
background-image:url(Url-imagen-transparente); }

ul.menu > li ul.sub1 {margin-left:0;}
ul.menu > li ul.sub2 {margin-left:0;}
ul.menu > li ul.sub3 {margin-left:0;}
ul.menu > li ul li a{

color:#fff;
text-decoration:none;
line-height:20px;
margin-left:20px;
text-shadow:0 1px 1px #000;
font-size:15px; }

ul.menu > li ul li a:hover{
border-bottom:1px dotted #fff; }

ul.menu > li ul.sub1 li{
display:block; }
</style>

Si decidimos sustituir las imágenes debemos tener en cuenta que miden 800x542 y las añadimos en "url-primera-fotografía" segunda y tercera.

Las otras imágenes que debemos añadir son las transparencias de color y en los estilos viene definidas con url-imagen-transparente-azul, verde y amarilla.

A continuación añadimos los scripts directamente a la plantilla para evitar los problemas ocasionados con alojamientos externos.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>

Si con anterioridad añadimos jquery.min.js no es necesario volver a añadirlo. A continuación añadimos también el contenido del siguiente archivo

Por último editamos un gadget de HTML y en su interior añadimos lo siguiente:

<div class="menuwrapper bg1" id="menuwrapper">
<ul class="menu" id="menu">
<li class="bg1" style="background-position: 0pt 0pt;">
<a href="#" id="bg1">Título-1</a>


<ul class="sub1" style="background-position: 0pt 0pt;">
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 1</a></li>
</ul>
</li>
<li class="bg1" style="background-position: -266px 0px;">
<a href="#" id="bg2">Título-2</a>


<ul class="sub2" style="background-position: -266px 0pt;">
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 2</a></li>
</ul>
</li>
<li class="last bg1" style="background-position: -532px 0px;">
<a href="#" id="bg3">Título-3</a>


<ul class="sub3" style="background-position: -266px 0pt;">
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 3</a></li>
</ul>
</li>
</ul>
</div>

En el gadget es donde añadiremos a url de las páginas o sitios que vamos a enlazar,debemos sustituir la almohadilla # por la url de nuestro enlace.

En Título-1, Título-2 y Título-3 lo sustituimos por el texto de los títulos que deseamos añadir y que se mostrará en la barra inferior del menú.

Cada título lleva a continuación Submenu 1, Submenu 2, Submenu 3. Esos submenús son los enlaces que añadimos para que se muestren marcando sobre los títulos.

Click en la imagen para ver ejemplo personalizado

Posted in: menús para mi blog