Menu c/ submenu e search

Voltando com um outro modelo de menu horizontal com caixa de busca.
Um menu com submenu e caixa de busca.
Pode ver na imagem acima o resultado final é este.
Mas pode visualizar aqui.   Entre aqui...

Antes de tudo faça uma cópia do seu template...

Vamos no modelo do seu blog e depois editar html e procure este código:

Agora acima dele coloque meu código:

/* menu de sub e caixa de busca-  http://best-tuga.blogspot.pt/
------------------------------------------------------------------- */
#bt-menucaixa {
width:100%;
height:50px;
padding-left:14px;
background: url(http://i.imgur.com/vLBax5C.png);
border-radius:3px;
border: 1px solid #576c93;
}
.bt-menufree {
width: 100%;
float: left;
font-family:Arial;
font-size:14px; /* Tamanho da fonte */
font-weight:bold;
}
.bt-menufree ul {
float:left;
height:0px;
list-style:none;
margin:0;
padding:0;
border-radius: 3px;
}
.bt-menufree li{
float:left;
padding:0px;
}
.bt-menufree li a{
border-right: 1px solid #a99f9f;
color:#cccccc;
display:block;text-transform:uppercase;
font-weight:normal;
line-height:50px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.bt-menufree li a:hover, .bt-menufree ul li:hover a {
background: #5500ff;
color:#FFFFFF;
text-decoration:none;
}
.bt-menufree li ul {
background: url(http://i.imgur.com/7Y6uoih.jpg?1);
display:none;
height:auto;
padding:-2px;
border:1px solid #000;
margin:0px;
position:absolute;
width:200px;
z-index:100;
border-top:1px solid #000;
}
.bt-menufree li:hover ul{
display:block;
}
.bt-menufree li li {
display:block;
float:none;
margin:1px;
padding:0px;
width:200px;
border:1px solid #FCFCFC;
}
.bt-menufree li:hover li a {
background:#000;
border-radius: 0px;
}
.bt-menufree li ul a {
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.bt-menufree li ul a:hover, .bt-menufree li ul li:hover a{
background:#5500ff;
color:#ffffff;
text-decoration:none;
}
#bt-search {
width: 228px;
height: 24px;
float: right;
text-align: center;
margin-top: 11px;
margin-right: 6px;
border:1px solid #2ebdf5;
border-radius:3px;
background: #fff;
}
#search-caixa {
margin-top: 3px;
border:0px;
background: transparent;
text-align:center;
}

Agora procure este código;

E acima dele coloque meu código;

<div id='bt-menucaixa'>
<div class='bt-menufree'>
<ul>
<li><a href="URL">INICIO</a></li>
<li><a href="#">TEXTE</a>
<ul>
<li><a href="URL">TEXTE</a></li>
<li><a href="URL">TEXTE</a></li>
<li><a href="URL">TEXTE</a></li>
<li><a href="URL">TEXTE</a></li>
</ul>
</li>
<li><a href="#">TEXTE1</a>
<ul>
<li><a href="URL">TEXTE1</a></li>
<li><a href="URL">TEXTE1</a></li>
<li><a href="URL">TEXTE1</a></li>
<li><a href="URL">TEXTE1</a></li>
</ul>
</li>
<li><a href="#">TEXTE2</a>
<ul>
<li><a href="URL">TEXTE2</a></li>
<li><a href="URL">TEXTE2</a></li>
<li><a href="URL">TEXTE2</a></li>
<li><a href="URL">TEXTE2</a></li>
</ul>
</li>
</ul>
<form action='/search' id='bt-search' method='get' name='searchForm' style='display:inline;'>
<input id='search-caixa' name='q' onblur='if (this.value == &quot;&quot;) this.value = &quot;Buscar...&quot;;' onfocus='if (this.value == &quot;Buscar...&quot;) this.value = &quot;&quot;;' size='28' type='text' value='Pesquisar...'/></form>
</div></div>

Vamos á personalização...

URL-coloque seu link do menu
TEXTE2-coloque o nome menu
TEXTE1-coloque nome do menu
TEXTE-coloque nome do menu
width:100%;-coloque a largura do menu pode trocar a percentagem por px

E foi esta a partilha que trouxe ,espero lhe seja útil,até mais...

Menu c/ submenu e search

► 0

► menus

► Cartita