Jump to content
Fórum Script Brasil
  • 0

[Código Pronto] Menu CSS modificado


MLeandroJr!

Question

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 to comment
Share on other sites

1 answer to this question

Recommended Posts

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.



  • Forum Statistics

    • Total Topics
      152k
    • Total Posts
      651.5k
×
×
  • Create New...