Pular para o conteúdo principal

Pesquisar

aprenda como se faz: "Subnav Menu Horizontal com submenus"

Subnav Menu Horizontal com submenus



 



Em outro artigo eu publiquei um modelo de Menu Horizontal Dropdown que funciona a base de puro CSS.

Neste tutorial, veremos um outro tipo de menu no estilo dropdown, que tem um efeito bastante interessante, que foi desenvolvido por Soh, do site SohTanaka.



Demo


Você pode conferir o demo original aqui.
Me pediram para explicar como instalar este menu no Blogger, então vamos lá:


1. Aplicar estilos CSS


Vá na aba "design", entre na edição HTML do seu template, não precisa clicar em "expandir modelos de widgets" 

e procure pela tag 

]]></b:skin>

e cole o seguinte código logo ACIMA dela:


/* Subnav Menu
------------------ */

/*-- container geral do menu--*/
ul#topnav {
margin: 0;
padding: 0;
float: left;
width: 100%;  /*-- se quiser edite a largura total do menu --*/
list-style: none;
position: relative;
font-size: 1.2em;   /*-- edite tamanho da fonte--*/
background: #000; /*-- edite cor de fundo--*/
}
/*-- itens das listas--*/
ul#topnav li {
float: left;
margin: 0;
padding: 0;
border-right: 1px solid #555; /*--edite borda--*/
}

/*-- links dos itens das listas --*/
ul#topnav li a {
padding: 10px 15px;
display: block;
color: #fff; /*-- edite cor dos links --*/
text-decoration: none;
}
/*-- links dos itens das listas no modo hover --*/
ul#topnav li a:hover {
color:#ccc; /*-- edite cor dos links --*/
}

/*-- item da lista no modo hover--*/
ul#topnav li:hover {
background: #1376c9 ;   /*-- edite cor de fundo--*/

}


/*-- item da lista do submenu--*/
ul#topnav li span {
float: left;
padding: 15px 0;
position: absolute;
left: 0;
top:35px;
display: none;
width: 100%; 
background: #1376c9;  /*-- edite cor de fundo do submenu--*/
color: #fff;  /*-- edite cor dos links do submenu--*/
 /*--bordas arredondadas a direita--*/
-moz-border-radius-bottomright: 5px;
-khtml-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
 /*--bordas arredondadas a esquerda--*/
-moz-border-radius-bottomleft: 5px;
-khtml-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
}

/*-- item da lista do submenu no estado hover--*/
ul#topnav li:hover span {
display: block;
}

/*-- links do item da lista do submenu--*/
ul#topnav li span a {
display: inline;
color:#ccc; /*-- edite cor dos links do submenu --*/
}
/*-- links do item da lista do submenu no modo hover--*/
ul#topnav li span a:hover {
text-decoration: underline;
color:#000; /*-- edite cor dos links do submenu no estado hover --*/
}


Obs: Todos os trechos editáveis já estão identificados e destacados no código.



2. Instalar o arquivo Javascript-


Este script funciona em conjunto com a biblioteca do JQuery na versão 1.4.2, caso você já tenha esta biblioteca instalada em seu blog, não será necessário repetir a chamada dela( linha destacada na cor azul no código)

Volte na aba "design >> editar html

e procure pela

tag </head>
e cole o seguinte código logo ABAIXO dela:




<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'
 type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {

 $(&quot;ul#topnav li&quot;).hover(function() {
  $(this).css({ &#39;background&#39; : &#39;#1376c9 &#39;}); //Edite cor de 
fundo para o item da lista
  $(this).find(&quot;span&quot;).show(); //subnav
 } , function() { //on hover out...
  $(this).css({ &#39;background&#39; : &#39;none&#39;});
  $(this).find(&quot;span&quot;).hide();
 });

});
</script>



3. Inserir o código html


Agora você deve inserir o código html do menu para que ele fique visível no blog.


<ul id='topnav'>

<li><a href='seu-link-aqui'>Link 1</a></li>
  
<li><a href='seu-link-aqui'>Link 2 &#8595;</a>
       <!--Submenu inicio-->
        <span>
            <a href='seu-link-aqui'>Submenu Link</a> |
            <a href='seu-link-aqui'>Submenu Link</a> |
            <a href='seu-link-aqui'>Submenu Link</a>
        </span>
        <!--Submenu fim-->
    </li>

<li><a href='seu-link-aqui'>Link 3 &#8595;</a>
       <!--Submenu inicio-->
        <span>
            <a href='seu-link-aqui'>Submenu Link</a> |
            <a href='seu-link-aqui'>Submenu Link</a> |
            <a href='seu-link-aqui'>Submenu Link</a>
        </span>
        <!--Submenu fim-->
   </li>

<li><a href='seu-link-aqui'>Link 4 &#8595;</a>
       <!--Submenu inicio-->
        <span>
            <a href='seu-link-aqui'>Submenu Link</a> |
            <a href='seu-link-aqui'>Submenu Link</a> |
            <a href='seu-link-aqui'>Submenu Link</a>
        </span>
        <!--Submenu fim-->
   </li>

<li><a href='seu-link-aqui'>Link 5</a></li>

</ul>

Agora é só editar os links e nome dos botões no menu, nos locais indicados.

Os trechos destacados na cor verde se referem aos item do submenu.

 
Caso queira adicionar mais links no submenu, basta repetir o código.


 
Os trechos destacados na cor azul se referem aos itens do menu principal.


 
Caso queira adicionar mais links, basta repetir o código.


Lembrando que: 
você deve tomar cuidado na quantidade de links que irá adicionar no menu, para evitar que ultrapasse a largura total do menu.

4. Escolher o local do menu


Escolha o local mais adequado para instalar o seu menu no template.

 
Se quiser colocar abaixo do cabeçalho, procure o trecho referente ao código do cabeçalho e cole o código html do menu logo após o final do código referente ao cabeçalho.

 
Se quiser que o menu fique acima da barra de cabeçalho, cole o código do menu acima do código referente ao cabeçalho.

Dica:
Se estiver usando algum modelo de template do "designer de modelo do blogger",a tag referente ao cabeçalho é: <header> .


Se estiver usando algum modelo do template minima, a tag referente ao cabeçalho é: 


<div id='header-wrapper'>

Se quiser, pode experimentar colar o código referente ao menu logo abaixo da tag:
 

<div id='content-wrapper'>


Não há como eu informar precisamente onde instalar o menu, a escolha do local deverá ficar por sua conta, até porque cada template é diferente um do outro.

Você pode editar as cores do seu menu, se quiser, para isto basta alterar os códigos referentes as cores no código da 1º parte deste tutorial.


fonte:
mundoblogger

Comentários

Postagens mais visitadas deste blog

Modelo muito fácil de botas listradas feitas com dois espetos

... ► Modelo muito fácil de botas listradas feitas com dois espetos ◄

trilhas relacionadas com duas figuras master class lindamente

... trilhas relacionadas com duas figuras master class lindamente   Para o trabalho, é necessário tomar  :   .03 (três) combinações de cores contrastantes:  a linha principal (fundo),  as outras duas  realizarão ornamentos florais  (thread  número 1,  thread número 2),  .agulhas de tricô.   Descrição do trabalho   Marcar nas agulhas 22  ms / pts e  tricotar pontos de liga (todos faciais)  aproximadamente 10-12 cm.  Ornamento :  1 linha: Borda,  12 n a rosca principal,  7 loops com fio No. 1,  ATENÇÃO  no raio esquerdo há  1 p + borda,  sem amarrá-los -  desenformar tricô   2 linhas e  todas as fileiras pares  tricotar no padrão com a cor  apropriada  3 Linha  : Borda 10 n o segmento principal, o fio laços 7  №1,  AVISO no raio esquerdo é 3n + talão sem amarrá-los -  estão lançando tricô  linha  5: talão, 8 n o segmento principal, o fio laços 7 №1,  AVISO  no raio esquerdo é 5 p + borda, sem amar

Divulgação de patch restaurado

.. . Divulgação de patch   restaurado Na verdade, fazia muito tempo para o pátio, mas, como o fio que usava era grosso, o que encontrei era enorme (número 43-44), não tentei com outros fios, mas também tentei compartilhá-lo com outros fios. Fotografei um desenho e preparei um diagrama, eu não tenho um programa de esquema sozinho, mas não tenho um papel de charlatão. O que eu não  compartilhei  antes é  explicado em    Hanimelim.  Sercan   fez muito bem e foi muito bonito. Se você quiser ver   aqui ... ... passar a tarifa: Para o lado da pata, 22 loops e 21-22 linhas ásperas serão tecidas, enquanto passam o padrão da folha.    1ª linha: 13, por exemplo, altere a cor 7, por exemplo, volte 7, por exemplo, altere a cor 13, por exemplo, 3 classificações: 11, por exemplo, mude de cor 7, por exemplo, de volta para 7, por exemplo, cor de mudança 11, por exemplo, 5ª linha: 9, por exemplo, altere a cor 7, por exemplo, de volta par

contato

Nome

E-mail *

Mensagem *

buscas populares …apareça nas buscas… cadastre seu web site aqui…/buscas populares…alô negócios !!!…