domingo, enero 26, 2014

[ TutosBlogs ] Menu horizontal deslizante parecido al de google

By: Ghaaby Captor | Fecha: 1/26/2014 |

Menú horizontal deslizante parecido al de google 
      Hola mis loqueros!!  espero que estén muy bien!  aquí ando con un nuevo tutorial que me gusto porque es un menú deslizante parecido al de google  y me gusta su efecto, es como  interesante  jajaja bueno le agregue un poco de mi estilo espero que  les gusten 


1- Primero deben irse al escritorio del blog >> Plantilla >> Edicion de html >> CTRL + F (para la barra de busqueda)

2- Busca el siguiente código </head> y arriba de este pegas

<script src='https://sites.google.com/site/ghaabycaptor/ghaabycc/modernizr.custom.48780.js'/>

3- Busca el siguiente código </body> y arriba de este pegas

 <script type='text/javascript'>
    window.setTimeout(function() {
        document.body.className = document.body.className.replace(&#39;loading&#39;, &#39;&#39;);
      }, 10);
  </script>

<script src='https://sites.google.com/site/ghaabycaptor/ghaabycc/classie.js'/>
<script src='https://sites.google.com/site/ghaabycaptor/ghaabycc/gnmenu.js'/>
<script>
new gnMenu( document.getElementById( &#39;gn-menu&#39; ) );
</script>


4- Ahora hay que ingresar el estilo CSS buscamos ]]></b:skin> y arriba de este pegamos

*,
*:after,
*::before {
    box-sizing: border-box;
}
.gn-menu-main {
margin: 0;
padding: 0;
background: url(http://4.bp.blogspot.com/-TQE3zmFn-0E/Usi2Ww18uYI/AAAAAAAASL4/nJvv5nJ03Cs/s1600/jjjjjjjjjjj.jpg);
color: #5f6f81;
list-style: none;
text-transform: none;
font-weight: 300;
font-family: 'Lato', Arial, sans-serif;
line-height: 60px;
z-index: 1;
}
.gn-menu-main ul {
margin: 0;
padding: 0;
background: #eee;
color: #5f6f81;
list-style: none;
text-transform: none;
font-weight: 300;
font-family: 'Lato', Arial, sans-serif;
line-height: 60px;
}

.gn-menu-main {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
font-size: 13px;
}
.gn-menu-main a {
color: #FFFFFF;
    cursor: pointer;
    display: block;
    font-size: 14px;
    height: 100%;
    text-decoration: none;
    text-shadow: 0 0 1px #0B6138;
}
.gn-menu-main a:hover {
color: #ceffff;
    cursor: pointer;
    display: block;
    font-size: 14px;
    height: 100%;
    text-decoration: none;
    text-shadow: 0 0 1px #6ba7a6;
  background: -webkit-linear-gradient(#417c83,#57939a);
   background: -moz-linear-gradient(#417c83, #57939a);
   background: -o-linear-gradient(#417c83, #57939a);
}

.no-touch .gn-menu-main a:hover,
.no-touch .gn-menu li.gn-search-item:hover,
.no-touch .gn-menu li.gn-search-item:hover a {
background: #5f6f81;
color: white;
}
.gn-menu-main &gt; li {
display: block;
float: left;
height: 100%;
border-right: 1px solid #417c83;
text-align: center;
}
/* icon-only trigger (menu item) */
.gn-menu-main li.gn-trigger {
position: relative;
width: 60px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.gn-menu-main &gt; li:last-child {
float: right;
border-right: none;
border-left: 1px solid #417c83;
}
.gn-menu-main &gt; li &gt; a {
padding: 0 30px;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: bold;
padding: 20px 30px 0;
}
.gn-menu-main:after {
display: table;
clear: both;
content: "";
}
.gn-menu-wrapper {
position: fixed;
top: 60px;
bottom: 0;
left: 0;
overflow: hidden;
width: 60px;
border-top: 1px solid #c6d0da;
background: url("http://2.bp.blogspot.com/_q4j3j-JA2ro/SWf2Im0q-lI/AAAAAAAAIiI/CTZeslDne6o/s320/fondocoments2.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
-webkit-transform: translateX(-60px);
-moz-transform: translateX(-60px);
transform: translateX(-60px);
-webkit-transition: -webkit-transform 0.3s, width 0.3s;
-moz-transition: -moz-transform 0.3s, width 0.3s;
transition: transform 0.3s, width 0.3s;
}
.gn-scroller {
position: absolute;
overflow-y: scroll;
width: 370px;
height: 100%;
}
.gn-menu {
border-bottom: 1px solid #c6d0da;
text-align: left;
font-size: 18px;
}
.gn-menu li:not(:first-child),
.gn-menu li li {
box-shadow: inset 0 1px #c6d0da
}
.gn-submenu li {
overflow: hidden;
height: 0;
-webkit-transition: height 0.3s;
-moz-transition: height 0.3s;
transition: height 0.3s;
max-width: 500px;
min-width: 500px;
}
.gn-submenu li a {
color: #000;
    text-shadow: 0 0 1px #ccc;
}
input.gn-search {
position: relative;
z-index: 10;
padding-left: 60px;
outline: none;
border: none;
background: transparent;
color: #5f6f81;
font-weight: 300;
font-family: 'Lato', Arial, sans-serif;
cursor: pointer;
}
/* placeholder */
.gn-search::-webkit-input-placeholder {
color: #5f6f81
}
.gn-search:-moz-placeholder {
color: #5f6f81
}
.gn-search::-moz-placeholder {
color: #5f6f81
}
.gn-search:-ms-input-placeholder {
color: #5f6f81
}
/* hide placeholder when active in Chrome */
.gn-search:focus::-webkit-input-placeholder,
.no-touch .gn-menu li.gn-search-item:hover .gn-search:focus::-webkit-input-placeholder {
color: transparent
}
input.gn-search:focus {
cursor: text
}
.no-touch .gn-menu li.gn-search-item:hover input.gn-search {
color: white
}
/* placeholder */
.no-touch .gn-menu li.gn-search-item:hover .gn-search::-webkit-input-placeholder {
color: white
}
.no-touch .gn-menu li.gn-search-item:hover .gn-search:-moz-placeholder {
color: white
}
.no-touch .gn-menu li.gn-search-item:hover .gn-search::-moz-placeholder {
color: white
}
.no-touch .gn-menu li.gn-search-item:hover .gn-search:-ms-input-placeholder {
color: white
}
.gn-menu-main a.gn-icon-search {
position: relative;
top: 0;
left: 0;
height: 60px;
width: 500px;
color: #000;
    text-shadow: 0 0 1px #ccc;
}
.gn-menu-main a.gn-icon-download {
height: 60px;
color: #000;
    text-shadow: 0 0 1px #ccc;
}

.gn-menu-main a.gn-icon-help {
height: 60px;
width: 500px;
color: #000;
    text-shadow: 0 0 1px #ccc;
}

.gn-menu-main a.gn-icon-earth {
color: #000;
    text-shadow: 0 0 1px #ccc;
height: 60px;
}
.gn-menu-main a.gn-icon-photoshop {
height: 60px;
width: 500px;
}color: #000;
    text-shadow: 0 0 1px #ccc;
.gn-menu-main a.gn-icon-illustrator {
height: 60px;
color: #000;
    text-shadow: 0 0 1px #ccc;
}

.gn-menu-main a.gn-icon-archive {
height: 60px;
color: #000;
    text-shadow: 0 0 1px #ccc;
}

.gn-menu-main a.gn-icon-article {
height: 60px;
color: #000;
    text-shadow: 0 0 1px #ccc;
}

.gn-menu-main a.gn-icon-pictures {
height: 60px;
color: #000;
    text-shadow: 0 0 1px #ccc;
}
.gn-menu-main a.gn-icon-videos {
height: 60px;
color: #000;
    text-shadow: 0 0 1px #ccc;
}
.gn-menu-main a.gn-icon-cog {
height: 60px;
width: 500px;
color: #000;
    text-shadow: 0 0 1px #ccc;
}
.gn-menu-main a.gn-icon-search:hover {
position: relative;
top: 0;
left: 0;
height: 60px;
width: 500px;
color: #ceffff;
    text-shadow: 0 0 1px #ccc;
}
.gn-menu-main a.gn-icon-download:hover {
height: 60px;
color: #ceffff;
    text-shadow: 0 0 1px #ccc;
}

.gn-menu-main a.gn-icon-help:hover {
height: 60px;
width: 500px;
color: #ceffff;
    text-shadow: 0 0 1px #ccc;
}

.gn-menu-main a.gn-icon-earth:hover {
color: #ceffff;
    text-shadow: 0 0 1px #ccc;
height: 60px;
}
.gn-menu-main a.gn-icon-photoshop:hover {
height: 60px;
width: 500px;
}color: #ceffff;
    text-shadow: 0 0 1px #ccc;
.gn-menu-main a.gn-icon-illustrator:hover {
height: 60px;
color: #ceffff;
    text-shadow: 0 0 1px #ccc;
}

.gn-menu-main a.gn-icon-archive:hover {
height: 60px;
color: #ceffff;
    text-shadow: 0 0 1px #ccc;
}

.gn-menu-main a.gn-icon-article:hover {
height: 60px;
color: #ceffff;
    text-shadow: 0 0 1px #ccc;
}

.gn-menu-main a.gn-icon-pictures:hover {
height: 60px;
color: #ceffff;
    text-shadow: 0 0 1px #ccc;
}
.gn-menu-main a.gn-icon-videos:hover {
height: 60px;
color: #ceffff;
    text-shadow: 0 0 1px #ccc;
}
.gn-menu-main a.gn-icon-cog:hover {
height: 60px;
width: 500px;
color: #ceffff;
    text-shadow: 0 0 1px #ccc;
}
.gn-icon::before {
display: inline-block;
width: 60px;
text-align: center;
text-transform: none;
font-weight: normal;
font-style: normal;
font-variant: normal;
font-family: 'ecoicons';
line-height: 1;
speak: none;
-webkit-font-smoothing: antialiased;
}
.gn-icon-help::before {
content: url("http://2.bp.blogspot.com/-snqqiMbEru4/UsltX2wx4mI/AAAAAAAASNE/9Y9up9moS2A/s1600/5.png");
}
.gn-icon-earth::before {
content: url("http://2.bp.blogspot.com/-ZUDUdzGaHWc/UsltYUgGreI/AAAAAAAASNI/xdMlFYXY5Zc/s1600/6.png");
}
.gn-icon-cog::before {
content: url("http://3.bp.blogspot.com/-arXpG436oS0/UslvMlB-A_I/AAAAAAAASN4/A4XoMaTptWc/s1600/11.png");
}
.gn-icon-search::before {
content: url("http://3.bp.blogspot.com/-Sk1q1QQbyBo/Uslm3MHeRvI/AAAAAAAASMk/Gu4ratGom-k/s1600/2.png");
}
.gn-icon-download::before {
content: url("http://1.bp.blogspot.com/-pNIXZIa6Jp4/UslnpYFjLwI/AAAAAAAASMs/PPpRdnZxe_Q/s1600/3.png");
}
.gn-icon-photoshop::before {
content: url("http://3.bp.blogspot.com/-vK4fXpO0Csg/Usln_JQxcyI/AAAAAAAASM0/IJn6Vh5bi0s/s1600/4.png");
}
.gn-icon-illustrator::before {
content: url("http://3.bp.blogspot.com/-r4kx4tmxG1M/UslvLsFQksI/AAAAAAAASNw/i49R9AbB_s8/s1600/10.png");
}
.gn-icon-archive::before {
content: url("http://4.bp.blogspot.com/-4rVTM4hAIG4/UslvNl-9MFI/AAAAAAAASOA/Mg9IhM9doQE/s1600/12.png");
}
.gn-icon-article::before {
content: url("http://4.bp.blogspot.com/-H7AWutc5RqM/Uslua1ERLPI/AAAAAAAASNo/lEhPViUpVdY/s1600/9.png");
}
.gn-icon-pictures::before {
content: url("http://2.bp.blogspot.com/-mfeCRFoJ7Go/UsluaadR3ZI/AAAAAAAASNc/2fPnRrjuAwo/s1600/8.png");
}
.gn-icon-videos::before {
content: url("http://4.bp.blogspot.com/-MOFwoddgLl4/UsluZ-Knj9I/AAAAAAAASNY/tD5LCJVZX6A/s1600/7.png");
}
/* if an icon anchor has a span, hide the span */
.gn-icon span {
width: 0;
height: 0;
display: block;
overflow: hidden;
}
.gn-icon-menu::before {
margin-left: -15px;
vertical-align: -2px;
width: 30px;
height: 3px;
background: #5f6f81;
box-shadow: 0 3px white, 0 -6px #5f6f81, 0 -9px white, 0 -12px #5f6f81;
content: '';
}
.no-touch .gn-icon-menu:hover::before,
.no-touch .gn-icon-menu.gn-selected:hover::before {
background: white;
box-shadow: 0 3px #5f6f81, 0 -6px white, 0 -9px #5f6f81, 0 -12px white;
}
.gn-icon-menu.gn-selected::before {
background: #5993cd;
box-shadow: 0 3px white, 0 -6px #5993cd, 0 -9px white, 0 -12px #5993cd;
}
/* styles for opening menu */
.gn-menu-wrapper.gn-open-all,
.gn-menu-wrapper.gn-open-part {
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
transform: translateX(0px);
}
.gn-menu-wrapper.gn-open-all {
width: 340px
}
.gn-menu-wrapper.gn-open-all .gn-submenu li {
height: 60px
}
@media screen and (max-width: 422px) {
.gn-menu-wrapper.gn-open-all {
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
transform: translateX(0px);
width: 100%;
}
.gn-menu-wrapper.gn-open-all .gn-scroller {
width: 130%
}
}

Lo que esta en azul son las imágenes que se muestran en el menú si lo deseas cambiar ya sabes donde están


5- Por ultimo nos vamos a Diseño >> Agregamos un gadget >> HTML >> y pegamos lo siguiente:
<ul id="gn-menu" class="gn-menu-main">
<li class="gn-trigger">
<a class="gn-icon gn-icon-menu"><span>Menu</span></a>
<nav class="gn-menu-wrapper">
<div class="gn-scroller">
<ul class="gn-menu">
<li/>
<a class="gn-icon gn-icon-search" href="http://ghaabycaptor.blogspot.com/" target="_blank">Musicas</a>
</li>
<li>
<a class="gn-icon gn-icon-download" href="http://ghaabycaptor.blogspot.com/" target="_blank">Videos</a>
<ul class="gn-submenu">
<li><a class="gn-icon gn-icon-illustrator" href="http://ghaabycaptor.blogspot.com/" target="_blank">Deja tu mensaje</a></li>
<li><a class="gn-icon gn-icon-photoshop" href="http://ghaabycaptor.blogspot.com/" target="_blank">Tutoriales Photoshop</a></li>
</ul>
</li>
<li><a class="gn-icon gn-icon-cog" href="http://ghaabycaptor.blogspot.com/" target="_blank">Ayuda</a></li>
<li><a class="gn-icon gn-icon-help" href="http://ghaabycaptor.blogspot.com/" target="_blank">Mapa del sitio</a></li>
<li>
<a class="gn-icon gn-icon-archive" href="http://ghaabycaptor.blogspot.com/" target="_blank">Archivos</a>
<ul class="gn-submenu">
<li><a class="gn-icon gn-icon-article"  href="http://ghaabycaptor.blogspot.com/" target="_blank"">Articulos</a></li>
<li><a class="gn-icon gn-icon-pictures" href="http://ghaabycaptor.blogspot.com/" target="_blank">Recursos</a></li>
<li><a class="gn-icon gn-icon-videos" href="http://ghaabycaptor.blogspot.com/" target="_blank">Entretenimiento</a></li>
</ul>
</li>
</ul>
</div><!-- /gn-scroller -->
</nav>
</li>
<li><a href="http://ghaabycaptor.blogspot.com/">Ghaaby Captor</a></li>
<li><a class="codrops-icon codrops-icon-prev" href=""><span>Ver tutorial</span></a></li>
<li><a class="codrops-icon codrops-icon-drop" href=""><span>Bienvenidos al Blog de prueba</span></a></li>
</ul>


Todo lo que esta en rojo lo deben cambiar a su preferencia

6- Guarden los cambios y listo! :)

via Mary Lou

Gracias por tu visita!
avatar
26 de enero de 2014, 7:48

Wow muchas gracias por el aporte!!

avatar
Bam
Admin
26 de enero de 2014, 8:45

Éste me vendría genial porque mi menú verdaderamente está bien chafa, pero era el único que encontré y que fuerá facil de poner n.n
Gracias por el tuto!
Besos!

avatar
RainboWxMikA
Admin
26 de enero de 2014, 9:00

Me encanta este menu pero tengo una pregunta se puede poner un icono o texto en el cuadrito pequeño donde aparece el menu desplegable? Gracias por el menu ^_^

avatar
26 de enero de 2014, 9:06

Pues recuerda! que si no te sale igual al de blog de pruebas es porque debes modificar el estilo de tu blog dependiendo de tu plantilla! =)

avatar
26 de enero de 2014, 9:15

Pues si se puede .. debes ubicarte en el estilo y buscar este código

.gn-icon-menu:before

borra lo que contiene ese código y pega el siguiente:

.gn-icon-menu:before {
background: url("http://dl5.glitter-graphics.net/pub/369/369195adsuu9rgnl.gif");
content: "";
height: 150px;
margin-left: -25px;
vertical-align: -2px;
width: 50px;
margin-top: -15px;
}


con eso tendras un ejemplo y lo modificas a tu gusto! =)

avatar
Shine.
Admin
26 de enero de 2014, 9:27

¡Muuy chulo!
aunq no creo que lo ponga en mi blog jaja pero lo tendré en cuenta si hago cambios con los menús ;)
besitos<33

avatar
POPOTAN
Admin
26 de enero de 2014, 9:36

>.< Hey! que clase de cosa es esa?... bueno no me agrada mucho las cuenstas de google+ ya que la mayoria son muy complicadas (para mi) bueno la verdad que el efecto es muy bueno y hasta entretenido, pero como dices depende de la plantilla de ccada blog.-.. la verdad que lo intenté un dia, pero me destuyó toda mi plantilla, felizmente la guarde antes de cualquier cambio... bueno tambien por aqui para ver que nuevas... le verdad que renuncie al codigo de mi textarea... no sé que rayos pasa con la plantilla d emi blog, y bueno despues tratare de quitarle ese efecto a mis imagenes, pues he decidido no ponerles ningun efecto, aparte estare buscando uno especial.., que por ahi quise hacerle desde el principio de año a mi blog... bueno espero que estes bien y buen inicio de semana... besotes.

avatar
Genesis
Admin
26 de enero de 2014, 10:24

muchas gracias, la verdad ahora tengo flojera de hacerlo pero cuando me den ganas veré que mas tienes por alli para colocar en mi blog :D mi diseño es bien sencillo xD pero me gustaria mas cosas :/ saludos

avatar
RainboWxMikA
Admin
26 de enero de 2014, 14:04

Entonces genial puede que lo pruebe en el siguiente diseño,no creo que se vea bien porque tengo la plantilla demasiado modificada pero haber si tengo suerte y funciona, gracias por responder un saludo ^_^

avatar
26 de enero de 2014, 14:11

uuuyyy siii cada quien tendra su problemita diferente ami fue el texto a otros quien sabe XD

avatar
Citu
Admin
26 de enero de 2014, 19:29

Uy muchas gracias con el tutorial , aunque me da un poco de miedito meterme con el código htlm. Te mando un beso y te me cuidas y ya parece que ando mejor , posdata odio ir al medico.

avatar
Yurika
Admin
27 de enero de 2014, 1:37

muy buen tutorial y el menu es genial ^^ gracias

avatar
Neko-chan
Admin
27 de enero de 2014, 4:25

como siempre unos tutoriales tan geniales!! *0* aunque a mí no me gusta mucho el menú de g+ u.u
y como siempre digo, me encanta tu voz, es tan ashadjgashdfags (?) *^* ojala mi voz fuese así u.u
saluditos! ^^

avatar
27 de enero de 2014, 6:50

jajaja bronceados? XD bueno no todos tenemos el mismo gusto! mmmm pues me alegro que te guste mi voz aunque para mi es normal XD yo mas bien quisiera que mi voz pudiera cantar bonito XD

avatar
27 de enero de 2014, 7:01

JAJAJA si ami tambien meda miedo esos doctores pero a veces es necesario ir >.<

avatar
Lee Rae Mi
Admin
27 de enero de 2014, 18:58

Lokis^^ Gracias por la tutorial*///*
Sabes vi este estilo y se me parecio al de mi celular....Creo que
mi celu es algo raro.Pero de igual forma gracias,estoy
haciendo remo. nueva y de seguro esto sera util^^
saludos&abrazos via satelite{si no te llegan es culpa del internet -//-}

avatar
YoSueño
Admin
28 de enero de 2014, 3:40

Hola Ghaaby, estoy bien aunque un poco liada,este mes es el día de los cumpleaños, y también me he resfriado pero bueno ya paso todo, a ti te "veo" muy contenta y animada con tu trabajo el cual me alegro.Un ABRAZO
FELIZ DÍA

( lo que tenemos si lo miramos bien no sirve de nada, es una vieja creencia, pero no es fácil ni darse cuenta ni dejarla)

avatar
28 de enero de 2014, 9:31

Mmm me lo guardo por si acaso la lió con el mio poder arreglarlo jejeje
Un beso, nos leemos :)
La Mitad de tu Sonrisa
☮ + ⏃ + ∞ + Ϟ + ♥

avatar
28 de enero de 2014, 13:23

Estas recomendada! http://mundo-sofi.blogspot.com.ar/2014/01/primera-recomendacion-de-blogs-mundo.html

avatar
28 de enero de 2014, 14:12

waaaa arigato amiwa! lo vere cuando tenga chance :D

avatar
29 de enero de 2014, 15:51

*w* Tu blog se ve bellísimo!
Y esta super el tutorial!
Perdón por tanto tiempo sin pasar por aquí. Besos***

avatar
29 de enero de 2014, 22:56

hermoso menu gracias por compartirlo con nosotros

avatar
POPOTAN
Admin
30 de enero de 2014, 8:35

>.< Pasando por aqui para contar mi experiencia con este tutorial, Veras me animé a hacer el cambio... y como era de esperarse todo salio mal... me animaria a publicar cómo es que quedo el diseño de mi blog despues del cambio, pero la verdad es que me da miedo el desorden que tuve que regresarlo a como era antes... PERO algo raro hubo... ya que el Textarea se solucionó con el cambio... algo del diseño debe ser... asi que vere mas de cerca... besotes.

avatar
30 de enero de 2014, 9:37

JAJAJA TU BLOG SI QUE ES PROBLEMATICO BUENO TODOS LO SON! xD waaaa me alegro que se te quitara por lo menos lo del textarea puuuffff algo bueno te sucedio no todo salio mal XD

avatar
Lia A.G.
Admin
1 de febrero de 2014, 14:35

Uh, me ha encantado *-*