Menu lateral com mouse over

Se você tem uma grande quantidade de links na sua sidebar esse menu te ajudará muito, pois ele é muito estiloso e ainda por cima deixa seu template bonito.

Uma vantagem de usa-lo é que ele é expansível, ou seja, você clica para exibir o conteúdo, e clica de novo para recolher, assim, aquela lista enorme se transforma em um simples bloco de 5 linhas.

Essa dica eu aprendi com a rô, do Bloggersphera.

- Para começar é necessário que você baixe e hospede dois scripts:

jquery-1.2.6.pack.js
ddaccordion.js

OBS: Use o Skydrive para hospeda-los - Copie o conteúdo dos links acima, cole no bloco de notas, salve com a extensão .js e faça o upload.

- Entre no editor HTML do blogger e mantenha desmarcado a opção “Expandir Modelos de Widget”

- Copie o código abaixo e cole antes de </head>

Código <!-- JavaScript Menu Vertical --> <script src='http://jscripts.ning.com/id/138153618/jquery-1.2.6.pack.js' type='text/javascript'/> <script src='http://jscripts.ning.com/id/138148683/ddaccordion.js' type='text/javascript'> /*********************************************** * Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com) * Visit http://www.dynamicDrive.com for hundreds of DHTML scripts * This notice must stay intact for legal use ***********************************************/ </script> <script type='text/javascript'> ddaccordion.init({ headerclass: &quot;headerbar&quot;, //Shared CSS class name of headers group contentclass: &quot;submenu&quot;, //Shared CSS class name of contents group revealtype: &quot;mouseover&quot;, //Reveal content when user clicks or onmouseover the header? Valid value: &quot;click&quot; or &quot;mouseover mouseoverdelay: 200, //if revealtype=&quot;mouseover&quot;, set delay in milliseconds before header expands onMouseover collapseprev: true, //Collapse previous content (so only one open at any time)? true/false defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc] [] denotes no content onemustopen: true, //Specify whether at least one header should be open always (so never all headers closed) animatedefault: false, //Should contents open by default be animated into view? persiststate: true, //persist state of opened contents within browser session? toggleclass: [&quot;&quot;, &quot;selected&quot;], //Two CSS classes to be applied to the header when it&#39;s collapsed and expanded, respectively [&quot;class1&quot;, &quot;class2&quot;] togglehtml: [&quot;&quot;, &quot;&quot;, &quot;&quot;], //Additional HTML added to the header when it&#39;s collapsed and expanded, respectively [&quot;position&quot;, &quot;html1&quot;, &quot;html2&quot;] (see docs) animatespeed: &quot;normal&quot;, //speed of animation: integer in milliseconds (ie: 200), or keywords &quot;fast&quot;, &quot;normal&quot;, or &quot;slow&quot; oninit:function(headers, expandedindices){ //custom code to run when headers have initalized //do nothing }, onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed //do nothing } }) </script> <!-- Fim JavaScript Menu Vertical -->

- Agora copie esse outro código e adicione antes de ]]></b:skin>

Código /* ----- Menu-Lateral ----- */ .urbangreymenu{width: 160px; /*largura do menu*/} .urbangreymenu .headerbar{ font: bold 13px Verdana; color: #666; background: #000; margin-bottom: 0; text-transform: uppercase; padding: 7px 0 7px 21px; } .urbangreymenu .headerbar a{ text-decoration: none; color: #fff; display: block; } .urbangreymenu ul{ list-style-type: none; margin: 0; padding: 0; margin-bottom: 0; } .urbangreymenu ul li{ padding-bottom: 2px; } .urbangreymenu ul li a{ font: normal 12px Arial; color: #000; background: #efefef; display: block; padding: 5px 0; line-height: 17px; padding-left: 8px; text-decoration: none; } .urbangreymenu ul li a:visited{ color: #999; } .urbangreymenu ul li a:hover{ /*hover state CSS*/ color: #fff; background: #3e3e3e; } /* -----Fim Menu-Lateral ----- */

- Agora visualize seu template, se estiver tudo no lugar, salve.

Lembrando que você não verá nenhuma mudança ainda.

- Na última parte você terá que entrar em "Laytout" e criar um novo gadget (elemento de página) HTML/JavaScript com o seguinte conteúdo:

Código <div class="urbangreymenu"> <h3 class="headerbar"> <a href="http://Link Principal 1.blogspot.com/"> LINK PRINCIPAL 1</a></h3> <ul class="submenu"> <li><a href="http://Link Secundário 1.1.blogspot.com/"> Link Secundário 1.1</a></li> <li><a href="http://Link Secundário 1.2.blogspot.com/"> Link Secundário 1.2</a></li> <li><a href="http://Link Secundário 1.3.blogspot.com/"> Link Secundário 1.3</a></li> <li><a href="http://Link Secundário 1.4.blogspot.com/"> Link Secundário 1.4</a></li> <li><a href="http://Link Secundário 1.5.blogspot.com/"> Link Secundário 1.5</a></li> </ul> <h3 class="headerbar"> <a href="http://Link Principal 2.blogspot.com/"> LINK PRINCIPAL 2</a></h3> <ul class="submenu"> <li><a href="http://Link Secundário 2.1.blogspot.com/"> Link Secundário 2.1</a></li> <li><a href="http://Link Secundário 2.2.blogspot.com/"> Link Secundário 2.2</a></li> <li><a href="http://Link Secundário 2.3.blogspot.com/"> Link Secundário 2.3</a></li> <li><a href="http://Link Secundário 2.4.blogspot.com/"> Link Secundário 2.4</a></li> <li><a href="http://Link Secundário 2.5.blogspot.com/"> Link Secundário 2.5</a></li> </ul> <h3 class="headerbar"> <a href="http://Link Principal 3.blogspot.com/"> LINK PRINCIPAL 3</a></h3> <ul class="submenu"> <li><a href="http://Link Secundário 3.1.blogspot.com/"> Link Secundário 3.1</a></li> <li><a href="http://Link Secundário 3.2.blogspot.com/"> Link Secundário 3.2</a></li> <li><a href="http://Link Secundário 3.3.blogspot.com/"> Link Secundário 3.3</a></li> <li><a href="http://Link Secundário 3.4.blogspot.com/"> Link Secundário 3.4</a></li> <li><a href="http://Link Secundário 3.5.blogspot.com/"> Link Secundário 3.5</a></li> </ul> </div>

Agora sim, depois de inserir seus links já poderá ver esse menu no seu blog.