Menu em CSS simples + legal!

_M!K0L_ · Outubro 5, 2007

#CSS:

PHP

#menu { background-color:#CCCCCC; padding: 3px; width: 167px; }

#over { background-color:#A4D1FF; width: 150px; padding-left: 10px; font: Arial; margin: 3px; }

#over div.menu { background-color:#FFFFFF; padding: 2px; }

#over a.linkk { text-decoration:none; color:#000000; }

#over:hover { background-color:#999999; text-decoration: underline; }

</style>

dentro da tag BODY, o menu...

PHP

Link #1

</div>

</a>

</div>

Link #2

</div>

</a>

</div>

Link #3</div>

</a>

</div>

Link #4</div>

</a>

</div>

Link #5</div>

</a>

</div>

Resultado:

Imagem Postada

Resultado com o mouse em cima do Link #2

Imagem Postada

Giovani · Outubro 6, 2007

_M!K0L_, me perdoe pelo comentário que vou fazer, mas como moderador da área me sinto na obrigação de fazer.

O que você fez pode até funcionar, mas não está totalmente correto.

Para construir um menu, você deve usar as tag's <ul><li></li>...<li></li></ul> e não uma div dentro de outra div que fica dentro de outra div.

Pesquise no fórum principal de WS sobre menu, você vai ver que existem maneiras bem mais práticas de fazer isso. Pesquise também sobre divmania.

Reitero, pode até funcionar, mas não está correto.

Qualquer dúvida, por favor, entre em contato.

Att,

Giovani

_M!K0L_ · Outubro 6, 2007

opa vlw pela dica, é que estou começando a aprofundar os maus conhecimentos em CSS, bom o que eu sei é o basico do basico de css,...quando eu fiz essi menu, eu achei facil faze-lo dese jeito, mais vou dar uma olhada para fazer uns menu legal com<ul><li></li></ul>vlw!

Giovani · Outubro 6, 2007

Antes de postar algum "tutorial" aprofunde-se no assunto, é melhor. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

opa vlw pela dica, é que estou começando a aprofundar os maus conhecimentos em CSS, bom o que eu sei é o basico do basico de css,...

_M!K0L_ · Outubro 6, 2007

o que vale é a intenção ^^;Pe outra sai bonitinho o menu ;Pvai dizer ;D

Giovani · Outubro 6, 2007

Concordo, o que vale é a intenção, e ficou bonitinho.Mas não está correto.

o que vale é a intenção ^^;Pe outra sai bonitinho o menu ;Pvai dizer ;D

Lucas Simas · Fevereiro 24, 2008

Olá, olha esse menu q eu achei na net, mt legal, se quiserem pegar o codigo, aí vai:

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<title>Menu horizontal e vertical</title> 
 
<script type="text/javascript"> 
function vertical() { 
 
   var navItems = document.getElementById("nav").getElementsByTagName("li"); 
 
   for (var i=0; i< navItems.length; i++) { 
      if(navItems.className == "submenu") { 
         navItems.onmouseover=function() {this.getElementsByTagName('ul')[0].style.display="block";this.style.backgroundColor = "#f9f9f9";} 
         navItems.onmouseout=function() {this.getElementsByTagName('ul')[0].style.display="none";this.style.backgroundColor = "#FFFFFF";} 
      } 
   } 
 
} 
 
function horizontal() { 
 
   var navItems = document.getElementById("barra").getElementsByTagName("li"); 
 
   for (var i=0; i< navItems.length; i++) { 
      if((navItems.className == "menuvertical") || (navItems.className == "submenu")) 
      { 
         if(navItems.getElementsByTagName('ul')[0] != null) 
         { 
            navItems.onmouseover=function() {this.getElementsByTagName('ul')[0].style.display="block";this.style.backgroundColor = "#f9f9f9";} 
            navItems.onmouseout=function() {this.getElementsByTagName('ul')[0].style.display="none";this.style.backgroundColor = "#FFFFFF";} 
         } 
      } 
   } 
 
} 
 
</script> 
 
<style type="text/css"> 
 
body { font: normal 62.5% verdana; } 
 
ul.menubar 
{ 
   margin: 0px; 
   padding: 0px; 
   background-color: #FFFFFF; /* IE6 Bug */ 
   font-size: 100%; 
   } 
 
ul.menubar .menuvertical 
{ 
   margin: 0px; 
     padding: 0px; 
     list-style: none; 
     background-color: #FFFFFF; 
   border: 1px solid #ccc; 
   float:left; 
} 
 
