Menú deslizante en la parte superior del blog

Publicado por Juvinao en

Hoy en dia lo principal en un blog es ahorrar lo maximo de espacio en el y que mejor solucion que un excelente menu deslizante que te ahorrara mucho espacio.
El menu del que te hablo es el siguiente:

Puedes verlo en mi blog de pruebas.


Pasos

Para añadirlo debes seguir los siguientes pasos:

1.  Buscamos la etiqueta <head> y debajo de ella pegamos lo siguiente:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function() {

// Expand Panel
$(&quot;#open&quot;).click(function(){
$(&quot;div#panel&quot;).slideDown(&quot;slow&quot;);
});

// Collapse Panel
$(&quot;#close&quot;).click(function(){
$(&quot;div#panel&quot;).slideUp(&quot;slow&quot;);
});

// Switch buttons from &quot;Abrir menú&quot; to &quot;Cerrar menú&quot; on click
$(&quot;#toggle a&quot;).click(function () {
$(&quot;#toggle a&quot;).toggle();
});

});</script>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
body#layout #toppanel {display:none !important;}
</style>
</b:if>

2. Ahora añadimos el codigo CSS buscando la etiqueta ]]></b:skin> y pegando encima de ella lo siguiente:

/* Top Sliding Menu
----------------------------------------------- */

.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}
.clearfix {height: 1%;}
.clearfix {display: block;}

.tab {
background: url(http://2.bp.blogspot.com/_dsEG33PDaHw/TUYjUtg1alI/AAAAAAAAAr4/irK6KNxvCHg/s1600/tab_b.png) repeat-x 0 0;
height: 42px;
position: relative;
top: 0;
z-index: 999;
}
.tab ul.login {
display: block;
position: relative;
float: right;
clear: right;
height: 42px;
width: auto;
font-weight: bold;
line-height: 42px;
margin: 0;
right: 150px;
color: white;
font-size: 80%;
text-align: center;
}
.tab ul.login li.left {
background: url(http://1.bp.blogspot.com/_dsEG33PDaHw/TUYjU8z7FWI/AAAAAAAAAr8/di0CWuFKxfo/s1600/tab_l.png) no-repeat left 0;
height: 42px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}
.tab ul.login li.right {
background: url(http://2.bp.blogspot.com/_dsEG33PDaHw/TUYjVrN4yNI/AAAAAAAAAsE/4YOHQURWUHM/s1600/tab_r.png) no-repeat left 0;
height: 42px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}
.tab ul.login li {
text-align: left;
padding: 0 6px;
display: block;
float: left;
height: 42px;
background: url(http://4.bp.blogspot.com/_dsEG33PDaHw/TUYjVVpFpYI/AAAAAAAAAsA/EKlKa2rlic0/s1600/tab_m.png) repeat-x 0 0;
}

.tab ul.login li a {color: #15ADFF;}
.tab ul.login li a:hover {color: #FFFFFF;}
.tab .sep {color:#414141}

.tab a.open, .tab a.close {
height: 20px;
line-height: 20px !important;
padding-left: 30px !important;
cursor: pointer;
display: block;
width: 100px;
position: relative;
top: 11px;
}

.tab a.open {background: url(http://2.bp.blogspot.com/_dsEG33PDaHw/TUYjS1nMjqI/AAAAAAAAAro/5oD_cgvHwM4/s1600/bt_open.png) no-repeat left 0;}
.tab a.close {background: url(http://3.bp.blogspot.com/_dsEG33PDaHw/TUYjSS2QXBI/AAAAAAAAArk/5KFg95ZWLts/s1600/bt_close.png) no-repeat left 0;}
.tab a:hover.open {background: url(http://2.bp.blogspot.com/_dsEG33PDaHw/TUYjS1nMjqI/AAAAAAAAAro/5oD_cgvHwM4/s1600/bt_open.png) no-repeat left -19px;}
.tab a:hover.close {background: url(http://3.bp.blogspot.com/_dsEG33PDaHw/TUYjSS2QXBI/AAAAAAAAArk/5KFg95ZWLts/s1600/bt_close.png) no-repeat left -19px;}

#toppanel {
position: absolute;
top: 0;
width: 100%;
z-index: 999;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#panel {
width: 100%;
height: 270px; /* Alto del slide */
color: #999999;
background: #272727;
overflow: hidden;
position: relative;
z-index: 3;
display: none;
}
#panel h4 {
font-size: 1.6em;
padding: 5px 0 10px;
margin: 0;
color: #FFFFFF;
text-align: center;
}
#panel p {
margin: 5px 0;
padding: 0;
}
#panel a {
text-decoration: none;
color: #15ADFF;
}
#panel a:hover {
color: white;
}
#panel .content {
width: 960px;
margin: 0 auto;
padding-top: 15px;
text-align: left;
font-size: 0.85em;
}
#panel .content .left {
width: 280px;
float: left;
padding: 0 15px;
border-left: 1px solid #333;
}
#panel .content .right {
border-right: 1px solid #333;
}
#panel .content form {
margin: 0 0 10px 0;
}
#panel .content label {
float: left;
padding-top: 8px;
clear: both;
width: 280px;
display: block;
}
#panel .content input.field {
border: 1px #1A1A1A solid;
background: #414141;
margin-right: 5px;
margin-top: 4px;
width: 200px;
color: white;
height: 16px;
}
#panel .content input:focus.field {
background: #545454;
}
#panel .content input.bt_register {
display: block;
float: left;
clear: left;
height: 24px;
text-align: center;
cursor: pointer;
border: none;
font-weight: bold;
margin: 10px 0;
}
#panel .content input.bt_register {
width: 94px;
color: white;
background: transparent url(http://2.bp.blogspot.com/_dsEG33PDaHw/TUYjTGOeO8I/AAAAAAAAArs/XQSFRPBtS3s/s1600/bt_register.png) no-repeat 0 0;
}

#slide-menu {
width: 160px;
float: left;
}
#slide-menu2 {
width: 160px;
float: right;
}
#slide-menu ul, #slide-menu2 ul{
font-family: Arial, Helvetica, sans-serif;
list-style-type:none;
margin:0;
padding:0;
}
#slide-menu ul li a, #slide-menu2 ul li a {
background:url(http://3.bp.blogspot.com/_dsEG33PDaHw/TUYjTjBCpAI/AAAAAAAAArw/rJgbMGEyjMU/s1600/bullet_blue.png) center left no-repeat;
margin:0;
padding:3px 3px 3px 18px;
}
#slide-menu li, #slide-menu2 li {display: inline;}
#slide-menu a, #slide-menu2 a{
color: #FFFFFF;
text-decoration: none;
font-size: 13px;
display: block;
padding: 3px;
width: 160px;
}
#slide-menu a:link, #slide-menu a:visited, #slide-menu2 a:link, #slide-menu2 a:visited {
color: #999;
text-decoration: none;
}
#slide-menu a:hover, #slide-menu2 a:hover {
color: #FFFFFF;
}

