Adblock Detectado

Nuestro sitio se mantiene gracias a la publicidad, por favor Desactiva Adblock para seguir navegando

He desactivado Adblock
Hoy veremos como crear un Hermoso Menú Vertical con JQuery y CSS para blogger , El menú se encontrara casi oculto, el menú solo se desplazara hacia afuera una ves que el cursor se
desplace por dicho menú. Esto le dará un efecto muy bonito y un ahorro de espacio en tu blog



Antes de comenzar veremos de que estamos hablando:

Agregaremos el Estilo CSS:

  • Paso 1: Vamos a Blogger>>Plantilla>>Edicion HTML
  • Paso 2: Buscamos la siguiente linea (Ctrol + F)
]]></b:skin>
Paso 3: Justo por encima de ]]></b:skin> pegamos el siguiente Estilo CSS
/*----------------------------------------------------
{--------} Menu de Navegacion {--------}
----------------------------------------------------*/
ul#navigation {
  position: fixed;
  margin: 0px;
  padding: 0px;
  top: 10px;
  left: 0px;
  list-style: none;
  z-index:9999;
}
ul#navigation li {
  width: 100px;
}
ul#navigation li a {
  display: block;
  margin-left: -2px;
  width: 100px;
  height: 70px;
  background-color:#CFCFCF;
  background-repeat:no-repeat;
  background-position:center center;
  border:1px solid #AFAFAF;
  -moz-border-radius:0px 10px 10px 0px;
  -webkit-border-bottom-right-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  -khtml-border-bottom-right-radius: 10px;
  -khtml-border-top-right-radius: 10px;
  /*-moz-box-shadow: 0px 4px 3px #000;
  -webkit-box-shadow: 0px 4px 3px #000;
  */
  opacity: 0.8;
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
}
ul#navigation .home a{
  background-image: url(http://3.bp.blogspot.com/-tfjdwTOpy1w/ToXBQnRT9lI/AAAAAAAABBI/OpHzoVCr3dQ/s1600/home.png);
}
ul#navigation .about a   {
  background-image: url(http://1.bp.blogspot.com/-zReigjHWq0M/ToXBQ5z0CgI/AAAAAAAABBM/Ej-qfRDmWys/s1600/id_card.png);
}
ul#navigation .search a   {
  background-image: url(http://2.bp.blogspot.com/-CMlFoVJPbGE/ToXBSA66dOI/AAAAAAAABBc/bkbZk-RA40w/s1600/search.png);
}
ul#navigation .podcasts a   {
  background-image: url(http://4.bp.blogspot.com/-r5Cj5f3SXtQ/ToXBQNrPZII/AAAAAAAABBE/c5gMUx-FhVw/s1600/camera.png);
}
ul#navigation .rssfeed a  {
  background-image: url(http://4.bp.blogspot.com/-exQf3ub1Uh8/ToXBR07-FlI/AAAAAAAABBY/305wn3JNvEI/s1600/rss.png);
}
ul#navigation .photos a   {
  background-image: url(http://2.bp.blogspot.com/-vtA3jcOenGo/ToXBRKMLa1I/AAAAAAAABBQ/evLZvWAPGTc/s1600/ipod.png);
}
ul#navigation .contact a  {
  background-image: url(http://1.bp.blogspot.com/-UK87216oCh4/ToXBRUSGyAI/AAAAAAAABBU/memOeFScgBI/s1600/mail.png);

Ahora agregaremos el Efecto JQuery

  • Paso 5: Buscamos la siguiente linea (Ctrol + F)

</head> 

  • Paso 6: Antes de </head> agregamos el Efecto JQuery

<script type="text/javascript">
      $(function() {
        $('#navigation a').stop().animate({'marginLeft':'-85px'},1000);
        $('#navigation > li').hover(
          function () {
            $('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
          },
          function () {
            $('a',$(this)).stop().animate({'marginLeft':'-85px'},200);
          }
        );
      });
    </script> 

 Agregaremos el Menu


  • Paso 8: Antes de </body> agregamos el codigo HTML
<ul id='navigation'>
      <li class='home'><a href='URL ENLACE'><span/>Titulo</a></li>
      <li class='about'><a href='URL ENLACE'><span>Titulo</span></a></li>
      <li class='search'><a href='URL ENLACE'><span>Titulo</span></a></li>
      <li class='photos'><a href='URL ENLACE'><span>Titulo</span></a></li>
      <li class='rssfeed'><a href='URL ENLACE'><span>Titulo</span></a></li>
      <li class='podcasts'><a href='URL ENLACE'><span>Titulo</span></a></li>
      <li class='contact'><a href='URL ENLACE'><span>Titulo</span></a></li>
</ul>

Solo debemos de Cambiar la URL ENLACE y el TITULO 

  • Paso 9: Guardamos la Plantilla y Listo ya podemos Disfrutar de un Menú Vertical con JQuery y CSS.


Nota1:- Si queremos agregar agregar mas menús
1º: Agregamos en el Codigo CSS

ul#navigation .thongbao a  {
  background-image: url(URL de la Imagen);
}
Nota2:- Agregamos en el Codigo HTML
<li class='thongbao'><a href='URL Enlace'><span>Titulo</span></a></li>
- - 1 Comentarios
Tag

Comentarios (1)

  1. hola bro, no me sale, siempre queda afuera y no se oculta :( como le hago ayudame
    saludos

    ResponderEliminar
:))
:((
:D
:(
:)
:-)
;)
=))
:p
=.=
==
^_^
/=he
:*
/=r
/=l
:v
/=ok
/=clap
(y)
(yy)
/=hi
/=j
/=hup
/=hd
/=hl
/=hr
/=s
<3

Instrucciones Para omentar

Incertar Enlace

Utilice el codigo <a href='LINK'> EJEMPLO </a>

Cargar Imagen

[img] LINK_ANH [/img] -Use el codigo para cargar una imagen.

Formato Word

<b> negrita </b>
<i> cursiva </i>
<u> texto subrayado </u>
<strike> texto tachado </strike>

Insertar un Fragmento de codigo

Primero use esta herramienta para codificar el codigo que quiera agregar.
Luego utilice el codigo [code] CODIGO HTML [/code]

Cerrar