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

Sapatinho de bebê, de tricô com elástico e/ou lastex : vídeo e receita

...

fonte:  tricotandocroche 





Sapatilha de tricô com elástico – vídeo e receitaSapatilha de tricô com elástico – vídeo e receita


"Sapatilha de bebê:
Material:

Fio usado no vídeo: Super bebê – Cisne – 1 fio
Agulha: 3,00 mm
Lastex, ou látex
Tesoura
Aguha de croche número 2,00 mm
Agulha de tapeçaria



Sola:
Colocar 37 pontos na agulha

1carr: tricô
2 carr: 1m, laç., 16m, laç., m., laç., m., laç.,m, laç., 16 m, laç., m.
3 carr: tricô
4 carr: 2m, laç., 16m., laç., 2m., laç., 3m., laç., 2m., laç., 16m., laç., 2m.
5 carr: tricô
6 carr: 3m., laç., 16m., laç., 3m., laç., 5m., laç., 3m., laç., 16m., laç., 3m..
Até aqui terás 55 pontos na agulha.
Tricotar nos 55 pontos
6 cordões de tricô (avesso e direito em ponto meia)
...então serão 
12 carreiras em ponto meia
para formar os 6 cordões de tricô.
Peito do pé:

Dividir 22, 11, 22 pontos e 

trabalhar nos 11 pontos centrais 
por 9 carreiras em cordões de tricô
(então serão 18 carreiras em ponto meia
para formar 
09 carreiras de cordões de tricô). 

Sempre pegando1 ponto 
de cada …

pérolas, sapatinhos em tricô , 03 - Jaqueline santos -

...







sapatinhos de bebê em tricô: como fazer

...

fonte:  viladoartesao.




by Cris Turek on
 22 de março de 2016
 in Faça Você Mesma





..."dica facílima de como fazer sapatinhos de bebê em tricô."

..."Ana Sanches,...
...apresentou uma pessoa tão querida quanto ela. Solícita, disposta e super criativa. Quem é? É a artesã Pati Asai que vem nos ensinar esta aula super bacana de tricô e como fazer sapatinhos de bebê de um modo simples, que qualquer iniciante consegue fazer, mas que ainda assim tem um toque de graça gigantesco."

Como é de costume, antes de irmos pra aula vou apresentar esta artesã: Pati Asai. A Pati precisa ser muito bem recebida porque queremos que ela venha para ficar e nos dar muitas outras aulas legais, então tudo que eu mostrar dela, quero que você vá, visite e deixe seu olá, combinado?

A Pati domina o tricô e o crochê, mas também solta a criatividade no EVA e com os tecidos. Já viu que temos tudo em comum, né? Ela adora coisinhas de bebê e por isso nos deu este presente lindo e fofo nesta que é só a prim…

contato

Nome

E-mail *

Mensagem *

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