Código Fonte - O melhor conteúdo para programadores

Autor

André Luiz Martins Ramos

membro deste março de 2007

DHTML

Menu com sublinks com o estilo do Outlook

Para quem procura um menu que se assemelha ao utilizado pelo Microsoft Outlook.

Este tipo de menu é ideal, pois além de, praticamente, ter o mesmo visual e funcionalidade, é de fácil customização e também é prático para quem tem pouco espaço no site.

Pode ser facilmente dinamizado utilizando PHP, ASP, ... com algum banco de dados.

<html>
<head>
<title>Menu nouve</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.menutitle{
cursor:pointer;
margin-bottom: 1px;
background-color:orange;
color:black;
width:136px;
padding:1px;
text-align:center;
font-weight:bold;
/*/*/border:1px black solid;/* */
; font-size: 11px}
.submenu{
margin-bottom: 0.5em;
margin-left: 1em;
width:136px;
font-size: 10px}
A:Hover  {
	color: white;
	background-color: gray;
	text-decoration: underline;
}
.title1 {
background-color:orange;
font-color:white;
font-weight:bold;
/*/*/border:1px black solid;/* */;
padding:1px;
font-size: 12px;
color:black;
width:136px;}
}
</style>
<script type="text/javascript">

/***********************************************
* Switch Menu script- by Martial B of http://getElementById.com/
* Modified by Dynamic Drive for format & NS4/IE4 compatibility
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

if (document.getElementById){ //DynamicDrive.com change
document.write('<style type="text/css">\n')
document.write('.submenu{display: none;}\n')
document.write('</style>\n')
}

function SwitchMenu(obj){
	if(document.getElementById){
	var el = document.getElementById(obj);
	var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change
		if(el.style.display != "block"){ //DynamicDrive.com change
			for (var i=0; i<ar.length; i++){
				if (ar[i].className=="submenu") //DynamicDrive.com change
				ar[i].style.display = "none";
			}
			el.style.display = "block";
		}else{
			el.style.display = "none";
		}
	}
}

</script>
</head>

<body TOPMARGIN=0 LEFTMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 bgcolor="#FFFFFF">
<!-- Todos os menus dentro do intervalo de masterdiv-->
<div class="title1" >
  <div align="center"> M E N U </div>
</div>
<div id="masterdiv">
  <div class="menutitle" onclick="SwitchMenu('sub1')">1º Pagina</div>
	<span class="submenu" id="sub1">
		:) <a href="html" target="right">link1</a> (:<br>
		:) <a href="html" target="right">link2</a> (:<br>
		:) <a href="html" target="right">link3</a> (:<br>
		:) <a href="html" target="right">link4</a> (:<br>
	</span>
  <div class="menutitle" onclick="SwitchMenu('sub2')">2º Pagina</div>
	<span class="submenu" id="sub2">
		:) <a href="html" target="Fr2">link1</a> (:<br>
		:) <a href="html" target="Fr2">link2</a> (:<br>

	</span>
  <div class="menutitle" onclick="SwitchMenu('sub3')">3º Pagina</div>
  <span class="submenu" id="sub3">
	   :) <a href="html"  target="right">link1</a> (:<br>
	   :) <a href="html"  target="right">link2</a> (:<br>
	</span>
  <div class="menutitle" onclick="SwitchMenu('sub4')" style="width: 136; height: 19">4º Pagina</div>
	<span class="submenu" id="sub4">
		:) <a href="html"  target="Fr2">link1</a> (:<br>
		:) <a href="html" target="Fr2">link2</a> (:<br>
  </span> </div>
</body>
</html>

<html>
<head>
<title>Menu nouve</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.menutitle{
cursor:pointer;
margin-bottom: 1px;
background-color:orange;
color:black;
width:136px;
padding:1px;
text-align:center;
font-weight:bold;
/*/*/border:1px black solid;/* */
; font-size: 11px}
.submenu{
margin-bottom: 0.5em;
margin-left: 1em;
width:136px;
font-size: 10px}
A:Hover  {
	color: white;
	background-color: gray;
	text-decoration: underline;
}
.title1 {
background-color:orange;
font-color:white;
font-weight:bold;
/*/*/border:1px black solid;/* */;
padding:1px;
font-size: 12px;
color:black;
width:136px;}
}
</style>
<script type="text/javascript">

/***********************************************
* Switch Menu script- by Martial B of http://getElementById.com/
* Modified by Dynamic Drive for format & NS4/IE4 compatibility
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

if (document.getElementById){ //DynamicDrive.com change
document.write('<style type="text/css">\n')
document.write('.submenu{display: none;}\n')
document.write('</style>\n')
}

</script>
</head>

<body TOPMARGIN=0 LEFTMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 bgcolor="#FFFFFF">

<div class="title1" >
  <div align="center"> M E N U </div>
</div>
<div id="masterdiv">
  <div class="menutitle" onclick="SwitchMenu('sub1')">1º Pagina</div>
	<span class="submenu" id="sub1">
		:) <a href="html" target="right">link1</a> (:<br>
		:) <a href="html" target="right">link2</a> (:<br>
		:) <a href="html" target="right">link3</a> (:<br>
		:) <a href="html" target="right">link4</a> (:<br>
	</span>
  <div class="menutitle" onclick="SwitchMenu('sub2')">2º Pagina</div>
	<span class="submenu" id="sub2">
		:) <a href="html" target="Fr2">link1</a> (:<br>
		:) <a href="html" target="Fr2">link2</a> (:<br>

</span>
  <div class="menutitle" onclick="SwitchMenu('sub3')">3º Pagina</div>
  <span class="submenu" id="sub3">
	   :) <a href="html"  target="right">link1</a> (:<br>
	   :) <a href="html"  target="right">link2</a> (:<br>
	</span>
  <div class="menutitle" onclick="SwitchMenu('sub4')" style="width: 136; height: 19">4º Pagina</div>
	<span class="submenu" id="sub4">
		:) <a href="html"  target="Fr2">link1</a> (:<br>
		:) <a href="html" target="Fr2">link2</a> (:<br>
  </span> </div>
</body>
</html>

Este código foi útil para você?

Nota	Comentário
Ainda não foi enviado nenhum comentário.

Regras:
Os comentários seguem as seguintes regras:

Todos os comentários são enviados por membros cadastrados no site.
A pontuação de comentários de conteúdo do próprio membro não serão computados.
Os comentários serão pré-aprovados, porém a equipe do site revisará o conteúdo de todos os comentários podendo ser invalidados (inclusive a pontuação).
Os comentários precisam ter, obrigatóriamente, coerência sobre o conteúdo que será comentado.
O membro que atingir 5 comentários invalidados não poderá mais comentar dentro do site. Com isso o membro não poderá mais ganhar pontos com comentários.
Há um limite de 10 comentários por dia para cada membro.
Qualquer comentário após ter sido publicado poderá ser retirado através da opção ( denunciar)

Comente

Autenticação:	Apelido: Senha: (ainda não tem cadastro? clique aqui!)

Título:	Máximo de 30 caracteres
Comentário:	Máximo de 255 caracteres
Avaliação:

Equipe | Tabela de Pontos e Estrelas | Política de Privacidade | Mapa do Site | Fale Conosco

Autor

André Luiz Martins Ramos

Tags

DHTML

Menu

Compartilhe e guarde

Enquete

Qual é o melhor site de buscas da internet?

Menu com sublinks com o estilo do Outlook

Comente