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

Este código tem nota

Autor

Everton da Rosa

membro deste janeiro de 2007

JavaScript

Compartilhe e guarde

Enquete

Google Chrome OS ameaça a liderança do Windows da Microsoft?

Não
Sim

Home Código Fonte JavaScript - DHTML Menus e Navegação

Criando um menu overflow simples

Este script cria o efeito de overflow num menu (menu que pode ser escondido e mostrado).

O segredo está na manipulação da propriedade display da div menu-magico-link.

Você pode chamar a função menu_magico() também com o evento onmouseover.

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

<head>
	<title>Menu Mágico</title>
	<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
	<meta name="generator" content="Geany 0.16" />
	<style>
		#menu-magico {
			position: absolute;
			top: 0;
			left; 0;
			text-align: right;
			padding: 3px 3px 3px 3px;
		}
		
		#menu-magico-button {
			background-color: red;
			float: right;
		}
	</style>
	
	<script language="javascript">
	
	function menu_magico(){
		var links = document.getElementById('menu-magico-links');
		
		if(links.style.display == 'none'){
			links.style.display = 'inline';
		}else{
			links.style.display = 'none';
		}
	}
	</script>
</head>

<body>
<div id="menu-magico">
	<div id="menu-magico-links" style="display: none;">
		<a href="http://dotinfo.wordpress.com">.Info</a>
		<a href="http://dotlibrary.blogspot.com">.Library</a>
		<a href="http://codigofonte.uol.com.br">Código Fonte</a>
		<a href="http://www.vivaolinux.com.br">Viva o Linux</a>
	</div>
	<div id="menu-magico-button">
		<a href="javascript: menu_magico()">Menu</a>
	</div>
</div>
</body>
</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" xml:lang="en" lang="en">

<head>
	<title>Menu Mágico</title>
	<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
	<meta name="generator" content="Geany 0.16" />
	<style>
		#menu-magico {
			position: absolute;
			top: 0;
			left; 0;
			text-align: right;
			padding: 3px 3px 3px 3px;
		}
		
		#menu-magico-button {
			background-color: red;
			float: right;
		}
	</style>
	
	<script language="javascript">
	
	function menu_magico(){
		var links = document.getElementById('menu-magico-links');
		
		if(links.style.display == 'none'){
			links.style.display = 'inline';
		}else{
			links.style.display = 'none';
		}
	}
	</script>
</head>

<body>
<div id="menu-magico">
	<div id="menu-magico-links" style="display: none;">
		<a href="http://dotinfo.wordpress.com">.Info</a>
		<a href="http://dotlibrary.blogspot.com">.Library</a>
		<a href="http://codigofonte.uol.com.br">Código Fonte</a>
		<a href="http://www.vivaolinux.com.br">Viva o Linux</a>
	</div>
	<div id="menu-magico-button">
		<a href="javascript: menu_magico()">Menu</a>
	</div>
</div>
</body>
</html>

Este código foi útil para você?

Nota	Comentário
10	denunciar kennyhard comentou em 20/10/2009 Muito útil Parabéns, esse menu é útil, e muito estético também.

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

Everton da Rosa

Tags

CSS

DHTML