¿Cómo crear un Menú desplegable Responsive en mi blog de Blogger?
¿Necesito que mi menú desplegable se muestre correctamente en un teléfono Smartphone? ¿Cómo hacer que mi menú desplegable sea Responsive y se muestre perfectamente en un teléfono inteligente? ¿Menú desplegable para móviles? ¿Insertar un menú desplegable en mi blog de Blogger para que se muestre en teléfonos Smartphone? Disponer de varias herramientas importantes en nuestro blog de Blogger es una de las formas de llegar más lejos gracias a la evolución de su blog. Si necesitas tener un menú desplegable totalmente Responsive y que se muestre correctamente al abrir su blog desde un Teléfono, sigue las instrucciones al pie de la letra en este grandioso Tutorial de Blogger.
Características principales y ventajas del Menú Responsive para Blogger
Es totalmente Responsive, dispone de un ajuste automático a cualquier tamaño de pantalla móvil
Se mostrara sólo en los dispositivos móviles
Además dispone de un Responsive barra de búsqueda, los usuarios que visitan su blog desde un teléfono, puede navegar fácilmente a través de su sitio
Es compatible con todos los navegadores web
Su estructura anidada permite agregar submenús infinitas
Es Browser multiplataforma compatible
- El menú utiliza el plugin Superfish V 1.7.2 creado por Joel Brich, el cual tiene unos buenos efectos dinámicos de front-end. Superfish es un plugin de jQuery que añade mejoras en el uso de los menús desplegables de varios niveles.
Pueden ver su demostración en el siguiente blog de demos
Video Tutorial
Les gusto verdad!
Vamos a trabajar
1 Ir a Blogger
2 Un clic en “Plantilla”
3 Un clic en “Editar HTML”
Ahora se le abrirá el Editor HTML de tu plantilla
En este punto deberás presionar la tecla “Control” de su teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de su editor, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor, a continuación mire la imagen la cual le muestra como debe aparecerle el buscador en el editor HTML de su plantilla y así pueda colocar el código en el buscador al momento que yo diga busca este código.
4 Busca este código
<head>
Inserta las siguientes líneas de código justo abajo del código que encontraste
<script
src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'
type='text/javascript'/>
<link
href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css'
rel='stylesheet'/>
<link href='http://fonts.googleapis.com/css?family=Oswald'
rel='stylesheet' type='text/css'/>
|
5 Busca este otro código
</head>
Inserta las siguientes líneas de código justo arriba del código que encontraste
<style>
.sf-menu
a.home:before,#searchnya button:before{position:absolute;font-family:FontAwesome;font-weight:400;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased}.highlight{background-color:#f09903;color:#1a1308}#searchnya{float:right;width:80%;position:relative;right:0}.siy{bottom:0;left:0;background:none;font-size:19px;color:#fff}#searchnya
input{padding:5px 10px;width:75%;margin:5px 0
0;background-color:#FFF;height:21px;box-shadow:1px 2px 4px #A2A2A2
inset;position:relative}#searchnya input,#searchnya button{border:0;-moz-border-radius:1px;-webkit-border-radius:1px;border-radius:1px;display:inline-block;outline:0;font-size:14px;font-family:oswald;color:#BDB5B5;font-weight:400}#searchnya
button{background-color:#2f5bb7;padding:0;width:15%;height:31px;margin-right:5px;cursor:pointer;position:relative;top:0}#searchnya
button:hover{background:#76D314}
#navitions{background-color:#242729;border-bottom:0px solid
#2f5bb7;box-shadow:0 1px 9px
#666;display:none}#mobilenav{display:none}#nav1{height:40px;position:relative;background:#242729;box-shadow:1px
2px 9px #2f5bb7}.sf-menu,.sf-menu
*{list-style:none;margin:0;padding:0}.sf-menu
li{white-space:normal;-moz-transition:background-color
.2s;-webkit-transition:background-color .2s;transition:background-color
.2s;position:relative}.sf-menu
ul{position:absolute;display:none;top:100%;left:0;z-index:99;min-width:12em;padding-top:4px;width:100%}.sf-menu
> li{float:left;text-align:left;margin:0 1px}.sf-menu li:hover
> ul,.sf-menu li.sfHover > ul{display:block}.sf-menu a{display:block;position:relative;height:40px;line-height:40px;text-decoration:none;zoom:1;color:#FFF;font-size:100%;padding:0
15px; font-family:oswald; -webkit-transition:all .4s ease-in-out;
-moz-transition:all .4s ease-in-out; -o-transition:all .4s ease-in-out;
-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;}.sf-menu
> li > a{font-size:105%;font-family:oswald}.sf-menu ul
ul{top:0;left:100%}.sf-menu{float:left}.sf-menu
a.home{background-color:#A30000;margin-left:4px;text-indent:-9999px;padding:0}.sf-menu
li:hover{background:#222}.sf-menu ul li{background-color:#242729}.sf-menu ul
li:hover{background-color:#333}.sf-menu ul
a{font-weight:400;height:30px;line-height:30px;font-family:oswald,arial}.sf-menu
ul ul li{background:#3C3C3C}.sf-menu li:hover > a,.sf-menu
li.sfHover,.sf-menu > li >
a.current{-moz-transition:none;-webkit-transition:none;transition:none}.sf-arrows
.sf-with-ul{padding-right:1em}.sf-arrows
.sf-with-ul:after{content:'';position:absolute;top:50%;right:.75em;margin-top:-3px;height:0;width:0;border:5px
solid transparent;border-top-color:#FFF}.sf-arrows > li >
.sf-with-ul:focus:after,.sf-arrows > li:hover >
.sf-with-ul:after,.sf-arrows > .sfHover > .sf-with-ul:after{border-top-color:#FFF}.sf-arrows
ul
.sf-with-ul:after{margin-top:-5px;margin-right:-3px;border-color:transparent
transparent transparent #FFF}.sf-arrows ul li >
.sf-with-ul:focus:after,.sf-arrows ul li:hover >
.sf-with-ul:after,.sf-arrows ul .sfHover > .sf-with-ul:after{border-left-color:#FFF}.sf-menu
li >
i{position:absolute;top:15px;right:15px;width:27px;height:22px;cursor:pointer;display:none;background-color:#2f5bb7;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;outline:0;font:12px
Verdana,Geneva,sans-serif}.sf-menu li >
i:after{content:'+';color:#FFF;font-size:19px;position:absolute;left:5px;top:-2px}.sf-menu
li ul li i:after{left:3px;font-size: 16px;top: -1px;} .sf-menu li ul li
i.active:after {left: 4px;font-size:
26px;top: -8px;}
.sf-menu li > ul li
i{border-radius:100px;-webkit-border-radius:100px;-moz-border-radius:100px;
width:20px; height:20px;}
.sf-menu li >
i.active:after{content:'-';font-size:36px;top:-14px}.sf-menu
a.home{position:relative}.sf-menu a.home:before{position:absolute;font-family:FontAwesome;font-weight:400;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;height:30px;top:0;font-size:27px;left:9px}.sf-menu
a.home:before,#view a:before{text-indent:0}html {-webkit-text-size-adjust:
100%;}
@media only screen and
(max-width:320px){#searchnya input{width:67%}}
@media only screen and
(max-width:768px) {
#navitions{display:block}#nav1{width:100%}#mobilenav{display:block;text-indent:-9999px;width:35px;top:4px;left:10px;position:absolute;height:32px;outline:0;background-color:#2f5bb7;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;color:#FFF;text-decoration:none}#mobilenav.active{color:#fff}#mobilenav:before{content:"\f0c9";top:3px;text-indent:0;left:7px;font-size:26px}#menunav{float:none;display:none;position:absolute;top:45px;left:10px;right:10px;z-index:99999999;background-color:#242729;padding:5px
10px}#menunav li{float:none;margin:0}#menunav > li{margin:1px
0}.sf-menu a.home,.sf-menu
a{text-indent:0;margin-left:0;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;background-color:#1D1D1D!important;padding:5px
20px;border:0}.sf-menu a:hover{background-color:#2c2c2c!important}.sf-menu
ul{position:static;padding-top:0}.sf-menu ul a{padding-left:30px}.sf-menu ul
ul li a{padding-left:50px; }.sf-menu ul ul ul li a{padding-left:60px;
}.sf-menu a.home,.sf-menu li:hover > a.home,.sf-menu > li
> a.current{color:#FFF;background-color:#cd2122}.sf-menu ul a:hover{padding-left:40px}.sf-menu
ul ul a:hover{padding-left:60px}.sf-menu a.home:before,.sf-menu li:hover
> ul,.sf-menu li.sfHover > ul{display:none}.sf-menu ul
li,.sf-menu ul ul li,.sf-menu li:hover > a,.sf-menu
li.sfHover{background-color:transparent}.sf-menu a.home:before,#mbt-search-layout
button:before,#mobilenav:before{position:absolute;font-family:FontAwesome;font-weight:400;font-style:normal;text-decoration:inherit}
}
</style>
<script
type='text/javascript'>
//<![CDATA[
// Superfish v1.7.2 -
jQuery menu widget - Joel Brich
(function(b){var
a=(function(){var
p={bcClass:"sf-breadcrumb",menuClass:"sf-js-enabled",anchorClass:"sf-with-ul",menuArrowClass:"sf-arrows"},f=/iPhone|iPad|iPod/i.test(navigator.userAgent),k=(function(){var
c=document.documentElement.style;return("behavior" in
c&&"fill" in
c&&/iemobile/i.test(navigator.userAgent))})(),d=(function(){if(f){b(window).load(function(){b("body").children().on("click",b.noop)})}})(),m=function(s,t){var
c=p.menuClass;if(t.cssArrows){c+=" "+p.menuArrowClass}s.toggleClass(c)},r=function(c,s){return
c.find("li."+s.pathClass).slice(0,s.pathLevels).addClass(s.hoverClass+"
"+p.bcClass).filter(function(){return(b(this).children("ul").hide().show().length)}).removeClass(s.pathClass)},n=function(c){c.children("a").toggleClass(p.anchorClass)},g=function(c){var
s=c.css("ms-touch-action");s=(s==="pan-y")?"auto":"pan-y";c.css("ms-touch-action",s)},j=function(t,u){var
c="li:has(ul)";if(b.fn.hoverIntent&&!u.disableHI){t.hoverIntent(l,h,c)}else{t.on("mouseenter.superfish",c,l).on("mouseleave.superfish",c,h)}var
s="MSPointerDown.superfish";if(!f){s+="
touchend.superfish"}if(k){s+="
mousedown.superfish"}t.on("focusin.superfish","li",l).on("focusout.superfish","li",h).on(s,"a",i)},i=function(t){var
s=b(this),c=s.siblings("ul");if(c.length>0&&c.is(":hidden")){s.one("click.superfish",false);if(t.type==="MSPointerDown"){s.trigger("focus")}else{b.proxy(l,s.parent("li"))()}}},l=function(){var
c=b(this),s=o(c);clearTimeout(s.sfTimer);c.siblings().superfish("hide").end().superfish("show")},h=function(){var
c=b(this),s=o(c);if(f){b.proxy(q,c,s)()}else{clearTimeout(s.sfTimer);s.sfTimer=setTimeout(b.proxy(q,c,s),s.delay)}},q=function(c){c.retainPath=(b.inArray(this[0],c.$path)>-1);this.superfish("hide");if(!this.parents("."+c.hoverClass).length){c.onIdle.call(e(this));if(c.$path.length){b.proxy(l,c.$path)()}}},e=function(c){return
c.closest("."+p.menuClass)},o=function(c){return
e(c).data("sf-options")};return{hide:function(s){if(this.length){var
v=this,w=o(v);if(!w){return this}var
t=(w.retainPath===true)?w.$path:"",c=v.find("li."+w.hoverClass).add(this).not(t).removeClass(w.hoverClass).children("ul"),u=w.speedOut;if(s){c.show();u=0}w.retainPath=false;w.onBeforeHide.call(c);c.stop(true,true).animate(w.animationOut,u,function(){var
x=b(this);w.onHide.call(x)})}return this},show:function(){var
t=o(this);if(!t){return this}var
s=this.addClass(t.hoverClass),c=s.children("ul");t.onBeforeShow.call(c);c.stop(true,true).animate(t.animation,t.speed,function(){t.onShow.call(c)});return
this},destroy:function(){return this.each(function(){var
s=b(this),t=s.data("sf-options"),c=s.find("li:has(ul)");if(!t){return
false}clearTimeout(t.sfTimer);m(s,t);n(c);g(s);s.off(".superfish").off(".hoverIntent");c.children("ul").attr("style",function(u,v){return
v.replace(/display[^;]+;?/g,"")});t.$path.removeClass(t.hoverClass+"
"+p.bcClass).addClass(t.pathClass);s.find("."+t.hoverClass).removeClass(t.hoverClass);t.onDestroy.call(s);s.removeData("sf-options")})},init:function(c){return
this.each(function(){var t=b(this);if(t.data("sf-options")){return
false}var
u=b.extend({},b.fn.superfish.defaults,c),s=t.find("li:has(ul)");u.$path=r(t,u);t.data("sf-options",u);m(t,u);n(s);g(t);j(t,u);s.not("."+p.bcClass).superfish("hide",true);u.onInit.call(this)})}}})();b.fn.superfish=function(d,c){if(a[d]){return
a[d].apply(this,Array.prototype.slice.call(arguments,1))}else{if(typeof
d==="object"||!d){return a.init.apply(this,arguments)}else{return
b.error("Method "+d+" does not exist on jQuery.fn.superfish")}}};b.fn.superfish.defaults={hoverClass:"sfHover",pathClass:"overrideThisToUse",pathLevels:1,delay:800,animation:{opacity:"show"},animationOut:{opacity:"hide"},speed:"normal",speedOut:"fast",cssArrows:true,
disableHI:false,onInit:b.noop,onBeforeShow:b.noop, onShow:b.noop,onBeforeHide:b.noop,onHide:b.noop,onIdle:b.noop,
onDestroy:b.noop};b.fn.extend({hideSuperfishUl:a.hide,showSuperfishUl:a.show})})(jQuery);
function
menunav(b){b("#mobilenav").click(function(){b("#menunav").slideToggle();b(this).toggleClass("active");return
false});b(".sf-menu ul").each(function(){var
d=b(this).parent("li");d.append("<i></i>")});function
a(){var
d=b(window).width();if(d>979){b("#menunav").css("display","block");b("#menunav").superfish({animation:{height:"show"},animationOut:{height:"hide"}});b(".sf-menu
i").css("display","none")}else{if(d<=979&&b("#mobilenav").attr("class")==="active"){b("#menunav").css("display","block");b("#menunav").superfish("destroy");b(".sf-menu
i").css("display","block")}else{if(d<=979&&b("#mobilenav").attr("class")!=="active"){b("#menunav").css("display","none");b("#menunav").superfish("destroy");b(".sf-menu
i").css("display","block")}}}}a();b(window).resize(a);b(".sf-menu
i").click(function(){var d=b(this).parent("li");var
e=d.children("ul");e.slideToggle();b(this).toggleClass("active");return
false});var c=window.location.href;b("#menunav
a").each(function(){if(this.href===c){var
d=b(this).parents("li").children("a").addClass("current")}})};
//]]>
</script>
|
6 Eso es todo, es momento de dar un clic en “Guardar plantilla”
7 Un clic en "Diseño"
8 Un clic en "Añadir un gadget"
9 Busca el widget que dice "HTML/Javascript" ábrelo,
10 Ingresa las siguiente lineas de código en su interior
7 Un clic en "Diseño"
8 Un clic en "Añadir un gadget"
9 Busca el widget que dice "HTML/Javascript" ábrelo,
10 Ingresa las siguiente lineas de código en su interior
<div id='navitions'>
<div class='isi'>
<nav class='navix'
id='nav1'>
<div id='searchnya'>
<form
action='/search'>
<input name='q'
onblur='if ('' === this.value) {this.value =
'Buscar…';}' onfocus='if ('Buscar…' ===
this.value) {this.value = '';}' type='text'
value='Buscar…'/>
<button
title='Buscar' type='submit'>
<i
class='fa fa-search siy'/>
</button>
</form>
</div>
<a href='#'
id='mobilenav'>
Seleccione Menú
</a>
<ul
class='sf-menu' id='menunav'>
<li>
<a
class='home' expr:href='data:blog.homepageUrl'>
Inicio
</a>
</li>
<li><a href="Aquí
la dirección URL del post#">Tema 1</a>
<ul>
<li><a href="Aquí
la dirección URL del post#">Menú desplegable 1.1</a></li>
<li><a href="Aquí
la dirección URL del post#">Menú desplegable 1.2</a></li>
<li><a href="Aquí
la dirección URL del post#">Menú desplegable 1.3</a></li>
</ul>
</li>
<li><a href="Aquí la
dirección URL del post#">Tema 2</a>
<ul>
<li><a href="Aquí
la dirección URL del post#">Menú desplegable 2.1</a></li>
<li><a href="Aquí
la dirección URL del post#">Menú desplegable 2.2</a></li>
<li><a href="Aquí
la dirección URL del post#">Menú desplegable 2.3</a></li>
</ul>
</li>
<li><a href="Aquí la
dirección URL del post#">Tema 3</a>
<ul>
<li><a href="Aquí
la dirección URL del post#">Menú desplegable 3.1</a></li>
<li><a href="Aquí
la dirección URL del post#">Menú desplegable 3.2</a></li>
<li><a href="Aquí
la dirección URL del post#">Menú desplegable 3.3</a></li>
</ul>
</li>
<li><a href="Aquí la
dirección URL del post#">Tema 4</a>
<ul>
<li><a href="Aquí
la dirección URL del post#">Menú desplegable 4.1</a></li>
<li><a href="Aquí
la dirección URL del post#">Menú desplegable 4.2</a></li>
<li><a href="Aquí
la dirección URL del post#">Menú desplegable 4.3</a></li>
</ul>
</li>
<li><a href="Aquí la
dirección URL del post#">Tema 5</a>
<ul>
<li><a href="Aquí
la dirección URL del post#">Menú desplegable 5.1</a></li>
<li><a href="Aquí
la dirección URL del post#">Menú desplegable 5.2</a></li>
<li><a href="Aquí
la dirección URL del post#">Menú desplegable 5.3</a></li>
</ul>
</li>
<li><a href="Aquí la dirección URL del post#">Contactos
</a></li>
</ul>
<script
type='text/javascript'>
//<![CDATA[
menunav (jQuery);
//]]>
</script>
</nav>
</div>
</div>
|
Realiza estos cambios:
He marcado de tres diferentes colores en los lugares que deben realizar sus cambios
- Elimina las palabras que están marcadas de color azul Aquí la dirección URL del post# y cámbialas por la dirección URL del post que quieras mostrar en cada lugar
- Cambia todas las palabras que están marcadas de color rojo Tema 1 por el nombre que quieras mostrar
- Y por último elimina las palabras que están marcadas de color verde Menú desplegable 1.1 por el nombre que tú quieras.
11 Eso es todo, un clic en "Guardar"
Nota: para ver este menú desplegable Responsive, debes Minimizar el tamaño de tu Navegador web o a su vez ver cómo funciona desde su teléfono inteligente o Tableta.
- Ahora para que el Menú Responsive desplegable se muestre en un teléfono inteligente, siga las instrucciones del siguiente tutorial, en el cual se explica cómo habilitar los widgets en un teléfono inteligente.
¡Fácil verdad!
¿Necesitas ayuda?
Cualquier pregunta no duden en hacérmelo saber
Más, sobre Menú desplegables:
Recuerda suscribirte:
Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
0 comments:
Publicar un comentario