Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

edu4rdo

Menu inline drop-down

Por , em Desenvolvimento frontend

Recommended Posts

edu4rdo    0

edu4rdo
Postado

Seguinte gurizada, tive a necessidade de ter um menu inline com drop-down. Como não achei muita referência, tomei como base o do Maujor (http://www.maujor.com/tutorial/ddownmenu.php) e alterei algumas coisas.

Está funcionando (sem nenhuma frescura), mas queria saber se o código está certo, ou se tem alguma forma diferente de se fazer. Valeu!

 

Segue o código:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<script>

startList = function() {

if (document.all&&document.getElementById) {

navRoot = document.getElementById("nav");

for (i=0; i<navRoot.childNodes.length; i++) {

node = navRoot.childNodes;

if (node.nodeName=="LI") {

node.onmouseover=function() {

this.className+=" over";

}

node.onmouseout=function() {

this.className=this.className.replace

(" over", "");

}

}

}

}

}

window.onload=startList;

</script>

<style type="text/css">

/* Fix IE. Hide from IE Mac \*/

* html ul li { float: left; height: 1%; }

* html ul li a { height: 1%; }

/* End */

.menu {

display: inline;

position: relative;

}

.submenu {

position: absolute;

top: 15;

left: -40;

display: none;

}

.opcao {

display: block;

position: relative;

}

li:hover ul, li.over ul { display: block; }

</style>

</head>

<body>

<ul id="nav">

<li class="menu"><a href="#">Home</a> |</li>

<li class="menu"><a href="#">About</a>

<ul class="submenu">

<li><a href="#" class="opcao">History</a></li>

<li><a href="#" class="opcao">Team</a></li>

<li><a href="#" class="opcao">Offices</a></li>

</ul> |

</li>

<li class="menu"><a href="#">Services</a>

<ul class="submenu">

<li><a href="#" class="opcao">Web Design</a></li>

<li><a href="#" class="opcao">Internet Marketing</a></li>

<li><a href="#" class="opcao">Hosting</a></li>

<li><a href="#" class="opcao">Domain Names</a></li>

<li><a href="#" class="opcao">Broadband</a></li>

</ul> |

</li>

<li class="menu"><a href="#">Contact Us</a>

<ul class="submenu">

<li><a href="#" class="opcao">United Kingdom</a></li>

<li><a href="#" class="opcao">France</a></li>

<li><a href="#" class="opcao">USA</a></li>

<li><a href="#" class="opcao">Australia</a></li>

</ul>

</li>

</ul>

</body>

</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito