Tutorial (HTML): Menu Fixo no topo com search
Olá meus amores, hoje eu trago para vocês um tutorial de Menu Fixo no topo do blog, a pedido da minha mais nova amiga (Mari <3).
Os créditos vão para Place Style
Primeiramente:
Faça um Backup do seu layout caso dê algum erro!
1- Vá no Painel do Blogger > Modelo e procure por ]]></b:skin>
Quando encontrar, cole acima:
#mymenuda {
background: #CD6090; /* Cor do background */
border-left: 200px solid #CD6090; /* Tamanho e cor da borda - não retire pois ela centraliza o menu */
width: 100%;
height: 34px;
position: fixed; /* FIXA O MENU NO TOPO */
top: 0;
left: 0;
z-index: 9999; }
#mymenu {
background: #fff; /* Cor da fonte */
font-family: 'Arial', corsiva; /* Nome da fonte */
font-size: 16px; /* Tamanho da fonte */ text-transform: uppercase; /* FONTE DO TEXTO EM MAIÚSCULA */ }
#mymenu li {
list-style-type: none;
display: inline; float: left; /* Posicionamento do menu */
padding: 0px; }
#mymenu li a {
color: #fff; /* COR DA FONTE DO LINK */
text-decoration: none;
padding-right: 24px;
line-height: 37px; }
#mymenu a:hover {
color: #EED5D2; /* Cor da fonte em hover */ }
#mymenu ul {
list-style: none;
margin: 0;
padding: 0;
background: #fff;
margin-left: 40px;
}
#mymenu li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 120px;
padding-left: -40px; }
#mymenu li ul a { font-size: 12px; line-height: 24px; }
#mymenu li:hover ul ul, #mymenu li:hover ul ul ul, #mymenu li.sfhover ul ul, #mymenu li.sfhover ul ul ul { left: -999em; } #mymenu li:hover ul, #mymenu li li:hover ul, #mymenu li li li:hover ul, #mymenu li.sfhover ul, #mymenu li li.sfhover ul, #mymenu li li li.sfhover ul {
left: auto; }
#mymenuright {
float: right;
color: #fff; } /* BARRA DE PESQUISA */
.search{
float: left; /* Flutuando a esquerda */ font-family: Georgia, Tahoma; /* Nome da fonte */ }
.searchbar{
margin-top:7px;
height: 14px;
width: 240px;
color: #ccc; /* Cor da fonte */
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-goog-ms-border-radius: 6px;
background: #FFF; /* Cor de fundo */ }
.searchbut{
background: url('http://i43.tinypic.com/2evyidy.png'); /* Link da imagem do botão de pesquisar | tamanho: 20x20px */
width:20px;
height:20px;
border: 0;
padding:6px; }
background: #CD6090; /* Cor do background */
border-left: 200px solid #CD6090; /* Tamanho e cor da borda - não retire pois ela centraliza o menu */
width: 100%;
height: 34px;
position: fixed; /* FIXA O MENU NO TOPO */
top: 0;
left: 0;
z-index: 9999; }
#mymenu {
background: #fff; /* Cor da fonte */
font-family: 'Arial', corsiva; /* Nome da fonte */
font-size: 16px; /* Tamanho da fonte */ text-transform: uppercase; /* FONTE DO TEXTO EM MAIÚSCULA */ }
#mymenu li {
list-style-type: none;
display: inline; float: left; /* Posicionamento do menu */
padding: 0px; }
#mymenu li a {
color: #fff; /* COR DA FONTE DO LINK */
text-decoration: none;
padding-right: 24px;
line-height: 37px; }
#mymenu a:hover {
color: #EED5D2; /* Cor da fonte em hover */ }
#mymenu ul {
list-style: none;
margin: 0;
padding: 0;
background: #fff;
margin-left: 40px;
}
#mymenu li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 120px;
padding-left: -40px; }
#mymenu li ul a { font-size: 12px; line-height: 24px; }
#mymenu li:hover ul ul, #mymenu li:hover ul ul ul, #mymenu li.sfhover ul ul, #mymenu li.sfhover ul ul ul { left: -999em; } #mymenu li:hover ul, #mymenu li li:hover ul, #mymenu li li li:hover ul, #mymenu li.sfhover ul, #mymenu li li.sfhover ul, #mymenu li li li.sfhover ul {
left: auto; }
#mymenuright {
float: right;
color: #fff; } /* BARRA DE PESQUISA */
.search{
float: left; /* Flutuando a esquerda */ font-family: Georgia, Tahoma; /* Nome da fonte */ }
.searchbar{
margin-top:7px;
height: 14px;
width: 240px;
color: #ccc; /* Cor da fonte */
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-goog-ms-border-radius: 6px;
background: #FFF; /* Cor de fundo */ }
.searchbut{
background: url('http://i43.tinypic.com/2evyidy.png'); /* Link da imagem do botão de pesquisar | tamanho: 20x20px */
width:20px;
height:20px;
border: 0;
padding:6px; }
As marcações em vermelho são de extrema importância, cuidado ao alterá-las.
Lista de cores em HTML (Clique Aqui)
E cole esse Código:
Lista de cores em HTML (Clique Aqui)
2- Agora "Salve o modelo".
3- Vá na aba "Layout".
4- Adicionar um Gadget.
5- HTML/JavaScript.
E cole esse Código:
<div id="mymenuda"> <!-- MENU COMPLETO -->
<div id="mymenu"> <!-- LINKS DO MENU-->
<li><a href=" Link ">Título</a></li>
<li><a href="Link ">Título</a></li>
<li><a href=" Link ">Título</a></li>
<li><a href=" Link ">Título</a></li>
<li><a href=" Link ">Título</a></li>
</div>
<form action="/search" class="search" method="get"><!-- SEARCH PERSONALIZÁVEL -->
<input class="searchbar" id="s" name="q" type="text" value="" />
<input class="searchbut" type="submit" value="" />
</form>
<div id='mymenuright'> <!-- NUNCA RETIRE ISSO -->
</div></div>
<div id="mymenu"> <!-- LINKS DO MENU-->
<li><a href=" Link ">Título</a></li>
<li><a href="Link ">Título</a></li>
<li><a href=" Link ">Título</a></li>
<li><a href=" Link ">Título</a></li>
<li><a href=" Link ">Título</a></li>
</div>
<form action="/search" class="search" method="get"><!-- SEARCH PERSONALIZÁVEL -->
<input class="searchbar" id="s" name="q" type="text" value="" />
<input class="searchbut" type="submit" value="" />
</form>
<div id='mymenuright'> <!-- NUNCA RETIRE ISSO -->
</div></div>
Bem, espero que vocês tenham entendido.Qualquer duvida, pode deixar aqui nos comentários que responderei a todos!
Beijos e MILHÕES de obrigadas pela preferência,
Andy Santana (Lermandys). Web-Master FD. Contato: deias.lerman@gmail.com
Assinar:
Postar comentários (Atom)
Disponibiliza seu código?
ResponderExcluirAdorei o tutorial Andy!
ResponderExcluirAndyyyyyyyy amiga, Obg por fazer estava louca atras *---* Obg foi de grande ajuda
ResponderExcluir