Inicio TUTORIALES BLOGGER Menu Vertical con jquery (mostrar y ocultar )

Menu Vertical con jquery (mostrar y ocultar )

Menu Vertical con jquery (mostrar y ocultar )

Hola..en esta oportunidad les compartiré un estupendo menu verticial con jquery . Que es mostrar y ocultar el menu . Que tan solo dando clic en el menu  mostrara completo el menu vertical.

Este menu se mostrara en la parte superior de tu blos de blogger.

Su diseño , interfaz  y ordenado lo hace muy interesante a la ahora de usarlo en tu blogs .


Entonces si tu deseas ponerlo en tu blogs ..nomas vas  aseguir estos pasos a continuación .






Los pasos que vas a seguir son 3 pasos .. 

Pero antes vas  haber el demo en vivo :


DEMO EN VIVO


1.- Copia estos codigos CSS y colocale encima de esta etiqueta :  ]]></b:skin>  o también encima de esta  </style>  

.menu{position:absolute;top:23px;right:135px;text-align:center;padding:0;color:#333;font-size:46px;font-weight:700;line-height:25px;cursor:pointer}
#css-menu{position:fixed;top:0;right:-340px;z-index:9999;background:#2C2C2D;height:100%;transition:all .4s ease-in-out;}
#cssmenu,#cssmenu ul,#cssmenu li,#cssmenu a {margin: 0;padding: 0;border: 0;list-style: none;font-weight: normal;text-decoration: none;line-height: 1;  font-family: "Open Sans", sans-serif;font-size: 14px;position: relative;}
#cssmenu a {line-height: 1.3;padding: 12px 15px;}
#cssmenu {width: 240px;}
#cssmenu > ul > li {cursor: pointer;background: #efefef;border-top:1px solid #3d3d3d;border-bottom: 1px solid #161616;}
#cssmenu > ul > li:first-child {border-top:none;}
#cssmenu > ul > li:last-child {border-bottom:1px solid #3d3d3d;}
#cssmenu > ul > li:last-child > a {border-bottom: 1px solid #161616;}
#cssmenu > ul > li > a {font-size: 14px;display: block;color: #ffffff;text-shadow: 0 1px 1px #000;background: #2C2C2D;padding: 12px 15px;}
#cssmenu > ul > li > a:hover {text-decoration: none;background:#3d3d3d}
#cssmenu > ul > li.active {font-weight:700;}
#cssmenu > ul > li.home .close-menu{background: #2C2C2D;color: #fff;font-size:18px;font-weight:700;padding: 12px 15px;display:block}
#cssmenu > ul > li.has-sub > a:after {content: '';position: absolute;top: 15px;right: 10px;border: 5px solid transparent;border-left: 5px solid #ffffff;}
#cssmenu > ul > li.has-sub.active > a:after {right: 14px;top: 17px;border: 5px solid transparent;border-top: 5px solid #ffffff;}
#cssmenu ul ul {padding: 0;display: none;}
#cssmenu ul ul a {background: #efefef;display: block;color: #797979;font-size: 13px;}
#cssmenu ul ul a:hover {color: #000;}
#cssmenu ul ul li {border-bottom: 1px solid #c9c9c9;}
#cssmenu ul ul li.odd a {background: #e5e5e5;}
#cssmenu ul ul li:last-child {border: none;}

2.- Copia estos codigos Javascript  y ponle encima de esta etiqueta:  </body>
<script type='text/javascript'>
//<![CDATA[
$('#cssmenu ul ul li:odd').addClass('odd');
$('#cssmenu ul ul li:even').addClass('even');
$('#cssmenu > ul > li > a').click(function() {
  $('#cssmenu li').removeClass('active');
  $(this).closest('li').addClass('active');
  var checkElement = $(this).next();
  if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
    $(this).closest('li').removeClass('active');
    checkElement.slideUp('normal');
  }
  if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
    $('#cssmenu ul ul:visible').slideUp('normal');
    checkElement.slideDown('normal');
  }
  if($(this).closest('li').find('ul').children().length == 0) {
    return true;
  } else {
    return false;
  }
});
//]]>
  </script>
<script type='text/javascript'>
$(function() {  
    $('.menu').click(function () {
    $('#css-menu').css({right:'0'});
});
    $('.close-menu').click(function() {
    $('#css-menu').css({right:'-340px'});
});
 });
</script>

3.- Por ultimo copia estos codigos HTML y ponlo debajo de esta etiqueta : <body>   y si usas las plantilas de blogger busca esto  : <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

<div class='menu' title='Menu'><span style='font-size:16px;position:absolute;top:1px;left:-48px'>Menu</span> &#8801;</div>

<div id='css-menu'>
<div id='cssmenu'>
<ul>
  <li class='home'><span class='close-menu' style='font-size:26px;font-weight:400;position:relative' title='Close'>&#8801; <span style='font-size:18px;font-weight:700;position:absolute;top:17px;left:33px'>Menu</span></span></li>

  <li><a href='/' title='Home'><span>Inicio</span></a></li>
   <li><a href='#' title='Daftar Isi'><span>Canal</span></a></li>
   <li class='has-sub'><a href='#' title='About This Blog'><span>Acerca de</span></a>
      <ul>
         <li><a href='#' title='About'><span>Info</span></a></li>
         <li><a href='#' title='Contact'><span>Contacto</span></a></li>
         <li class='last'><a href='#' title='Privacy'><span>Privacy</span></a></li>
      </ul>
   </li>
<li><a href='#' title='Google+'><span>Advertiser</span></a></li>
   <li class='has-sub'><a href='#' title='More'><span>Mas</span></a>
      <ul>
<li><a href='#' title='More Menu 1'><span>More Menu 1</span></a></li>
<li><a href='#' title='More Menu 2'><span>More Menu 2</span></a></li>
<li><a href='#' title='More Menu 3'><span>More Menu 3</span></a></li>
<li><a href='#' title='More Menu 4'><span>More Menu 4</span></a></li>
<li><a href='3' title='More Menu 5'><span>More Menu 5</span></a></li>
<li class='last'><a href='#' rel='nofollow' target='_blank' title='More Menu 6'><span>More Menu 6</span></a></li>
      </ul>
   </li>
</ul>
</div>
</div>

Ahora usted edite este menu a su antojo .


Fuente del Aticulo :http://www.kompiajaib.com/



 Como soy muy amable te ayudo  con un video Tutorial . Usted lo puede ver en 2 opciones : Dailymotion y YouTube.



Menu vertical con jquery (mostrar y ocultar) para blogger | DanyDanielRT by DanyDanielRT


Danos Tu Reaccion Sobre el Articulo
Articulos Relacionados
Comentar