Fórum Contato
  
   O portal do desenvolvedor ASP Segunda-feira - 14 de Junho de 2021  
Busca

Menu do site
Efetuar Login
Usuário:

Senha:

 Esqueceu a senha?
Login automático

 Cadastre-se
 Fóruns   Meu cadastro   Meu perfil   Ranking de usuários 

 FórumProgramaçãoHTML Responder mensagem 

 Menu Atualizado em 18/10/2006 ás 10:00:00

Postado em 18/10/2006 ás 09:34:00

Bom-dia!


Gente,

Este é um código para elaboração de menu que até pouco tempo estava funcionando no meu site, porém um outro programador mexeu e quando peguei novamente muita coisa foi acrescentada, o problema é o seguinte apartir do quarto menu, ocorre tipo uma quebra de linha, os menus ficam dividos em dois... Sei que é uma coisa boba, mas já bati cabeça e não matei o enclave... Quem tiver com a cabeça melhor que a minha favor me ajude!!!


Grato a todos!


<html>
<head>
<title>Menu</title>
<style type="text/css">


/* Root = Horizontal, Secondary = Vertical */
ul#navmenu {
  margin: 0;
  border: 1 none;
  padding: 0;
  width: 500px; /*For KHTML*/
  list-style: none;
  height: 24px;
}


ul#navmenu li {
  margin: 0;
  border: 0 none;
  padding: 0;
  float: left; /*For Gecko*/
  display: inline;
  list-style: none;
  position: relative;
  height: 24px;
}


ul#navmenu ul {
  margin: 0;
  border: 0 none;
  padding: 0;
  width: 160px;
  list-style: none;
  display: none;
  position: absolute;
  top: 24px;
  left: 0;
}


ul#navmenu ul li {
  float: none; /*For Gecko*/
  display: block !important;
  display: inline; /*For IE*/
}


/* Root Menu */
ul#navmenu a {
  border: 1px solid #FFF;
  border-right-color: #CCC;
  border-bottom-color: #CCC;
  padding: 0 6px;
  float: none !important; /*For Opera*/
  float: left; /*For IE*/
  display: block;
  background: #EEE;
  color: #666;
  font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;
  text-decoration: none;
  height: auto !important;
  height: 1%; /*For IE*/
  width: 160px;
 }


/* Root Menu Hover Persistence */
ul#navmenu a:hover,
ul#navmenu li:hover a,
ul#navmenu li.iehover a {
  background: #CCC;
  color: #FFF;
}


/* 2nd Menu */
ul#navmenu li:hover li a,
ul#navmenu li.iehover li a {
  float: none;
  background: #EEE;
  color: #666;
}


/* 2nd Menu Hover Persistence */
ul#navmenu li:hover li a:hover,
ul#navmenu li:hover li:hover a,
ul#navmenu li.iehover li a:hover,
ul#navmenu li.iehover li.iehover a {
  background: #CCC;
  color: #FFF;
}


/* 3rd Menu */
ul#navmenu li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li a {
  background: #EEE;
  color: #666;
}


/* 3rd Menu Hover Persistence */
ul#navmenu li:hover li:hover li a:hover,
ul#navmenu li:hover li:hover li:hover a,
ul#navmenu li.iehover li.iehover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover a {
  background: #CCC;
  color: #FFF;
}


/* 4th Menu */
ul#navmenu li:hover li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li.iehover li a {
  background: #EEE;
  color: #666;
}


/* 4th Menu Hover */
ul#navmenu li:hover li:hover li:hover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover li a:hover {
  background: #CCC;
  color: #FFF;
}


ul#navmenu ul ul,
ul#navmenu ul ul ul {
  display: none;
  position: absolute;
  top: 0;
  left: 160px;
}


/* Do Not Move - Must Come Before display:block for Gecko */
ul#navmenu li:hover ul ul,
ul#navmenu li:hover ul ul ul,
ul#navmenu li.iehover ul ul,
ul#navmenu li.iehover ul ul ul {
  display: none;
}


ul#navmenu li:hover ul,
ul#navmenu ul li:hover ul,
ul#navmenu ul ul li:hover ul,
ul#navmenu li.iehover ul,
ul#navmenu ul li.iehover ul,
ul#navmenu ul ul li.iehover ul {
  display: block;
}
.style2 {color: #FF0000}
</style>
<!--[if gte IE 5.5]>
<script language="JavaScript" src="dhtml.js" type="text/JavaScript"></script>
<![endif]-->
</head>
<body>
<ul id="navmenu">
 <li><a href="#">Página Principal</a></li>
 <li><a href="#">Cadastros Gerais +</a>
  <ul>
   <li><a href="#">Assistências +</a>
        <ul>
   <li><a href="consulta_assistencia.asp">Consultar</a></li>
   <li><a href="inclusao_assistencia.asp">Incluir</a></li>
        </ul>
 </li>
        <li><a href="#">Cooperativas +</a></li>
       <ul> 
            <li><a href="#">Consultar</a></li>
              <li><a href="#">incluir</a></li>
          </ul>  
         </ul>
             </li>
     <li><a href="#">Projetos +</a>
    <ul>
      <li><a href="#">Projetos +</a>
       <ul>
                      <li><a href="#">Consultar</a></li>
                      <li><a href="#">Incluir</a></li>
                           </ul>
              </li>
               </ul>
                   </li>
        <li><a href="#">Análise +</a></li>
          <ul>
         <li><a href="#">Projetos +</a>
        <ul>
                        <li><a href="#">Consultar</a></li>
                        <li><a href="#">Analisar</a></li>
                             </ul>
                 </li>
                               </ul>
        <li><a href="#">Suporte Técnico</a></li>
</ul>
</body>
</html>



Postado em 18/10/2006 ás 10:00:00
 Esta mensagem foi útil ao usuário



Perceba abaixo que você tem 5 menus com o tamnho de 160, multiplicando eles você chega aos 800px.


Com isso você pode definir o tamanho do seu menu sem que ele quebre linha.


Copie o código abaixo que ele está ok.


(Verifique as informações em negrito)






<html>
<head>
<title>Menu</title>
<style type="text/css">


 


/* Root = Horizontal, Secondary = Vertical */
ul#navmenu {
  margin: 0;
  border: 1 none;
  padding: 0;
  width: 800px; /*TAMANHO MENU*/
  list-style: none;
  height: 24px;
}


 


