BLOGUERO TUTORIAL

Un bloguero Practicando
» » » Crear barra de menú desplegable Responsive en Blogger

Crear barra de menú desplegable Responsive en Blogger

Crear barra de menú desplegable Responsive en Blogger

Comparteme :


Un menú Responsive es del tipo moderno de la barra de navegación que puede no ser el mismo todos los dispositivos, tiene códigos especiales para cambiar el tamaño con el ancho de la plataforma del usuario siempre que sea necesario. Si un usuario visita su blog a través de escritorio, a continuación, se ve como un menú tradicional, pero cuando alguien acceso a tu blog a través de un teléfono inteligente o tableta a continuación, se ve como una aplicación móvil. Como sabemos el uso de los móviles y las tabletas están aumentando día a día. Usted se ha notado que muchos visitantes están accediendo a tu blog a través de los teléfonos móviles. Por lo que esta muy importante para hacer que su blog móvil amigable.

Para crear un menú de respuesta en blogger , tendrá que añadir el siguiente código HTML, CSS y jQuery en su blog. Cómo agregar el siguiente código en tu blog, sólo tiene que seguir los siguientes pasos simples.

  • Iniciar sesión su cuenta de blogger y seleccionar un blog que quiere añadir este menú sensible.
  • Ir a la plantilla >> editar HTML.
  • Después de la apertura de su plantilla del blog toda codificación, buscar <head> y pegar los enlaces de abajo justo encima de él.

<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src='http://codepen.io/thebloggerguide/pen/GjLRkY.js' type='text/javascript'></script>

Añadir código CSS
Después de la finalización de la etapa anterior, ahora es necesario agregar el código CSS siguiente para su blog. Para añadir esto, en primer lugar, haga clic en el botón de vista de código y copiar el código todos los CSS y luego buscar ]]></b:skin> en la plantilla de su blog y pegar el código copiado justo encima de él.

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,700,800);


    margin: 0;
    padding: 0;
}

