Menú horizontal rolante com sub-abas e caixa de busca com efeito Hover-Super descomplicado
Googd Morning...
Com ele voçe tem as opçoes rolar ou fixar adaptando mais ao seu estilo. É algo muito simples por se tratar de puro css,nao pesa seu template e é super facil de customizar e instalar.
Vamos ao tuto?
Primeiramente vamos inserir a div com os link que vai nos formar o menú.
Ascedá a:
Modelo>Editar HTML>Marque expandir modelos de widgets.
De o Ctrl+f e Procure pela sua div <body>
<div id='menuWrapper'>
<div class='menu'>
<ul>
<li><a href="url da pagina inicial">Home</a></li>
<li><a href="#">Menú 1</a>
<ul>
<li><a href="#">Sub Menú 2.1</a></li>
<li><a href="#">Sub Menú 2.2</a></li>
<li><a href="#">Sub Menú 2.3</a></li>
</ul>
</li>
<li><a href="#">Menú 3</a>
<ul>
<li><a href="#">Sub Menú 3.1</a></li>
<li><a href="#">Sub Menú 3.2</a></li>
<li><a href="#">Sub Menú 3.3</a></li>
</ul>
</li>
<li><a href="#">Menú 4</a>
<ul>
<li><a href="#">Sub Menú 4.1</a></li>
<li><a href="#">Sub Menú 4.2</a></li>
<li><a href="#">Sub Menú 4.3</a></li>
</ul>
</li>
<li><a href="#">Menú 5</a>
<ul>
<li><a href="#">Sub Menú 5.1</a></li>
<li><a href="#">Sub Menú 5.2</a></li>
<li><a href="#">Sub Menú 5.3</a></li>
</ul>
</li>
</ul>
<form action='/search' id='search' method='get' name='searchForm' style='display:inline;'>
<input id='search-box' name='q' onblur='if (this.value ==
"") this.value = "Buscar...";'
onfocus='if (this.value == "Buscar...") this.value =
"";' size='28' type='text'
value='Buscar...'/></form>
</div>
</div>
Este é um menú para 5 links,mas voçe pode adicionar mais lugares repetindo o seguinte trecho antes da ultima </ul>:
<li><a href='#'> Menú extra</a>Feito isso,Vamos agora customizar nosso menú rolante(ou não e.e) Com Ctrl+F novamente Procure pela tag ]]></b:skin>,e coloque logo acima dela,as seguintes regras de estilização:
<ul>
<li><a href='#'>submenú </a></li>
<li><a href='#'>Submenú </a></li>
<li><a href='#'>Submenú </a></li>
</ul>
</li>
/* Menu horizontal com buscador ----------------------------------------------- */
#menuWrapper {
display:scroll; position:fixed;/* posição do menú ao rolar com a pagina,deixe relative se quiser que ele não role */ z-index:99;/* para ficar acima de todos os elementos da pagina,não altere*/ top:-1px; margin:0 auto 0;/* margem dos lados,deixe 0 para centralizar ou atribua valores * width:100%; /* Tamanho do menu,deixe 100% para englobar toda a pagina ou atribua seus valores*/
height:40px;
padding-left:14px;
/* distancia entre os links e a margem,dentro do menú*/ background:#444; /* Cor de fundo geral do menú*/
border-radius:0px; /* Bordas aredondadas deixe 0 para nao aprecer ou atribua valores*/
} .menu {
width: 100%;
float: left;
font-family:"Arial", "Trebuchet Unicode MS", "Lucida Grande",sans-serif;/*nome da fonte do menú*/
font-size:14px; /* tamanho da fonte */
font-weight:bold; /* estilo da fonte(negrito,itálico,sublinhado,etc. */
} .menu ul {
float:left;
height:0px;
list-style:none;
margin:0;
padding:0;
border-radius: 0px 0px 5px 5px; /* Bordas aredondadas do sub-menu,deixe em 0 se nao quiser */
} .menu li{
float:left;
padding:0px;
} .menu li a{
border-right: 1px solid #666;
color:#cccccc; /* Color da fonte */
display:block;text-transform:uppercase;
font-weight:normal;
line-height:40px;
margin:0px;
padding:0px 25px; /* Espaço entre cada casa */
text-align:center;
text-decoration:none;
} .menu li a:hover, .menu ul li:hover a {
background: #2580a2; /* Cor dos menús ao passar o cursor */
color:#FFFFFF; /* Cor do texto ao passar o cursor */
text-decoration:none;
} .menu li ul {
background:#333333; /* Cor de fundo do sub-menu em estado normal */
display:none;
height:auto;
padding:0px;
margin:0px;
position:absolute;
width:200px; /* largura do sub-menu */
z-index:100;
border-top:1px solid #fff; /* Borda superior do sub-menu */
} .menu li:hover ul{
display:block;
} .menu li li {
display:block;
float:none;
margin:0px;
padding:0px;
width:200px;
} .menu li:hover li a {
background:none;
border-radius: 0px 0px 5px 5px; /* Borda dos sub-menús */
} .menu li ul a {
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
} .menu li ul a:hover, .menu li ul li:hover a{
background:#2580a2; /* Cor dos sub-menus ao passar o cursor */
color:#ffffff;
text-decoration:none;
} #search {>
width: 228px; /* largura da caixa de busca */
height: 24px;
float: right;
/* posicionamento á esquerda,coloque left para a direita*/ text-align: center;
margin-top: 8px;
margin-right: 6px;
/* distancia da caixa para a margem em left ou right*/ background: #fff;/* Cor de fundo da caixa de busca */
}
#search-box {
margin-top: 3px;
border:0px;
background: transparent;
text-align:center;
}
Comentários
Postar um comentário
Observaçoes.
*Todos os comentários são moderados.
*Seja educado,não chingue ou ofenda.
*Deixe o endereço do seu blog para que possa retribuir a visita+comentário.
*Use a sessão Contato,para fazer pedidos.
Volte sempre ^^