3. Por ultimo ponemos la estructura del menu buscando la etiqueta <body> y pegando debajo de ella lo siguiente:

<!-- Inicio top sliding menu -->
<div id='toppanel'>
<div id='panel'>
<div class='content clearfix'>

<!-- Primera sección -->
<div class='left' style='width:240px !important'>

<h4>Hola, Bienvenido a mi blog!</h4>
<p>Puedes seguirnos en las redes sociales o suscribirte al feed.</p>

<div align='center'>
<a href='http://nombre-de-mi-blog.blogspot.com/atom.xml'><img src='http://4.bp.blogspot.com/_dsEG33PDaHw/TUYmsIuunqI/AAAAAAAAAsc/KUuPv94Lwso/s1600/Feed_.png' style='padding:25px 5px;' width='60'/></a> <a href='http://www.facebook.com/usuario'><img src='http://3.bp.blogspot.com/_dsEG33PDaHw/TUYmrpIzmHI/AAAAAAAAAsY/sG1ZCEfxvNY/s1600/FaceBook_.png' style='padding:25px 5px;' width='60'/></a> <a href='http://twitter.com/usuario'><img src='http://2.bp.blogspot.com/_dsEG33PDaHw/TUYmseCsXMI/AAAAAAAAAsg/RN_5cSwxE8M/s1600/Twitter_.png' style='padding:25px 5px;' width='60'/></a>
</div>

</div>

