Ir para conteúdo

POWERED BY:

Arquivado

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

pcdesign

Menu Horizontal c/ submenu de 3 a 4 níveis

Por , em Desenvolvimento frontend

Recommended Posts

pcdesign    0

pcdesign
Postado

Sei que ja tem muito sobre o assunto mas infelismente não encontrei resposta.

Peguei um menu na web e queria adcionar mas um ou dois níveis no submenu,

ja tentei fazer mas não consegui fazer.

 

MENU

Submenu

Submenu

Submenu -> Itemsubmenu

-> Itemsubmenu

-> Itemsubmenu

-> Itemsubmenu

-> Itemsubmenu

 

Se alguem poder me ajudar vai ai o código:

 

<!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="fr" lang="fr">

<head>

<title>Expanding horizontal menu</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

 

<script type="text/javascript">

<!--

function montre(id) {

var d = document.getElementById(id);

for (var i = 1; i<=10; i++) {

if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}

}

if (d) {d.style.display='block';}

}

//-->

</script>

 

 

<style type="text/css">

<!--

/* CSS from tutorials of www.alsacreations.com/articles */

body {

margin: 0;

padding: 0;

background: white;

font: 80% verdana, arial, sans-serif;

 

}

 

 

dl, dt, dd, ul, li {

margin: 0;

padding: 0;

list-style-type: none;

}

#menu {

position: absolute;

top: 0;

left: 0;

z-index:100;

width: 100%; /* precision for Opera */

}

#menu dl {

float: left;

width: 12em;

}

#menu dt {

cursor: pointer;

text-align: center;

font-weight: bold;

background: #ccc;

border: 1px solid gray;

margin: 1px;

}

 

#menu dd {

display: none;

border: 1px solid gray;

}

 

 

#menu li {

text-align: center;

background: #fff;

}

 

#menu li a, #menu dt a {

color: #000;

text-decoration: none;

display: block;

height: 100%;

border: 0 none;

}

#menu li a:hover, #menu dt a:hover {

background: #eee;

}

 

-->

</style>

</head>

 

<body>

 

<div id="menu">

<dl>

<dt onmouseover="java script:montre();"><a href="" title="Retour à l'accueil">Home</a></dt>

</dl>

 

<dl>

<dt onmouseover="java script:montre('smenu1');">Menu 1</dt>

<dd id="smenu1" onmouseover="java script:montre('smenu1');" onmouseout="java script:montre();">

<ul>

<li><a href="#">Sub Menu 1.1</a></li>

<li><a href="#">Sub Menu 1.2</a></li>

<li><a href="#">Sub Menu 1.3</a></li>

<li><a href="#">Sub Menu 1.4</a></li>

<li><a href="#">Sub Menu 1.5</a></li>

<li><a href="#">Sub Menu 1.6</a></li>

</ul>

</dd>

</dl>

 

 

<dl>

<dt onmouseover="java script:montre();"><a href="">Menu 2</a></dt>

</dl>

 

<dl>

<dt onmouseover="java script:montre('smenu3');" onmouseout="java script:montre();">Menu 3</dt>

<dd id="smenu3" onmouseover="java script:montre('smenu3');" onmouseout="java script:montre();">

<ul>

<li><a href="#">Sub Menu 3.1</a></li>

<li><a href="#">Sub Menu 3.2 </a>

<li><a href="#">Sub Menu 3.1</a></li>

<li><a href="#">Sub Menu 3.2</a></li>

 

<li><a href="#">Sub Menu 3.3</a></li>

<li><a href="#">Sub Menu 3.4</a></li>

<li><a href="#">Sub Menu 3.5</a></li>

</ul>

</dd>

</dl>

 

<dl>

<dt onmouseover="java script:montre('smenu4');" onmouseout="java script:montre();">Menu 4</dt>

<dd id="smenu4" onmouseover="java script:montre('smenu4');" onmouseout="java script:montre();">

<ul>

<li><a href="#">Sub Menu 4.1</a></li>

<li><a href="#">Sub Menu 4.2</a></li>

<li><a href="#">Sub Menu 4.3</a></li>

</ul>

</dd>

</dl>

 

<dl>

<dt onmouseover="java script:montre('smenu6');" onmouseout="java script:montre();">Menu 6</dt>

<dd id="smenu6" onmouseover="java script:montre('smenu6');" onmouseout="java script:montre();">

<ul>

<li><a href="#">Sub Menu 4.1</a></li>

<li><a href="#">Sub Menu 4.2</a></li>

<li><a href="#">Sub Menu 4.3</a></li>

</ul>

</dd>

</dl>

</div>

 

 

 

</body>

</html>

Desde ja muito obrigado

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