CÓDIGO DAS VARIÁVEIS
(colar abaixo de /* Variable definitions
====================)
====================)
<Group description="Fonte do menu" selector=".tabs-inner .widget li a">
<Variable name="menu.font" description="Font" type="font"
default="normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 20px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
<Variable name="menu.text.color" description="Cor da fonte do menu" type="color" default="#999999" value="#ffffff"/>
<Variable name="menu.selected.text.color" description="Cor da fonte hover" type="color" default="#000000" value="#444444"/>
<Variable name="submenu.font" description="Font submenu" type="font"
default="normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 20px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
<Variable name="submenu.text.color" description="Cor da fonte do submenu" type="color" default="#999999" value="#000000"/>
<Variable name="submenu.selected.text.color" description="Cor da fonte submenu hover" type="color" default="#000000" value="#444444"/>
</Group>
<Group description="Cor de fundo do menu" selector=".tabs-outer .PageList">
<Variable name="menu.background.color" description="Cor de fundo do menu" type="color" default="#f5f5f5" value="#222222"/>
<Variable name="menu.selected.background.color" description="Cor de fundo hover" type="color" default="#eeeeee" value="#eeeeee"/>
<Variable name="submenu.background.color" description="Cor de fundo do submenu" type="color" default="#f5f5f5" value="#00818b"/>
<Variable name="submenu.selected.background.color" description="Cor de fundo submenu hover" type="color" default="#eeeeee" value="#eeeeee"/>
</Group>
CÓDIGO CSS
(cole acima de ]]></b:skin>)
/* MENU RESPONSIVO COM CAIXA DE BUSCA- by elainegaspareto.com
----------------------------------------------- */
.conteudo-menu { background: $(menu.background.color); font: $(menu.font); }
.menu-fixo { z-index: 9999; position: fixed; top: 0; width: 100%; height: 50px;}
#menu {
background: $(menu.background.color); /* COR DE FUNDO DO MENU */
color: $(menu.font); /* COR DA FONTE DO MENU */
height: 50px; /* ALTURA DO MENU */
width: 100%;
position: relative;
z-index: 999;
}
#menu-left {
float: left;
width: 100%;
max-width: 700px;/* ÁREA ÚTIL DO MENU, AUMENTE OU REDUZA PARA CENTRALIZAR */
}
#menu-right {
float: right;
width: 100%;
max-width: 300px;
text-align: right;
}
#menu ul, #menu li {
font: $(menu.font); /* TIPO FONTE DO MENU */
text-transform: uppercase; /* Todas as fontes maiúsculas, se não quiser, apague esta linha */
margin: 0 auto;
padding: 0 0;
list-style: none;
}
#menu ul {
width: 100%;
}
#menu li {
float: left;
display: inline;
position: relative;
font-weight: 700;
}
#menu a {
display: block;
line-height: 50px;
padding: 0 14px; /* DISTÂNCIA ENTRE AS CASAS */
text-decoration: none;
color: $(menu.text.color); /* COR DA FONTE DO MENU */
}
#menu li a:hover {
color: $(menu.selected.text.color); /* COR DO TEXTO AO PASSAR O CURSOR */
background: $(menu.selected.background.color); /* COR DE FUNDO DO MENU HOVER */
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
#menu-left input {
display: none;
margin: 0 0;
padding: 0 0;
width: 80px;
height: 50px;
opacity: 0;
cursor: pointer;
}
#menu label {
background: url("http://i.imgur.com/Cx8HQMd.png") center no-repeat;
-moz-background-size: auto 50%;
-webkit-background-size: auto 50%;
background-size: auto 50%;
display: none;
width: 50px;
height: 50px;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
#menu ul.menus {
padding-top: 5px;
height: auto;
overflow: hidden;
width: 200px;
background: rgba(255,255,255,0.95);
position: absolute;
z-index: 99;
display: none;
box-shadow: 0 0 1px rgba(0,0,0,0.2);
}
#menu ul.menus li {
display: block;
width: 100%;
text-transform: none;
text-shadow: none;
}
#menu ul.menus a {
color: $(submenu.text.color);
line-height: 35px;
}
#menu li:hover ul.menus {display: block;}
#menu ul.menus a:hover {
background: $(submenu.selected.background.color); /* COR DE FUNDO DAS SUB ABAS HOVER */
color: $(submenu.selected.text.color); /* COR DO TEXTO DAS SUB ABAS HOVER */
padding-left: 20px;
}
#search {
margin-top: 0px;
color: $(menu.text.color) !important;
}
#search input[type="text"] {
background: url("http://i.imgur.com/WsHNC7P.png") no-repeat 20px 15px;
border: none;
color: #fff !important;
font-size: 13px;
width: 0px;
height: 38px;
padding: 6px 5px 6px 50px;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
cursor: pointer;
}
#search input[type="text"]:focus {
color: #fff !important;
width: 245px;
background: url("http://i.imgur.com/WsHNC7P.png") no-repeat 20px 15px rgba(0,0,0,0.2);
outline: none;
cursor: text;
}
centro {
display: block;
margin: 0 auto;
width: 100%;
max-width: 1000px;
}
/* MEDIA QUERIES DO MENU (DEFINE A RESPONSIVIDADE)
----------------------------------------------- */
@media screen and (max-width: 1024px){
.menunope { display: none;}
#menu { position: relative;
}
#menu ul {
background: rgba(0,0,0,0.9);
position: absolute;
top: 100%;
right: 0;
left: 0;
z-index: 3;
height: 1000px;
display: none
}
#menu ul.menus {
width: 100%;
position: static;
padding-left: 20px;
}
#menu li {
display: block;
float: none;
width: auto;
background: #666; /* COR DE FUNDO DO MENU RESPONSIVO */
}
#menu-left input, #menu label {
position: absolute;
top: 0;
left: 0;
display: block;
}
#menu-left input { z-index:4;}
#menu-left input:checked + label {
background: url("http://i.imgur.com/yNRYwBD.png") no-repeat center;
-moz-background-size: auto 50%;
-webkit-background-size: auto 50%;
background-size: auto 50%;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
#menu-left input:checked ~ ul { display:block;}
#menu ul.menus {
width: 100%;
background: $(menu.background.color); /* COR DE FUNDO DO MENU RESPONSIVO */
z-index: 99;
display: none;
box-shadow: 0 0 1px rgba(0,0,0,0.2);
margin-top: -5px;
margin-left: -20px;
padding-top: 0;
border:none;
}
#menu ul.menus li {
display: block;
width: 100%;
font-weight: 100;
text-shadow: none;
background: rgba(0,0,0,0.5);
}
#menu ul.menus a {
color: #ccc; /* COR DA FONTE DO MENU RESPONSIVO */
line-height: 35px;
}
#menu li:hover ul.menus { display: block;}
#menu ul.menus a:hover {
background: $(submenu.selected.background.color); /* COR DE FUNDO DO SUBMENU */
color: $(submenu.selected.text.color); /* COR DO TEXTO DO SUBMENU HOVER */
padding-left: 20px;
}
}
CÓDIGO JAVASCRIPT
(colar acima de </head>)
<script type='text/javascript'>
jQuery("document").ready(function($){
var nav = $('.conteudo-menu');
$(window).scroll(function () {
if ($(this).scrollTop() > 359) {
nav.addClass("menu-fixo");
} else {
nav.removeClass("menu-fixo");
}
});
});
</script>
CÓDIGO HTML
(colar abaixo de </header> para ficar abaixo do cabeçalho ou cole abaixo de <body expr:class='"loading" + data:blog.mobileClass'> para ficar fixo desde o começo)
<div class='conteudo-menu'>
<nav id='menu'>
<centro>
<div id='menu-left'>
<input type='checkbox'/>
<label/>
<ul>
<li><a href='/'>Início</a></li>
<li><a href='LINK AQUI'>Aba simples</a></li>
<li><a>Aba com submenu</a>
<ul class='menus'>
<li><a href='LINK AQUI'>Sub aba 1</a></li>
<li><a href='LINK AQUI'>Sub aba 2</a></li>
<li><a href='LINK AQUI'>Sub aba 3</a></li>
<li><a href='LINK AQUI'>Sub aba 4</a></li>
</ul>
</li>
<li><a href='LINK AQUI'>Aba simples</a></li>
<li><a>Aba com submenu</a>
<ul class='menus'>
<li><a href='LINK AQUI'>Sub aba 1</a></li>
<li><a href='LINK AQUI'>Sub aba 2</a></li>
<li><a href='LINK AQUI'>Sub aba 3</a></li>
<li><a href='LINK AQUI'>Sub aba 4</a></li>
<li><a href='LINK AQUI'>Sub aba 5</a></li>
</ul>
</li>
<li><a href='LINK AQUI'>Aba simples</a></li>
</ul>
</div>
<div id='menu-right'>
<form action='/search' id='search' method='get'>
<input autocomplete='off' name='q' placeholder='Digite sua busca e tecle Enter' type='text'/>
</form>
</div>
</centro>
</nav></div>
<nav id='menu'>
<centro>
<div id='menu-left'>
<input type='checkbox'/>
<label/>
<ul>
<li><a href='/'>Início</a></li>
<li><a href='LINK AQUI'>Aba simples</a></li>
<li><a>Aba com submenu</a>
<ul class='menus'>
<li><a href='LINK AQUI'>Sub aba 1</a></li>
<li><a href='LINK AQUI'>Sub aba 2</a></li>
<li><a href='LINK AQUI'>Sub aba 3</a></li>
<li><a href='LINK AQUI'>Sub aba 4</a></li>
</ul>
</li>
<li><a href='LINK AQUI'>Aba simples</a></li>
<li><a>Aba com submenu</a>
<ul class='menus'>
<li><a href='LINK AQUI'>Sub aba 1</a></li>
<li><a href='LINK AQUI'>Sub aba 2</a></li>
<li><a href='LINK AQUI'>Sub aba 3</a></li>
<li><a href='LINK AQUI'>Sub aba 4</a></li>
<li><a href='LINK AQUI'>Sub aba 5</a></li>
</ul>
</li>
<li><a href='LINK AQUI'>Aba simples</a></li>
</ul>
</div>
<div id='menu-right'>
<form action='/search' id='search' method='get'>
<input autocomplete='off' name='q' placeholder='Digite sua busca e tecle Enter' type='text'/>
</form>
</div>
</centro>
</nav></div>