Ir para conteúdo
Fórum Script Brasil
  • 0

[Código Pronto] Menu CSS modificado


MLeandroJr!

Pergunta

Boa noite turma!

Certo dia ví um usuário com dúvida em um menu CSS / JavaScript aqui no fórum.

Na época lembro-me que já estavam ajudando a resolver, então nem me intrometi no tópico, mas acabei pegando o código para ver.

Acabei modificando o código do menu para ver o que acontecia e eis aqui o resultado:

Um menu na horizontal que:

- Se abre com um clique sobre ele

- Se fecha com um novo clique sobre ele

- Se fecha com um clique em um item dele

- Se fecha com um clique em outra coluna dele

- Se mantém aberto com o mouse fora dele

- Se fecha com um clique fora dele

Na verdade eu o havia montado buscando os resultados do meu database (MySQL), mas estou postando aqui uma versão estática do mesmo.

Espero que gostem. =)

menu.html


<!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" lang="pt-br" xml:lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Menu Horizontal</title>

<script type="text/javascript">
function horizontal() {
var navItems = document.getElementById("barra").getElementsByTagName("li");
for (var i=0; i< navItems.length; i++) {
if((navItems[i].className == "menuvertical") || (navItems[i].className == "submenu")){
if(navItems[i].getElementsByTagName('ul')[0] != null){
navItems[i].onblur=function() {
this.getElementsByTagName('ul')[0].style.display="none";
this.style.backgroundColor = "#F9F9F9";
}
navItems[i].onclick=function() {
if (this.getElementsByTagName('ul')[0].style.display == "block"){
this.getElementsByTagName('ul')[0].style.display="none";
}
else {
this.getElementsByTagName('ul')[0].style.display="block";
}
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="horizontal();">
<ul id="barra" class="menubar">
<li class="menuvertical"><a href="#">Arquivo</a>
<ul id="nav" class="menu">
<li><a href="#">P&aacute;gina Inicial</a></li>
<li><a href="#">Sair</a></li>
</ul>
</li>
<li class="menuvertical"><a href="#">M&oacute;dulos</a>
<ul id="nav" class="menu">
<li><a href="#">Ver Usu&aacute;rios</a></li>
<li><a href="#">Ver Clientes</a></li>
<li><a href="#">Ver Estoque</a></li>
<li><a href="#">Entrada de produtos</a></li>
<li><a href="#">Sa&iacute;da de Produtos</a></li>
<li><a href="#">Pesquisa de Produtos</a></li>
<li><a href="#">Ver Cadastros de RMA</a></li>
</ul>
</li>
<li class="menuvertical"><a href="#">Op&ccedil;&otilde;es</a>
<ul id="nav" class="menu">
<li><a href="#">Otimizar Sistema</a></li>
<li><a href="#">Fazer Backup</a></li>
<li><a href="#">Restaurar Backup</a></li>
</ul>
</li>
<li class="menuvertical"><a href="#">Ajuda</a>
<ul id="nav" class="menu">
<li><a href="#">T&oacute;picos da Ajuda</a></li>
<li><a href="#">Sobre...</a></li>
</ul>
</li>
</ul>
</body>
</html>
[/codebox]

----------

Ué, onde estava essa área que até ontem eu não ví?

Será que eu estava com tanto sono assim? :huh:

Podem apagar o link de movido já. =)

Link para o comentário
Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,4k
×
×
  • Criar Novo...