[Código Pronto] Menu CSS modificado

MLeandroJr! · Fevereiro 14, 2008

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á. =)

paulino matias · Setembro 13, 2015

oi estou fazendo um projeto na faculdade colocaram eu pra fazer a parte de css mas eu não entendo nada poderia me ajudar e coisa simples grato.

Entrar

[Código Pronto] Menu CSS modificado

Pergunta

MLeandroJr!

Link para o comentário

Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

paulino matias

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades