GameZer Online


Você não está conectado. Conecte-se ou registre-se

GameZer Online » Programação » Tutoriais » HTML » Tutorial Simples - Menu DropDown ( SubMenus )

Ver o tópico anterior Ver o tópico seguinte Ir para baixo  Mensagem [Página 1 de 1]

RafsEstevam

RafsEstevam
Programador
Programador
Eis aqui o código HTML que você irá colocar onde você deseja que o Menu fique...
Código:
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Sobre</a>
<ul><!-- Começa SubMenu -->
<li><a href="#">Historia</a></li>
<li><a href="#">Equipe</a></li>
<li><a href="#">Prêmios</a></li><!-- acaba SubMenu -->
</ul>
</li>
<li><a href="#">Serviços</a>
<ul><!-- Começa SubMenu -->
<li><a href="#">Web Design</a></li>
<li><a href="#">design</a></li>
<li><a href="#">Programação</a>
</ul>
</li><!-- Acaba SubMenu -->
<li><a href="#">Contato</a>
<ul><!-- Começa SubMenu -->
<li><a href="#">São Paulo</a></li>
<li><a href="#">Rio de Janeiro</a></li>
<li><a href="#">Minas Gerais</a></li>
<li><a href="#">Bahia</a></li>
</ul>
</li>
</ul>

Eis aqui o código CSS que você vai colocar em as tags
Código:
<head>
e
Código:
</head>
.

Código:
<style>li:hover ul ul, li.over ul ul {
display:none;
}
li:hover ul, li li:hover ul, li.over ul,
li li.over ul {
display: block;
} /* Aqui a magica */</style>

Como poucos usam o IE precisaremos do JavaSript feito especialmente para a BDF... proibido alterações. Não é obrigatório é opcional...

Código:
<script>over = function() {
var sfEls = document.getElementById("nav").»
getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" over";
}
sfEls[i].onmouseout=function() {
this.className=this.className.»
replace(new RegExp(" over\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", over);</script>

Quakeline

Quakeline
Olá,

Eu já sabia destes códigos mais para quem não sabia sera muito bom

Também tem este código que pode ser utilizado só que ele e mais difícil de editar

Código:
<html>
<head>
   <title>Untitled</title>
   
   <!--|||||=========== COLOQUE ENTRE AS TAGS HEAD ==========|||||||||| -->
   
   <!-- ||**||**||**||  FOLHA DE ESTILOS (CSS) ||**||**||**|| -->
   <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>   
   <!-- ||**||**||** FIM FOLHA DE ESTILOS (CSS) ||**||**||** -->
   
   <!-- |||||||||||||||| FUNÇÕES JAVASCRIPT (NÃO EDITE) |||||||||||||||| -->
   <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>
   <!-- ||||||||||||| FIM FUNÇÕES JAVASCRIPT (NÃO EDITE) |||||||||||||||| -->   
   
   <!--|||||========== FIM COLOQUE ENTRE AS TAGS HEAD =========|||||||||| -->
</head>

<body>

<!--|||||||||||||||||  COLOQUE DENTRO AS TAGS 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>
<!--|||||||||||||||||  COLOQUE DENTRO AS TAGS BODY||||||||||||||||||||||||||||| -->

</body>
</html>

Até

Admin

Admin

Hehe, os 2 programadores trabalhando, que bom Smile

RafsEstevam

RafsEstevam
Programador
Programador
Aqui é modo simples... Ninguém é especialista ( a não ser eu você e o FIRE )

Conteúdo patrocinado


Ver o tópico anterior Ver o tópico seguinte Ir para o topo  Mensagem [Página 1 de 1]

GameZer Online » Programação » Tutoriais » HTML » Tutorial Simples - Menu DropDown ( SubMenus )

Permissões neste sub-fórum
Não podes responder a tópicos