Menú Material Desing ~ Blogueandomiblog

Este menú es responsive, y se puede usar desde cualquier dispositivo.

Está inspirado en material Design de Google, que se tranforma a un menú horizontal en un menú fuera del blog.

¿Cómo cambiar de color al Mega Menú Material design?

Tendrá que buscar el siguiente código

#C3272B

Cambie la linea de código por una de la siguiente lista de colores
Código de colores Material design

Foreign crimson #C91F37

Red orange #DC3023

Cochineal red #9D2933

Monza #CF000F

Brewed mustard-brown #E68364

Pomegranate #F22613

Scarlet #CF3A24

Pure crimson #C3272B

True red #8F1D21

Chestnut Rose #D24D57

One kin dye #F08F907

Peach-colored #F47983

Red plum colored #DB5A6B

Medium crimson #C93756

Cherry blossom color #FCC9B9

Washed-out crimson #FFB3A7

RADICAL RED #F62459

Ibis wing color #F58F84

Wisteria purple #875F9A

Bellflower color #5D3F6A

Wisteria color #89729E

Iris color #763568

Tatarian aster color #8D608C

Thin color #A87CA0

Violet color #5B3256

MEDIUM PURPLE #BF55EC

STUDIO #8E44AD

WISTERIA #9B59B6

LIGHT WISTERIA #BE90D4

Sky color #4D8FAC

Ultramarine color #5D8CAE

PICTON BLUE #22A7F0

DODGER BLUE #19B5FE

PICTON BLUE #59ABE3

Light blue color #48929B

Thousand herb #317589

JORDY BLUE #89C4F4

STEEL BLUE #4B77BE

Lapis lazuli color #1F4788

Navy blue color #003171

Hanada #044F67

Indigo color #264348

Siskin sprout yellow #7A942E

young green onion #8DB255

Fresh onion #5B8930

Young bamboo color #6B9362

Patina #407A52

Green bamboo #006442

GOSSIP #87D37C

EUCALYPTUS #26A65B

JUNGLE GREEN #26C281

OBSERVATORY #049372

JUNGLE GREEN #2ABB9B

MOUNTAIN MEADOW #16A085

TURQUOISE #36D7B7

FREE SPEECH AQUAMARINE #03A678

OCEAN GREEN #4DAF7C

Patrinia flowers #D9B611

Amur cork tree #F3C13A

RIPE LEMON #F7CA18

Japanese triandra grass #E2B13C

Rapeseed oil-colored #A17917

CREAM CAN #F5D76E

SAFFRON #F4D03F

Bright golden yellow #FFA400

Sumac-dyed #E08A1E

Gamboge #FFB61E

Corn-colored #FAA945

Egg-colored #FFA631

Floral leaf-colored #FFB94E

Golden fallen leaves #E29C45

ECSTASY #F9690E

Amber #CA6924

LIGHTNING YELLOW #F5AB35

SILVER #BFBFBF

CARARRA #F2F1EF

SILVER SAND #BDC3C7

PORCELAIN #ECF0F1

PUMICE #D2D7D3

Harbor rat #757D75

GALLERY #EEEEEE

EDWARD #ABB7B7

LYNCH #6C7A89

CASCADE #95A5A6

Nota:Antes de realizar cualquier cambio en nuestro blog, tendremos que realizar una copia de seguridad del mismo por si algo no sale bien.
Puedes ver en este post como lo hacemos paso a paso

Código de colores Material design

A continuación mire su demostración
Insertar codigo CSS

Nos vamos a Tema > Editar HTML.
En nuestra plantilla buscamos <head>
Justo después de este código incrustamos el siguiente código CSS.

<link href='https://fonts.googleapis.com/icon?family=Material+Icons' rel='stylesheet'/>
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css' rel='stylesheet'/>
.

Insertar el Script
Seguimos en nuestra plantilla a buscamos </head>
Justo encima pegamos este otro código

