Tutoriais  17/02/2008 

Pop-it menu

Menu em javascript, você pode usar para seus links de login, ou como menu de navegação mesmo.
Página do script Dynamicdrive e foi totalmente modificado por mim, por tanto se fizer uso dele, credite.

01. Faça o download do arquivo pop-it-menu e descompacte.
02. Abra o arquivo e procure por:

linkset[0]='<div class="menu-nav"><a href="http://www.link.com" target="new">Link 1</a></div>'
linkset[0]+='<div class="menu-nav"><a href="http://www.link.com" target="new">Link 2</a></div>'
linkset[0]+='<div class="menu-nav"><a href="http://www.link.com" target="new">Link 3</a></div> '
linkset[0]+='<div class="menu-nav"><a href="http://www.link.com" target="new">Link 4</a></div>'
linkset[0]+='<div class="menu-nav"><a href="http://www.link.com" target="new">Link 5</a></div>'

Altere os links do seu menu como preferir.

03. Salve o arquivo e envie para seu servidor.
04.Após a tag head coloque:

<script type="text/javascript" src="http://www.SITE.com/pop-it-menu.js"></script>

Substituindo "SITE" pelo endereço correto do arquivo pop-it-menu.js.
05. No seu css adicione o código a seguir e modifique como quiser:

.menu-nav{
display: block;
font-family:tahoma;
border-bottom:1px solid #f0f0f0;
display: block;
margin:0;
padding: 2px 6px 2px 2px;
height: auto;
}
.menu-nav:hover {
display: block;
background-color: #f8f8f8;
}
#popitmenu{
position: absolute;
font-size: 10px;
font-family:tahoma;
background-color:#ffffff;
letter-spacing: 2px;
border: 1px solid #e8e8e8;
z-index: 100;
visibility: hidden;
}

06. Onde quer que o menu apareça, use:

<a title="Login" href="#" onMouseover="showmenu(event,linkset[0])" onMouseout="delayhidemenu()">Menu</a>

Você pode alterar a palavra "Menu" por uma imagem se quiser.

07. O resultado será semelhante a esse:


Leia Também

Responder Comentário de Jão_Di_Sousa Cancelar Resposta

22/12/2008 ・ 18:57

Era exatamente isso que eu estava procurando!
Muito obrigado! Fiz as devidas adaptações e estou usando em meu blog.
Tutorial simples e claro. Parabéns. xD

priscila menezes
06/07/2011 ・ 20:48

Oii Tamara,
gostaria muito que você tirasse minha dúvida, mas enviasse a resposta para o meu e-mail, pq não uso blog… esse tutorial que você explicou, eu usarei ele no meu tumblr… ja fiz os testes e ficou ok, mas os links abrem em oura página, tem como os links abrirem na mesma página?

Obrigada desde já!
beijos ;*

Nathy
21/01/2012 ・ 18:29

Olá, eu gosto muito daqui, e vi a visualização do menu pop-it, mas mesmo assim, não entendi como ele é direito…