<!-- Segunda sección -->
<div class='left' style='width:320px !important'>
<h4>Categorías</h4>

<div id='slide-menu'>
<ul>
<li><a href='URL del enlace'>Menu item uno</a></li>
<li><a href='URL del enlace'>Menu item dos</a></li>
<li><a href='URL del enlace'>Menu item tres</a></li>
<li><a href='URL del enlace'>Menu item cuatro</a></li>
<li><a href='URL del enlace'>Menu item cinco</a></li>
<li><a href='URL del enlace'>Menu item seis</a></li>
<li><a href='URL del enlace'>Menu item siete</a></li>
<li><a href='URL del enlace'>Menu item ocho</a></li>
<li><a href='URL del enlace'>Menu item nueve</a></li>
<li><a href='URL del enlace'>Menu item diez</a></li>
</ul>
</div>

<div id='slide-menu2'>
<ul>
<li><a href='URL del enlace'>Menu item uno</a></li>
<li><a href='URL del enlace'>Menu item dos</a></li>
<li><a href='URL del enlace'>Menu item tres</a></li>
<li><a href='URL del enlace'>Menu item cuatro</a></li>
<li><a href='URL del enlace'>Menu item cinco</a></li>
<li><a href='URL del enlace'>Menu item seis</a></li>
<li><a href='URL del enlace'>Menu item siete</a></li>
<li><a href='URL del enlace'>Menu item ocho</a></li>
<li><a href='URL del enlace'>Menu item nueve</a></li>
<li><a href='URL del enlace'>Menu item diez</a></li>
</ul>
</div>
</div>

<!-- Tercera sección -->
<div class='left right'>

<h4>&#161;Suscríbete a nuestro blog!</h4>
<p>Recibe en tu correo las últimas noticias del blog. Sólo ingresa tu correo para suscribirte.</p>

<form action='http://feedburner.google.com/fb/a/mailverify?uri=Nombre-del-Feed' method='post' target='_blank'>
<input class='field' name='email' type='text/' value=''/>
<input name='uri' type='hidden' value='Nombre-del-Feed'/>
<input name='loc' type='hidden' value='es_ES'/>
<input class='bt_register' type='submit' value='Suscribir'/></form>

</div>
</div>
</div>

<div class='tab'>
<ul class='login'>
<li class='left'/>
<li>Hola invitado!</li>
<li class='sep'>|</li>
<li id='toggle'>
<a class='open' href='#' id='open'>Abrir menú</a>
<a class='close' href='#' id='close' style='display: none;'>Cerrar menú</a>
</li>
<li class='right'/>
</ul>
</div>
</div>
<!-- Fin top sliding menu -->

Si usas una plantilla hecha con el diseñador de plantillas de Blogger debes pegar el codigo anterior debajo de lo siguiente:

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

Esta última parte que hemos agregado es lo que contiene lo que se oculta y despliega. He puesto en color azul los nombres de cada sección para que les sea más fácil reconocerlas.
En la primera sección puedes cambiar el mensaje de bienvenida; seguido de él están los iconos de las redes sociales, sólo cambia lo que está en color marron  por tu nombre de usuario ya sea de Facebook, Twitter y el nombre de tu blog.
En la segunda sección está el menú de categorías que hemos agregado, solo debes poner las URLs de los enlaces y los nombres de los enlaces que hemos añadido al menú.

Y en la tercera sección está la suscripción por correo electrónico, recuerda que debes tener habilitada esa opción en Feedburner. Y ya habilitada sólo hay que poner donde se indica en color morado el nombre del feed que tenemos.

Via
Ciudad Blogger

Categorías: Trucos Blogger

14 comentarios

Valeria Siqodelika · junio 6, 2011 a las 7:13 pm

Muy Buen Post. me sirvio mucho y lo aplique a mi Blog.

Graciaaas.

Responder

Juvinao · junio 7, 2011 a las 12:42 am

@Valeria Siqodelika Que bueno que te haya servido tiene un bonito blog,Saludos.

Responder

El RePOSTero de LLDM by yisay_gf · julio 11, 2011 a las 9:22 am

MUCHAS GRACIAS QUEDO MUY BONITO Y PRACTICO

Responder

Juvinao · julio 12, 2011 a las 12:16 am

@El RePOSTero de LLDM by yisay_gf Si es menu muy bueno,gracias por comentar.