Ahora vamos a darle forma.
Buscamos en nuestra plantilla <body>
Justo antes pegamos este otro:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
/*<![CDATA[*/
var iQ=setInterval(function(){window.jQuery&&(clearInterval(iQ),jQuery(document).ready(function(){jQuery(window).scroll(function(){jQuery(this).scrollTop()>500?jQuery(".scrollup").fadeIn():jQuery(".scrollup").fadeOut()}),jQuery(".scrollup").click(function(){return jQuery("html, body").go-adb({scrollTop:0},600),!1}),jQuery(".fancybox").fancybox(),jQuery('a[href$=".png"], a[href$=".PNG"], a[href$=".jpg"], a[href$=".JPG"], a[href$=".gif"], a[href$=".GIF"]').each(function(){jQuery(this).addClass("fancybox")}),jQuery(".menu-btn").on("click",function(){jQuery(".main-menu").toggleClass("active")}),jQuery(".main-menu a").on("click",function(){jQuery(".main-menu").hasClass("active")&&jQuery(".main-menu").removeClass("active")}),jQuery(document).on("click",function(e){jQuery(e.target).closest(".menu-wrapper").length||jQuery(".main-menu").removeClass("active"),e.stopPropagation()})}))});
/*]]>*/
</script>

<script type='text/javascript'>
$(document).ready(function(){$("#mega-informa").click(function(){$("#nav-menu1").toggleClass("shows");});});
$(document).ready(function(){$(".toggleMenu").click(function(){$(".dropdowns").toggleClass("shows");});});
$(document).ready(function(){$(".oscuro,#closedrop").click(function(){$(".dropdowns,.oscuro").removeClass("shows");});});
$(document).ready(function(){$(".toggleMenu").click(function(){$(".oscuro").toggleClass("shows");});});
$(document).ready(function(){$("#show-menu-small").click(function(){$("#mega-menu-material,.adb-open").toggleClass("shows");});});
$(document).ready(function(){$(".adb-open").click(function(){$("#mega-menu-material,.adb-open").removeClass("shows");});});

//<![CDATA[
// Mega menu Nav
var Script=function(){jQuery('.mega-menu-nav .sub-menu > a').click(function(){var last=jQuery('.sub-menu.open',$('.mega-menu-nav'));last.removeClass("open");jQuery('.dropdown').addClass("open");jQuery('.dropdown',last).removeClass("open");jQuery('.sub',last).slideUp(300);var sub=jQuery(this).next();if(sub.is(":visible")){jQuery('.dropdown',jQuery(this)).removeClass("open");jQuery(this).parent().removeClass("open");sub.slideUp(300)}else{jQuery('.dropdown',jQuery(this)).addClass("open");jQuery(this).parent().addClass("open");sub.slideDown(300)}var o=($(this).offset());diff=300-o.top;if(diff>0)$(".mega-menu-nav").scrollTo("-="+Math.abs(diff),500);else $(".mega-menu-nav").scrollTo("+="+Math.abs(diff),500)})}();
//]]>

</script>

<script type='text/javascript'>
//<![CDATA[
$(function() {
    var ink, d, x, y;
    $(".adb-th").click(function(e) {
        if ($(this).find(".ink").length === 0) {
            $(this).prepend("<span class='ink'></span>");
        }
       ink = $(this).find(".ink");
        ink.removeClass("go-adb");
        if (!ink.height() && !ink.width()) {
            d = Math.max($(this).outerWidth(), $(this).outerHeight());
            ink.css({
                height: d,
                width: d
            });
        }
        x = e.pageX - $(this).offset().left - ink.width() / 2;
        y = e.pageY - $(this).offset().top - ink.height() / 2;
        ink.css({
            top: y + 'px',
            left: x + 'px'
        }).addClass("go-adb");
    });
});

//]]>
</script>

El último código
Seguimos en nuestra plantilla y buscamos <body>.
Pega este código justo debajo

<section id='header-wrapper-menu'>
<div class='header-mega-menu'>
<div class='main-header'>
<a class='toggleMenu adb-th' href='javascript:;'><i class='material-icons'>menu</i></a>
<div class='mover-up'>
<a expr:href='data:blog.homepageUrl' rel='nofollow'><data:blog.title/></a>
</div>
</div>

<div class='search-mega-menu'>
<form action='/search' class='search-form' method='get' role='search'><span>
<input class='search-btn' type='submit' value=''/>
<input class='search-input' name='q' placeholder='keyword search' type='text' value=''/>
</span></form>
</div>

<a class='waves-effect' href='javascript:;' id='show-menu-small'><i class='fa fa-ellipsis-v'/></a>

<div id='mega-menu-material'>
<li><a class='waves-effect' href='#' itemprop='url' title='Nosotros'><span itemprop='name'>Nosotros</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url' title='Contactos'><span itemprop='name'>Contactos</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url' title='Mapa del sitio'><span itemprop='name'>Sitemap</span></a></li>
</div>
</div>
</section>
<br/>

