Cito a Fonte - direcionando suas buscas na web: Como colocar menu com submenu horizontal estilo - dropdown

Menu expansivo vertical (com submenus) feito em CSS e JavaScript. Fácil de customizar.

INSTRUÇÕES:

Coloque na variável "n_divs" o número de categorias que irá ter o menu.
OBS: As categorias que não tiverem sub-menus, não serão contadas

Se uma categoria não tiver sub categorias, portanto não irá abrir um sub-menu.

Meu texto onde "#" é o endereço da página linkada; e target o alvo, que pode ser _self, _top, _parent ou o nome de um iframe ou frame.

Quando você quiser que uma categoria tenha sub menu, use o código:
Categoria 1
link item1A
link item2A
link item3A

Onde escondediv('n',n_divs) 'n' é o número da categoria em ordem crescente, lembre-se
que categorias que não tem sub-menu não são contada; "id" é o nome do box que conterá o sub-menu e sempre se chamará "mdiv" seguida do número da categoria que coincidirá com 'n' explicado mais acima, ex: id="mdiv1", id="mdiv2" etc..

"#" é o endereço da página linkada e "target" o alvo, que pode ser _self, _top,_parent ou o nome de um iframe ou frame.

Edite as cores e estilos dos links e das células na folha de estilo logo abaixo

OBS:
As funções {onmouseover="reveza('um')" onmouseout="volta('um')"} são opcionais, elas revezam as configurações de cores e estilos dos sub-menus trocando as classes itens_menu por itens_menu_r na folha de estilo.

Para usala basta por o código dentro do link relativo ao item de sub-menu, mas é necessário atribuir uma id à td onde se encontra o link que será passado nas funções "reveza" e "volta". O primeiro item de sub-menu está com essa opção à titulo de exemplo.

Não poderá haver dois nomes iguais para as IDs das TDs
Veja como iserir o código:

<html>
<head>
<title>Untitled</title>




<style type="text/css">
/*+++++++++++++++ RELATIVO AS CATEGORIAS +++++++++++++++++++++*/

/**** LINKS DOS NOMES DAS CATEGORIAS ****/
/* Link em estado natural*/
a.link_menu:link{color:navy;text-decoration:none;font-weight:normal;font-family:arial;font-size:12px}
/* Link depois de visitado*/
a.link_menu:visited{color:navy;text-decoration:none;font-weight:normal;font-family:arial;font-size:12px}
/* Link ao passar o mouse*/
a.link_menu:hover{color:#ffffff;text-decoration:underline;font-weight:bold;font-family:arial;font-size:12px}
/**** FIM LINKS DOS NOMES DAS CATEGORIAS ****/

/**** CELULAS DOS NOMES DAS CATEGORIAS ****/
/*padding top right bottom left */
.titulo_menu{
   background-color:red;
background-image:url(none);
width:150px;
height:25px;
border:1px solid blue;
padding: 5px 0px 0px 5px;
}
/**** FIM CELULAS DOS NOMES DAS CATEGORIAS ****/

/*++++++++++++ FIM RELATIVO AS CATEGORIAS +++++++++++++++++++++*/

/*++++++++++++ RELATIVO AS SUB-CATEGORIAS +++++++++++++++++++++*/

/**** LINKS DOS NOMES DAS SUB-CATEGORIAS ****/
/* Link em estado natural*/
a.link_smenu:link{color:#ffffff;text-decoration:none;font-weight:normal;font-family:arial;font-size:12px}
/* Link depois de visitado*/
a.link_smenu:visited{color:#ffffff;text-decoration:none;font-weight:normal;font-family:arial;font-size:12px}
/* Link ao passar o mouse*/
a.link_smenu:hover{color:navy;text-decoration:underline;font-weight:bold;font-family:arial;font-size:12px}
/**** LINKS DOS NOMES DAS SUB-CATEGORIAS ****/

/**** CELULAS DOS NOMES DAS SUB-CATEGORIAS ****/
/*padding top right bottom left */
.itens_menu{
   background-color:blue;
background-image:url(none);
width:137px;
height:25px;
border:1px solid red;
padding: 5px 0px 0px 5px;
}
/**** FIM CELULAS DOS NOMES DAS SUB-CATEGORIAS ****/

/**** CELULAS DE REVEZAMENTO DOS NOMES DAS SUB-CATEGORIAS ****/
.itens_menu_r{
   background-color:#0099ff;
background-image:url(none);
width:137px;
height:25px;
border:1px solid red;
padding: 5px 0px 0px 5px;
}
/**** FIM CELULAS DE REVEZAMENTO DOS NOMES DAS SUB-CATEGORIAS ****/

/*++++++++++++ FIM RELATIVO AS SUB-CATEGORIAS +++++++++++++++++++++*/
</style>



<script language="javascript">
   c=0
du="";
   function escondediv(dv,n){

   for(i=1;i<=n;i++){
   if(i==dv ){
   if(du!=dv){
      document.getElementById('mdiv'+i).style.display="inline"
   du=dv
}else{
   du=""
   document.getElementById('mdiv'+i).style.display="none"
}
   }else{
     document.getElementById('mdiv'+i).style.display="none"
   }

}
}

function reveza(qq){
document.getElementById(qq).className="itens_menu_r"
}
function volta(qq){
document.getElementById(qq).className="itens_menu"
}
</script>



</head>

<body>



<script>
//Coloque aqui o número de itens de menu
n_divs='5'
</script>

<div class="titulo_menu"><a href="#" class="link_menu" target="alvo">Link fixo</a></div>

<div class="titulo_menu" ><a href="javascript:void(escondediv('1',n_divs))" class="link_menu" >Categoria 1</a></div>
<div id="mdiv1" style="display:none">
   <table border="0">
   <tr><td id="um" class="itens_menu" ><a href="#" onmouseover="reveza('um')" onmouseout="volta('um')" class="link_smenu" target="alvo">link item1A</a></td></tr>
<tr><td class="itens_menu" ><a href="#" class="link_smenu" target="alvo">link item2A</a></td></tr>
<tr><td class="itens_menu"><a href="#" class="link_smenu" target="alvo">link item3A</a></td></tr>
</table>
</div>

<div class="titulo_menu"><a href="javascript:void(escondediv('2',n_divs))" class="link_menu">Categoria 2</a></div>
<div id="mdiv2" style="display:none">
   <table border="0">
   <tr><td class="itens_menu"><a href="#" class="link_smenu" target="alvo">link item1B</a></td></tr>
<tr><td class="itens_menu"><a href="#" class="link_smenu" target="alvo">link item2B</a></td></tr>
<tr><td class="itens_menu"><a href="#" class="link_smenu" target="alvo">link item3B</a></td></tr>
</table>
</div>

<div class="titulo_menu"><a href="javascript:void(escondediv('3',n_divs))" class="link_menu">Categoria 3</a></div>
<div id="mdiv3" style="display:none">
   <table border="0">
   <tr><td class="itens_menu"><a href="#" class="link_smenu" target="alvo">link item1C</a></td></tr>
<tr><td class="itens_menu"><a href="#" class="link_smenu" target="alvo">link item2C</a></td></tr>
<tr><td class="itens_menu"><a href="#" class="link_smenu" target="alvo">link item3C</a></td></tr>
</table>
</div>

<div class="titulo_menu"><a href="javascript:void(escondediv('4',n_divs))" class="link_menu">Categoria 4</a></div>
<div id="mdiv4" style="display:none">
   <table border="0">
   <tr><td class="itens_menu"><a href="#" class="link_smenu" target="alvo">link item1D</a></td></tr>
<tr><td class="itens_menu"><a href="#" class="link_smenu" target="alvo">link item2D</a></td></tr>
<tr><td class="itens_menu"><a href="#" class="link_smenu" target="alvo">link item3D</a></td></tr>
</table>
</div>

<div class="titulo_menu"><a href="javascript:void(escondediv('5',n_divs))" class="link_menu">Categoria 5</a></div>
<div id="mdiv5" style="display:none">
   <table border="0">
   <tr><td class="itens_menu"><a href="#" class="link_smenu">link item1E</a></td></tr>
<tr><td class="itens_menu"><a href="#" class="link_smenu">link item2E</a></td></tr>
<tr><td class="itens_menu"><a href="#" class="link_smenu">link item3E</a></td></tr>
</table>
</div>


</body>
</html>

-------------------------------------------------------------------------------------------------------------

Crédito: [Código Fonte Uol]

sexta-feira, 16 de dezembro de 2011

Como colocar menu com submenu horizontal estilo - dropdown - no blog

Nenhum comentário:

Postar um comentário