tutoriais category image
Pop-it menu
Sunday 17/02/2008 às 15:57 | Arquivado em: ,

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:

Posts Relacionados




3 Comentários em “Pop-it menu”


Jão_Di_Sousa 22-12-2008 | 18:57 Responder

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 Responder

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 Responder

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


Comentar


Os comentários desse blog são MODERADOS, portanto só serão publicados após a minha aprovação. Comentários com propagandas e divulgações não serão aprovados. Obrigada.





38 37 36 35 34 33 32 31 30 29 28 27 26 25 24 23 21 20 19 18 17 16 15 14 13 12 11 10 9 8 6 5 4 3 2 1