ul.menubar ul.menu 
{ 
   display: none; 
   position: absolute; 
   margin: 0px; 
} 
 
ul.menubar a 
{ 
   padding: 5px; 
   display:block; 
   text-decoration: none; 
   color: #777; 
   padding: 5px; 
} 
 
 
ul.menu, 
ul.menu ul 
{ 
   margin: 0; 
   padding: 0; 
   border-bottom: 1px solid #ccc; 
   width: 150px; /* Width of Menu Items */ 
   background-color: #FFFFFF; /* IE6 Bug */ 
} 
 
ul.menu li 
{ 
   position: relative; 
   list-style: none; 
   border: 0px; 
} 
 
ul.menu li a 
{ 
   display: block; 
   text-decoration: none; 
   border: 1px solid #ccc; 
   border-bottom: 0px; 
   color: #777; 
   padding: 5px 10px 5px 5px; 
} 
 
/* Fix IE. Hide from IE Mac \*/ 
* html ul.menu li { float: left; height: 1%; } 
* html ul.menu li a { height: 1%; } 
/* End */ 
 
ul.menu ul 
{ 
   position: absolute; 
   display: none; 
   left: 149px; /* Set 1px less than menu width */ 
   top: 0px; 
} 
 
ul.menu li.submenu ul { display: none; } /* Hide sub-menus initially */ 
 
ul.menu li.submenu { background: transparent url(arrow.gif) right center no-repeat; } 
 
