"Um menu drop-down simples utilizando Jquery"
Autor: Edilene brandao da silva | Publicado: 2013-05-11T08:53:00-07:00

você está em:&nbsp; ►home►cair,para,baixo,Menu,jQuery,Plugin,efeito,deslizar,desvanecer,efeito,opacidade,modo,sombra,semitransparente,navegação,HTML,CSS
"Um menu drop-down simples utilizando Jquery"





&nbsp; Este código de widget,&nbsp;
no qual você pode,
mudar 
as cores do "menu",&nbsp;
de modo a combinar com o seu blog.






"Menu Horizontal com Abas para Blogger/Blogspot"



Um menu vem a ser&nbsp;
uma lista de links &nbsp;
que organiza&nbsp;
e&nbsp;
agrupa&nbsp;
os principais 
links&nbsp;
do blog ,
de forma a ajudar&nbsp;
a pessoa&nbsp;&nbsp;
a se orientar&nbsp;
e encontrar&nbsp;
o que 
procura em seu blog/site.


No
menu ,
colocamos&nbsp; &nbsp;
links como ,&nbsp;
por exemplo:
... home,&nbsp;
contato,&nbsp;
conteúdo (mais discutidos&nbsp;ou vistos )

e demais outros&nbsp; links.&nbsp;


&nbsp;Para adicionar um widget semelhante a estes, 

siga estes passos:
&nbsp;Antes de salvar o modelo,&nbsp;
fazer essas alterações no código:







A instalação:

I)&nbsp;&nbsp;&nbsp;&nbsp; Logado no painel do&nbsp; Blogger (blogger.com)

II)&nbsp;&nbsp;&nbsp;&nbsp; Clicar em "Layout"-&gt;"Editar HTML"

III)&nbsp;&nbsp;&nbsp; Procurar pelo código&nbsp; &lt;/head&gt;&nbsp; (utilize "Ctrl e F", via teclado)
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;


Encontrando-o: 




&nbsp;&nbsp;
Cole , 
antes de &lt;/head&gt; ,
o seguinte
código:

&lt;!--jquery-DD-Menu-Starts--&gt;
&lt;style type="text/css"&gt;
/* menu styles */
#jsddm
{ margin: 0;
padding: 0;}

#jsddm li
{ float: left;
list-style: none;
font: 12px Tahoma, Arial;}

#jsddm li a
{ display: block;
background: #324143; /*DARK-GREEN*/
padding: 5px 12px;
text-decoration: none;
border-right: 1px solid white;
width: 70px;
color: #EAFFED;
white-space: nowrap;}

#jsddm li a:hover
{ background: #24313C;}

#jsddm li ul
{ margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white;}

#jsddm li ul li
{ float: none;
display: inline;}

#jsddm li ul li a
{ width: auto;
background: #A9C251; /*LIGHT-GREEN*/
color: #24313C;}

#jsddm li ul li a:hover
{ background: #8EA344;}
&lt;/style&gt;


&lt;!-- script 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" 
type="text/javascript"&gt;&lt;/script --&gt;
&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;

function jsddm_open()
{ jsddm_canceltimer();
jsddm_close();
ddmenuitem = $(this).find('ul').eq(0).css('visibility', 'visible');}

function jsddm_close()
{ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function jsddm_timer()
{ closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()
{ if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;}}

$(document).ready(function()
{ $('#jsddm &gt; li').bind('mouseover', jsddm_open);
$('#jsddm &gt; li').bind('mouseout', jsddm_timer);});

document.onclick = jsddm_close;
&lt;/script&gt;
&lt;!--jquery-DD-Menu-Stops-http://bloggerstop.net--&gt;




4) Salve !




"Instalando no template"







I)&nbsp; Vá&nbsp;
&nbsp; &nbsp;&nbsp; em "Layout"-&gt;&nbsp;
&nbsp; &nbsp; "Elementos da página"-&gt;&nbsp;
&nbsp; &nbsp; "Adicionar um Gadget"-&gt;
&nbsp;&nbsp;&nbsp;&nbsp; Selecione "HTML/JavaScript"&nbsp;


&nbsp;Para obter os códigos de cores HTML, você pode clicar aqui




Passo 3:e vá em "Layout" -&gt; "Elementos da página"e clique em "Adicionar um Gadget", selecione-o como "HTML / JavaScript" tipo


&nbsp;

"e, finalmente, 

para o novo widget,

cole este código ":

&lt;!--BODY-CODE--&gt;
&lt;ul id="jsddm"&gt;
&lt;li&gt;&lt;a href="#"&gt;título dos link &lt;/a&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="#"&gt;título do link1&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;título do link2&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;título do link3&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;título do link I&lt;/a&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="#"&gt;título do link II&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;título do link III&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;título do link IV&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;título do link V&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;título do link VI&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;título do link/&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;título do link/&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="ENDEREÇO/link- URL"&gt;título do link/&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;





Nota:


&nbsp;"O símbolo "#" refer. aos links (ENDEREÇO/link- URL),
e na cor   laranja são os " títulos dos links "
que serão exibidos no menu horizontal,&nbsp;
...troque de acordo com suas preferências"




II)&nbsp; Visualise!

III) E salve o widget.


Referência:Bloggerstop.net



tags: 
blog,blogspot,blogger,CSS,Gadget,HTML,dicas, tutorial,menus, menu 
horizontal, Drop Down menu,jQuery Plugin,Effect,Slide Effect,Fade 
Effect,Opacity Mode,Drop Shadow,Semitransparent,Navigation,HTML/CSS