ul#navmenu li {
  margin: 0;
  border: 0 none;
  padding: 0;
  float: left; /*For Gecko*/
  display: inline;
  list-style: none;
  position: relative;
  height: 24px;
}


 


ul#navmenu ul {
  margin: 0;
  border: 0 none;
  padding: 0;
  width: 160px;
  list-style: none;
  display: none;
  position: absolute;
  top: 24px;
  left: 0;
}


 


ul#navmenu ul li {
  float: none; /*For Gecko*/
  display: block !important;
  display: inline; /*For IE*/
}


 


/* Root Menu */
ul#navmenu a {
  border: 1px solid #FFF;
  border-right-color: #CCC;
  border-bottom-color: #CCC;
  padding: 0 6px;
  float: none !important; /*For Opera*/
  float: left; /*For IE*/
  display: block;
  background: #EEE;
  color: #666;
  font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;
  text-decoration: none;
  height: auto !important;
  height: 1%; /*For IE*/
  width: 160px; /*TAMANHO CADA BOTÃO*/
 }


 


/* Root Menu Hover Persistence */
ul#navmenu a:hover,
ul#navmenu li:hover a,
ul#navmenu li.iehover a {
  background: #CCC;
  color: #FFF;
}


 


/* 2nd Menu */
ul#navmenu li:hover li a,
ul#navmenu li.iehover li a {
  float: none;
  background: #EEE;
  color: #666;
}


 


/* 2nd Menu Hover Persistence */
ul#navmenu li:hover li a:hover,
ul#navmenu li:hover li:hover a,
ul#navmenu li.iehover li a:hover,
ul#navmenu li.iehover li.iehover a {
  background: #CCC;
  color: #FFF;
}


 


/* 3rd Menu */
ul#navmenu li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li a {
  background: #EEE;
  color: #666;
}


 


/* 3rd Menu Hover Persistence */
ul#navmenu li:hover li:hover li a:hover,
ul#navmenu li:hover li:hover li:hover a,
ul#navmenu li.iehover li.iehover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover a {
  background: #CCC;
  color: #FFF;
}


 


/* 4th Menu */
ul#navmenu li:hover li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li.iehover li a {
  background: #EEE;
  color: #666;
}


 


/* 4th Menu Hover */
ul#navmenu li:hover li:hover li:hover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover li a:hover {
  background: #CCC;
  color: #FFF;
}


 


ul#navmenu ul ul,
ul#navmenu ul ul ul {
  display: none;
  position: absolute;
  top: 0;
  left: 160px;
}


 


/* Do Not Move - Must Come Before display:block for Gecko */
ul#navmenu li:hover ul ul,
ul#navmenu li:hover ul ul ul,
ul#navmenu li.iehover ul ul,
ul#navmenu li.iehover ul ul ul {
  display: none;
}


 


ul#navmenu li:hover ul,
ul#navmenu ul li:hover ul,
ul#navmenu ul ul li:hover ul,
ul#navmenu li.iehover ul,
ul#navmenu ul li.iehover ul,
ul#navmenu ul ul li.iehover ul {
  display: block;
}
.style2 {color: #FF0000}
</style>
<!--[if gte IE 5.5]>
<script language="JavaScript" src="dhtml.js" type="text/JavaScript"></script>
<![endif]-->
</head>
<body>
<ul id="navmenu">
 <li><a href="#">Página Principal</a></li>
 <li><a href="#">Cadastros Gerais +</a>
  <ul>
   <li><a href="#">Assistências +</a>
        <ul>
   <li><a href="consulta_assistencia.asp">Consultar</a></li>
   <li><a href="inclusao_assistencia.asp">Incluir</a></li>
        </ul>
 </li>
        <li><a href="#">Cooperativas +</a></li>
       <ul>
            <li><a href="#">Consultar</a></li>
              <li><a href="#">incluir</a></li>
          </ul>  
         </ul>
             </li>
     <li><a href="#">Projetos +</a>
    <ul>
      <li><a href="#">Projetos +</a>
       <ul>
                      <li><a href="#">Consultar</a></li>
                      <li><a href="#">Incluir</a></li>
                           </ul>
              </li>
               </ul>
                   </li>
        <li><a href="#">Análise +</a></li>
          <ul>
         <li><a href="#">Projetos +</a>
        <ul>
                        <li><a href="#">Consultar</a></li>
                        <li><a href="#">Analisar</a></li>
                             </ul>
                 </li>
                               </ul>
        <li><a href="#">Suporte Técnico</a></li>
</ul>
</body>
</html>


Boa Sorte!


Alexandre de Luccia

=========================
(Qualifica a mensagem, fica mais fácil de saber se posso ajudar ou não)



Topo


Exibindo página 1 de 1 encontradas
SuperASP do Brasil Ltda - contato@superasp.com.br

© 2001/2008 - Superasp do Brasil Ltda. Todos os direitos reservados