ul.menu li a:hover { color: #E2144A; } 
 
</style> 
</head> 
<body onload="vertical();horizontal();"> 
<ul id="nav" class="menu"> 
  <li><a href="#">Home</a></li> 
 
  <li class="submenu"><a href="#">About</a> 
    <ul> 
      <li><a href="#">History</a></li> 
      <li><a href="#">Team</a></li> 
      <li><a href="#">Offices</a></li> 
    </ul> 
  </li> 
 
  <li class="submenu"><a href="#">Services</a> 
    <ul> 
      <li><a href="#">Web Design</a></li> 
      <li><a href="#">Internet Marketing</a></li> 
      <li class="submenu"><a href="#">Hosting</a> 
        <ul> 
          <li><a href="#">Dedicated</a></li> 
 
          <li class="submenu"><a href="#">Virtual</a> 
         <ul> 
            <li><a href="#">United Kingdom</a></li> 
            <li><a href="#">France</a></li> 
            <li><a href="#">USA</a></li> 
 
            <li><a href="#">Australia</a></li> 
          </ul> 
        </li> 
          <li><a href="#">Shared</a></li> 
          <li><a href="#">Managed</a></li> 
        </ul> 
      </li> 
      <li><a href="#">Domain Names</a></li> 
      <li><a href="#">Broadband</a></li> 
 
    </ul> 
  </li> 
  <li class="submenu"><a href="#">Contact Us</a> 
    <ul> 
      <li><a href="#">United Kingdom</a></li> 
      <li><a href="#">France</a></li> 
      <li><a href="#">USA</a></li> 
 
      <li><a href="#">Australia</a></li> 
    </ul> 
  </li> 
</ul> 
<br /> 
<br /> 
<br /> 
<br /> 
<ul id="barra" class="menubar"> 
   <li class="menuvertical"><a href="#">Menu 1</a> 
      <ul id="nav" class="menu"> 
        <li><a href="#">Home</a></li> 
 
        <li class="submenu"><a href="#">About</a> 
          <ul> 
            <li><a href="#">History</a></li> 
            <li><a href="#">Team</a></li> 
            <li><a href="#">Offices</a></li> 
          </ul> 
        </li> 
 
        <li class="submenu"><a href="#">Services</a> 
          <ul> 
            <li><a href="#">Web Design</a></li> 
            <li><a href="#">Internet Marketing</a></li> 
            <li class="submenu"><a href="#">Hosting</a> 
              <ul> 
                <li><a href="#">Dedicated</a></li> 
 
                <li class="submenu"><a href="#">Virtual</a> 
               <ul> 
                  <li><a href="#">United Kingdom</a></li> 
                  <li><a href="#">France</a></li> 
                  <li><a href="#">USA</a></li> 
 
                  <li><a href="#">Australia</a></li> 
                </ul> 
              </li> 
                <li><a href="#">Shared</a></li> 
                <li><a href="#">Managed</a></li> 
              </ul> 
            </li> 
            <li><a href="#">Domain Names</a></li> 
            <li><a href="#">Broadband</a></li> 
 
          </ul> 
        </li> 
        <li class="submenu"><a href="#">Contact Us</a> 
          <ul> 
            <li><a href="#">United Kingdom</a></li> 
            <li><a href="#">France</a></li> 
            <li><a href="#">USA</a></li> 
 
            <li><a href="#">Australia</a></li> 
          </ul> 
        </li> 
      </ul> 
   </li> 
   <li class="menuvertical"><a href="#">Menu 2</a></li> 
   <li class="menuvertical"><a href="#">Menu 3</a> 
      <ul id="nav" class="menu"> 
        <li><a href="#">Home</a></li> 
 
        <li class="submenu"><a href="#">About</a> 
          <ul> 
            <li><a href="#">History</a></li> 
            <li><a href="#">Team</a></li> 
            <li><a href="#">Offices</a></li> 
          </ul> 
        </li> 
 
        <li class="submenu"><a href="#">Services</a> 
          <ul> 
            <li><a href="#">Web Design</a></li> 
            <li><a href="#">Internet Marketing</a></li> 
            <li class="submenu"><a href="#">Hosting</a> 
              <ul> 
                <li><a href="#">Dedicated</a></li> 
 
                <li class="submenu"><a href="#">Virtual</a> 
               <ul> 
                  <li><a href="#">United Kingdom</a></li> 
                  <li><a href="#">France</a></li> 
                  <li><a href="#">USA</a></li> 
 
                  <li><a href="#">Australia</a></li> 
                </ul> 
              </li> 
                <li><a href="#">Shared</a></li> 
                <li><a href="#">Managed</a></li> 
              </ul> 
            </li> 
            <li><a href="#">Domain Names</a></li> 
            <li><a href="#">Broadband</a></li> 
 
          </ul> 
        </li> 
        <li class="submenu"><a href="#">Contact Us</a> 
          <ul> 
            <li><a href="#">United Kingdom</a></li> 
            <li><a href="#">France</a></li> 
            <li><a href="#">USA</a></li> 
 
            <li><a href="#">Australia</a></li> 
          </ul> 
        </li> 
      </ul> 
   </li> 
</ul> 
 
</body> 
</html>

brcontainer · Março 12, 2008

Concordo com o Giovani

1- não se deve repetir IDs esse menu tem um monte de ID repetida

2- tem muitas coisas desnecessarias (Divs em locais desnecessarios)

3- tem muita TAG pra pouca coisa

4- o certo é usar UL e LI como o Giovani disse

depois disso tudo que tal vermos o resultado se esse menu fosse limpo e correto (com listas)

<style type="text/css">
*{
margin:0;
padding:0;
list-style:none;
}
#menu {
font: Arial;
background:#ccc;
padding: 3px;
width: 167px;
}
#menu ul li {
display:block;
background:#fff;
margin: 3px;
}
#menu ul li a {
height:20px;
padding: 2px;
border-left:10px #A4D1FF solid;
display:block;
text-decoration:none;
color:#000000;
}
#menu ul li a:hover {
border-color:#999;
text-decoration: underline;
}
</style>

<div id="menu">
	<ul>
		<li><a href="">Link #1</a></li>
		<li><a href="">Link #2</a></li>
		<li><a href="">Link #3</a></li>
		<li><a href="">Link #4</a></li>
		<li><a href="">Link #5</a></li>
	</ul>
</div>

pronto o resultado é indentico visivelmente, porem fica bem mais simples no código e bem menor e claro da maneira correta.

espero que assim eu tenha lhe ajudado _M!K0L_

falow abraço ;)

Uriel Juliatti · Abril 2, 2008

Exatamente! No livro do Maujor fala dessa forma! Evita o excesso de divs.. Se o intuito da linguagem é facilicar, não há porque complicar!

Mas gostei do tutorial!

É basicamente o que estou fazendo.

Arquivado

Menu em CSS simples + legal!

Recommended Posts

_M!K0L_ 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Giovani 104

Compartilhar este post

Link para o post

Compartilhar em outros sites

_M!K0L_ 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Giovani 104

Compartilhar este post

Link para o post

Compartilhar em outros sites

_M!K0L_ 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Giovani 104

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lucas Simas 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

brcontainer 16

Compartilhar este post

Link para o post

Compartilhar em outros sites

Uriel Juliatti 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Consulta SQL dentro de outra consulta

problema em usar json para realizar engenharia de dados

Soma dos dias utilizados

Fóruns

Tempo Real

Informação importante