<div class='oscuro'/><div class='adb-open'/>
<nav class='dropdowns' itemprop='mainEntity' itemscope='itemscope' itemtype='https://schema.org/SiteNavigationElement'>
<div class='wrapper-menu'>
<div class='perfil-mega-menu'>
<img alt='Luis Chávez' src='http://lh5.googleusercontent.com/-FS0EwnqZjd8/AAAAAAAAAAI/AAAAAAAAABg/TKdxYCWr6VY/s120-c-pf/photo.jpg' title='Luis Chávez'/>
<h3><a expr:href='data:blog.homepageUrl' rel='nofollow'><data:blog.title/></a></h3>
<a class='adb-th' href='javascript:;' id='mega-informa'><i class='material-icons'>keyboard_arrow_down</i></a>
<p>Mega menu Material design</p>
<ul id='nav-menu1'>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Facebook</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Google+</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Twitter</span></a></li>
</ul>
</div>
<ul class='nav mega-menu-nav'>
<li>
<a class='waves-effect' expr:href='data:blog.homepageUrl' expr:title='data:blog.title' itemprop='url'>
<span itemprop='name'><i class='material-icons'>home</i> Inicio</span></a>
</li>
<li class='sub-menu'>
<a class='dropdown waves-effect' href='javascript:;' title='Blogger'><i class='fa fa-btc'/> Blogger</a>
<ul class='sub'>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>News</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Tecnología</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Deportes</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Grupos</span></a></li>
</ul>
</li>

<li class='sub-menu'>
<a class='dropdown waves-effect' href='javascript:;' title='Tecnología'><i class='fa fa-google-wallet'/> Tecnología</a>
<ul class='sub'>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>News</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Tecnología</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Deportes</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Grupos</span></a></li>
</ul>
</li>

<li class='sub-menu'>
<a class='dropdown waves-effect' href='javascript:;' title='Videos'><i class='fa fa-youtube-square'/> Videos</a>
<ul class='sub'>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>News</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Tecnología</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Deportes</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Grupos</span></a></li>
</ul>
</li>

<li class='sub-menu'>
<a class='dropdown waves-effect' href='javascript:;' title='Música'><i class='fa fa-folder-open-o'/> Música</a>
<ul class='sub'>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>News</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Tecnología</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Deportes</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Grupos</span></a></li>
</ul>
</li>

<li>
<a class='waves-effect' href='#' itemprop='url' title='Entretenimiento'><span itemprop='name'>
<i class='fa fa-pie-chart'/> Entretenimiento</span></a>
</li>

<li>
<a class='waves-effect' href='#' itemprop='url' title='Explore'><span itemprop='name'>
<i class='fa fa-tags'/> Explore</span></a>
</li>

<li>
<a class='waves-effect' href='#' itemprop='url' title='Sitemap'><span itemprop='name'>
<i class='fa fa-sitemap'/> Sitemap</span></a>
</li>

<li>
<a class='waves-effect' href='#' itemprop='url' title='Contactos'><span itemprop='name'>
<i class='fa fa-user'/> Contactos</span></a>
</li>

</ul>

<div class='iconos'>
<center>
<a href='#'><i class='fa fa-facebook'/></a>
<a href='#'><i class='fa fa-google-plus'/></a>
<a href='#'><i class='fa fa-twitter'/></a>
<a href='#'><i class='fa fa-linkedin'/></a>
</center>
</div>
</div>
</nav>
<br/>

Remplace todos los símbolos numerales # por la dirección URL de una de sus entradas o paginas
Cambie la imagen pequeña que está marcada de color amarillo

http://lh5.googleusercontent.com/-FS0EwnqZjd8/AAAAAAAAAAI/AAAAAAAAABg/TKdxYCWr6VY/s120-c-pf/photo.jpg

También, tendrá que cambiar el nombre que dice Luis Chávez

Busque la siguiente URL de imagen

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb84YHYQV2MCYZVeg8_FABDRuubsm8XVhV_OYwfaBkn7EReVkdcyV8dhV8CkPc66LK21ZtYzTrsS_a1ddaMWwCKaCpEm5FtnsoEbcjRzTudeEcvRkwPXuyTeyuo8Z7vqqo6NA69gpGKD8/s1600/logo-sidebar.jpg

Recent Posts

Labels

Menú Material Desing

No hay comentarios:

Publicar un comentario

Trending

Social Media