Responder

Felipe · julio 21, 2011 a las 12:23 am

Lo he probado y esta muy currada, la pondre en otro de mis blogs.

Por cierto…¿barra deslizante del menu superior?
Estaba pensando ponerla como otras que he visto tuyas pero que no haga falta pinchar para que te salga las categorias…simplemente deslizar el raton por encima y que esta se deslice.Aunque creo que sera muy dificil, bueno yo lo comento por si acaso.

Saludos Juvinao

Responder

redes sociales · octubre 24, 2011 a las 4:14 pm

excelente guia para crear un menu en css. se agradece

Responder

Juvinao · octubre 24, 2011 a las 4:22 pm

redes sociales de nada amigo 😛

Responder

Ismael Inestrosa · junio 1, 2012 a las 2:45 pm

Hola compañero me gusta mucho tu blog porque me has aportado muchas cosas bonitas para mi sitio,pero ahora se estan surgiendo mucho problemas cada vez que añado algo al HTML,como por ejemplo este tuto del menu horizontal,que en vez de horizontal se ve vertical y para colmo todo lo que escribo en HTML se refleja arriba,estoy empezando y la verdad es que es un suplicio para mi,me desmoraliza.
Haber si me puedes hechar una manita en el diseño,muchas gracias.
http://elgatopaco.blogspot.com.es/

Responder

    Juvinao · junio 1, 2012 a las 11:31 pm

    Ismael creo que hay dos posibles razones del porque te sucede eso.

    1. El ultimo truco que agregastes talvez inserto algun codigo en tu blog que te genere estos problemas.

    2. La plantilla que tienes puede ser muy complicada con ciertos codigos y scripts.

    Responder

    Ismael Inestrosa · junio 20, 2012 a las 11:46 am

    Gracias Juvinao de todos modos al final cambie de plantilla.Me gustaria que os pasarais por mi blog y lo extendierais a los compis ya que es un blog de ayuda para la gente de a pie,es decir los que peor lo estan pasando sintrabajo y demas,no hay nada de lucro,es mas decir que yo tambien estoy en el paro pero nunca me olvido de los mas necesitados ya que yo tambien pase por malos tragos,y si teneis criticas constructivas mejor,un abrazo a todos.

    Responder

Josep-Pepe · julio 23, 2012 a las 2:16 pm

Hola,
Quiero hacer un menú que se despliegue al clicar en un botón y al abrirse aparezcan columnas y en cada columna enlaces.
He estado buscando, y para darte un ejemplo de como es lo que quería saber si se puede hacer y como, es la opción de Filtrar resultados en Youtube, la abres cuando quieres clicando en un botón y aparecen columnas con enlaces.
Mira: https://dl.dropbox.com/u/11723636/Men%C3%BA%20Youtube.png
Saludos

Responder

    Juvinao · julio 27, 2012 a las 1:01 am

    He publicado varios menus similares a los que pides,revisalos y dime si ellos cumplen tus espectativas.

    Saludos 😀

    Responder

Chucky Lee Ray · diciembre 28, 2012 a las 4:12 pm

Cuando lo pongo me aparece abajo del todo y en vertical nada de arriba ni desplegable :S

Responder

Carlos Enrique Chamorro Matos · marzo 11, 2013 a las 12:30 am

exlente.. Graicas me Sirvio de 10! 😀

Responder

Deja una respuesta

Marcador de posición del avatar

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Entradas relacionadas

Trucos Blogger

Cómo eliminar de tu blog el enlace «Con la tecnología de blogger»

Esta opción suele ser bastante tediosa de eliminar para los usuarios inexpertos.

Trucos Blogger

Gadget de etiquetas como menú desplegable y estilo personalizable

Blogger posee muchos gadgets interesantes, y quizás uno de las más importantes es el de las etiquetas, ya que debido a la carencia de verdaderas categorías en Blogger, las etiquetas son el reemplazo de estas Leer más…

Trucos Blogger

Formulario de contacto para Blogger con 123 Contact Form

Blogger es una plataforma muy flexible y bien si tienes una web de sonidos (sonidonorte.es/alquiler/) o una web de diseño como el blog de este servidor, absolutamente todos los sitios requieren de un formulario de Leer más…