article,aside,figure,footer,header,hgroup,nav,section {
    display: block;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html {
    -webkit-font-smoothing: antialiased;
}

a {
    color: #BA0707;
    text-decoration: none;
}

a:hover {
    color: #BA0707;
}

body {
    background: #e5e5e5;
    color: #374147;
    font: 14px "Open Sans",Helvetica,Arial,sans-serif;
    -webkit-font-smoothing: antialiased;
    line-height: 1;
    width: 100%;
}

nav {
    display: block;
    margin-top: 100px;
    background: #374147;
}

.menu {
    display: block;
}

.menu li {
    display: inline-block;
    position: relative;
    z-index: 100;
}

.menu li:first-child {
    margin-left: 0;
}

.menu li a {
    font-weight: 600;
    text-decoration: none;
    padding: 20px 15px;
    display: block;
    color: #fff;
    transition: all 0.2s ease-in-out 0s;
}

.menu li a:hover,.menu li:hover>a {
    color: #fff;
    background: #F70000;
}

.menu ul {
    visibility: hidden;
    opacity: 0;
    margin: 0;
    padding: 0;
    width: 150px;
    position: absolute;
    left: 0px;
    background: #fff;
    z-index: 99;
    transform: translate(0,20px);
    transition: all 0.2s ease-out;
}

.menu ul:after {
    bottom: 100%;
    left: 20%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: #fff;
    border-width: 6px;
    margin-left: -6px;
}

.menu ul li {
    display: block;
    float: none;
    background: none;
    margin: 0;
    padding: 0;
}

.menu ul li a {
    font-size: 12px;
    font-weight: normal;
    display: block;
    color: #797979;
    background: #fff;
}

.menu ul li a:hover,.menu ul li:hover>a {
    background: #F70000;
    color: #fff;
}

.menu li:hover>ul {
    visibility: visible;
    opacity: 1;
    transform: translate(0,0);
}

.menu ul ul {
    left: 149px;
    top: 0px;
    visibility: hidden;
    opacity: 0;
    transform: translate(20px,20px);
    transition: all 0.2s ease-out;
}

.menu ul ul:after {
    left: -6px;
    top: 10%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(255, 255, 255, 0);
    border-right-color: #fff;
    border-width: 6px;
    margin-top: -6px;
}

.menu li>ul ul:hover {
    visibility: visible;
    opacity: 1;
    transform: translate(0,0);
}

.responsive-menu {
    display: none;
    width: 100%;
    padding: 20px 15px;
    background: #374147;
    color: #fff;
    text-transform: uppercase;
    font-weight: 600;
}

.responsive-menu:hover {
    background: #374147;
    color: #fff;
    text-decoration: none;
}

a.homer {
    background: #F70000;
}

@media (min-width: 768px) and (max-width: 979px) {
    .mainWrap {
        width: 768px;
    }

    .menu ul {
        top: 37px;
    }

    .menu li a {
        font-size: 12px;
    }

    a.homer {
        background: #374147;
    }
}

@media (max-width: 767px) {
    .mainWrap {
        width: auto;
        padding: 50px 20px;
    }

    .menu {
        display: none;
    }

    .responsive-menu {
        display: block;
        margin-top: 100px;
    }

    nav {
        margin: 0;
        background: none;
    }

    .menu li {
        display: block;
        margin: 0;
    }

    .menu li a {
        background: #fff;
        color: #797979;
    }

    .menu li a:hover,.menu li:hover>a {
        background: #F70000;
        color: #fff;
    }

    .menu ul {
        visibility: hidden;
        opacity: 0;
        top: 0;
        left: 0;
        width: 100%;
        transform: initial;
    }

    .menu li:hover>ul {
        visibility: visible;
        opacity: 1;
        position: relative;
        transform: initial;
    }

    .menu ul ul {
        left: 0;
        transform: initial;
    }

    .menu li>ul ul:hover {
        transform: initial;
    }
}

@media (max-width: 480px) {
}

@media (max-width: 320px) {
}

Añadir código HTML
Adición de HTML a tu blog depende de usted, en el que desea que aparezca el menú en tu blog. Si desea que aparezca después de la cabecera, a continuación, busque </header> la etiqueta y pegar el siguiente código justo debajo de él.

<nav>
<a class="responsive-menu" href="#" id="resp-menu"><i class="fa fa-reorder"></i> Menu</a>    
   <ul class="menu">
<li><a class="homer" href="#"><i class="fa fa-home"></i> HOME</a>
   <ul class="sub-menu">
<li><a href="#">Sub-Menu 1</a></li>
<li><a href="#">Sub-Menu 2</a></li>
<li><a href="#">Sub-Menu 3</a></li>
<li><a href="#">Sub-Menu 4</a></li>
<li><a href="#">Sub-Menu 5</a></li>
</ul>
</li>
<li><a href="#"><i class="fa fa-user"></i> ABOUT</a></li>
<li><a href="#"><i class="fa fa-camera"></i> PORTFOLIO</a>
  <ul class="sub-menu">
<li><a href="#">Sub-Menu 1</a></li>
<li><a href="#">Sub-Menu 2</a>
    <ul>
<li><a href="#">Sub Sub-Menu 1</a></li>
<li><a href="#">Sub Sub-Menu 2</a></li>
<li><a href="#">Sub Sub-Menu 3</a></li>
<li><a href="#">Sub Sub-Menu 4</a></li>
<li><a href="#">Sub Sub-Menu 5</a></li>
</ul>
</li>
<li><a href="#">Sub-Menu 3</a>
    <ul>
<li><a href="#">Sub Sub-Menu 1</a></li>
<li><a href="#">Sub Sub-Menu 2</a></li>
<li><a href="#">Sub Sub-Menu 3</a></li>
<li><a href="#">Sub Sub-Menu 4</a></li>
<li><a href="#">Sub Sub-Menu 5</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#"><i class="fa fa-bullhorn"></i> BLOG</a></li>
<li><a href="#"><i class="fa fa-tags"></i> CATEGORIES</a>
  <ul class="sub-menu">
<li><a href="#">Sub-Menu 1</a></li>
<li><a href="#">Sub-Menu 2</a>
    <ul>
<li><a href="#">Sub Sub-Menu 1</a></li>
<li><a href="#">Sub Sub-Menu 2</a></li>
<li><a href="#">Sub Sub-Menu 3</a></li>
<li><a href="#">Sub Sub-Menu 4</a></li>
<li><a href="#">Sub Sub-Menu 5</a></li>
</ul>
</li>
<li><a href="#">Sub-Menu 3</a>
    <ul>
<li><a href="#">Sub Sub-Menu 1</a></li>
<li><a href="#">Sub Sub-Menu 2</a></li>
<li><a href="#">Sub Sub-Menu 3</a></li>
<li><a href="#">Sub Sub-Menu 4</a></li>
<li><a href="#">Sub Sub-Menu 5</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#"><i class="fa fa-envelope"></i> CONTACT</a></li>
<li><a href="#"><i class="fa fa-sitemap"></i> SITEMAP</a></li>
<li><a href="http://www.thebloggerguide.com/"><i class="fa fa-exclamation-triangle"></i> DISCLAIMER </a></li>
</ul>
</nav>

Demostración



Comparteme :
Bloguero Tutorial

Author :

Soy el creador y editor de éste blog, cree este blog porque me encanta escribir sobre tecnología e internet, diseño web, y recursos para webmasters y Bloggers. Además, mi único propósito, es divertirme y de paso si ayudo a otras personas, mucho mejor. , click aquí ?
Crear barra de menú desplegable Responsive en Blogger.
Comparte
Facebook
Twitter
Google+

Artículos Relacionados

3 comentarios

avatar
responde
Bloguero Tutorial delete 14 de marzo de 2017, 18:24

Hola Series Ziu.
Tienes que regular los Style CSS para que te quede bien, Saludos.

avatar
responde
Carlos Fernández delete 19 de abril de 2017, 23:04
Este comentario ha sido eliminado por el autor.
avatar
responde
Bloguero Tutorial delete 7 de mayo de 2017, 10:30

Hola Información variada 360 Déjame tu correo y te ayudo a organizar tu menu
https://www.facebook.com/bloguerotutorial/

Tu mensaje sera visible tras la aprobación del administrador