Menu lateral expansível com mouse-over

Este menu da Dynamic Drive é muito útil para uma lista de links extensa. É um menu vertical, drop-down.



Os títulos das listas são links. Ao passar o mouse sobre eles, a lista se expande com os links secundários. A primeira lista permanece aberta, enquanto as outras se expandem através do mouse-over.




Vejamos como instala-lo no Blogger.

Arquivos Java-Script

É necessária a biblioteca JQuery e mais um arquivo Java Script que você precisa hospedar. Baixe o arquivo em seu computador pelo link e faça o upload em seu site preferido de hospedagem:

ddaccordion.js

Colocação do Script no template

1. Na Guia "Layout", em "Editar HTML", salve uma cópia de seu template, clicando em "Baixar Modelo Completo";
2. Mantenha desmarcada a opção "Expandir Modelos de Widget";
3. Copie o código a seguir e cole acima da tag </head>;
4. Substitua os trechos em VERMELHO pelo endereço do arquivo que você hospedou.

texto planoprint?

01	<!-- JavaScript Menu Vertical -->

02	<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

03

04	<script src='http://endereço-de-seu-arquivo-hospedado-ddaccordion.js' type='text/javascript'>

05

06	/***********************************************

07	* Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)

08	* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts

09	* This notice must stay intact for legal use

10	***********************************************/

11

12

</script>

13

14	<script type='text/javascript'>

15

16	ddaccordion.init({

17	headerclass: "headerbar",

18	contentclass: "submenu",

19	revealtype: "mouseover", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"

20	mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover

21	collapseprev: true, //Collapse previous content (so only one open at any time)? true/false

22	defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc] [] denotes no content

23	onemustopen: true, //Specify whether at least one header should be open always (so never all headers closed)

24	animatedefault: false, //Should contents open by default be animated into view?

25	persiststate: true, //persist state of opened contents within browser session?

26	toggleclass: ["", "selected"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]

27	togglehtml: ["", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)

28	animatespeed: "normal", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"

29	oninit:function(headers, expandedindices){ //custom code to run when headers have initalized

30	//do nothing

31

},

32	onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed

33	//do nothing

34

}

35

})

36

37

</script>

38	<!-- Fim JavaScript Menu Vertical -->

Colocação dos Estilos

Coloque o seguinte código acima da tag ]]></b:skin> :

texto planoprint?

01	/* ----- Menu-Lateral ----- */

02

03	.urbangreymenu{

04	width: 190px; /*largura menu*/

05

}

06

07	.urbangreymenu .headerbar{

08	font: bold 13px Verdana;

09	color: white;

10	background: #606060;

11	margin-bottom: 0; /*se preciso, coloque margem entre o título do menu e o conteúdo*/

12	text-transform: uppercase;

13	padding: 7px 0 7px 31px; /*31px é o espaço à esquerda do título do menu*/

14

}

15

16	.urbangreymenu .headerbar a{

17	text-decoration: none;

18	color: white;

19	display: block;

20

}

21

22	.urbangreymenu ul{ /* reseta listas */

23	list-style-type: none;

24	margin: 0;

25	padding: 0;

26

}

27

28	.urbangreymenu li { /*reseta ítens de lista */

29	padding:0px;

30	text-indent:0px;

31

}

32

33	.urbangreymenu ul li{

34	padding-bottom: 2px; /*espaço entre cada ítem de lista*/

35

}

36

37	.urbangreymenu ul li a{

38	font: normal 12px Arial;

39	color: black;

40	background: #E9E9E9;

41	display: block;

42	padding: 5px 0;

43	line-height: 17px;

44	padding-left: 8px;

45	text-decoration: none;

46

}

47

48	.urbangreymenu ul li a:visited{

49	color: black;

50

}

51

52	.urbangreymenu ul li a:hover{

53	color: white;

54	background: black;

55

}

56	/* -----Fim Menu-Lateral ----- */

Altere as cores de acordo com o seu template.



Visualize o template e estando tudo ok, salve. O menu não será visualizado ainda pois precisamos construir a lista de links.

Construção da lista de links

Adicione um gadget (elemento de página) HTML/JavaScript.



Construa sua lista de links da seguinte maneira:

texto planoprint?

01	<div class="urbangreymenu">

02	<h3 class="headerbar"> <a href="http://Link Principal 1.blogspot.com/"> LINK PRINCIPAL 1</a></h3>

03	<ul class="submenu">

04	<li><a href="http://Link Secundário 1.1.blogspot.com/"> Link Secundário 1.1</a></li>

05	<li><a href="http://Link Secundário 1.2.blogspot.com/"> Link Secundário 1.2</a></li>

06	<li><a href="http://Link Secundário 1.3.blogspot.com/"> Link Secundário 1.3</a></li>

07	<li><a href="http://Link Secundário 1.4.blogspot.com/"> Link Secundário 1.4</a></li>

08	<li><a href="http://Link Secundário 1.5.blogspot.com/"> Link Secundário 1.5</a></li>

09

</ul>

10	<h3 class="headerbar"> <a href="http://Link Principal 2.blogspot.com/"> LINK PRINCIPAL 2</a></h3>

11	<ul class="submenu">

12	<li><a href="http://Link Secundário 2.1.blogspot.com/"> Link Secundário 2.1</a></li>

13	<li><a href="http://Link Secundário 2.2.blogspot.com/"> Link Secundário 2.2</a></li>

14	<li><a href="http://Link Secundário 2.3.blogspot.com/"> Link Secundário 2.3</a></li>

15	<li><a href="http://Link Secundário 2.4.blogspot.com/"> Link Secundário 2.4</a></li>

16	<li><a href="http://Link Secundário 2.5.blogspot.com/"> Link Secundário 2.5</a></li>

17

</ul>

18	<h3 class="headerbar"> <a href="http://Link Principal 3.blogspot.com/"> LINK PRINCIPAL 3</a></h3>

19	<ul class="submenu">

20	<li><a href="http://Link Secundário 3.1.blogspot.com/"> Link Secundário 3.1</a></li>

21	<li><a href="http://Link Secundário 3.2.blogspot.com/"> Link Secundário 3.2</a></li>

22	<li><a href="http://Link Secundário 3.3.blogspot.com/"> Link Secundário 3.3</a></li>

23	<li><a href="http://Link Secundário 3.4.blogspot.com/"> Link Secundário 3.4</a></li>

24	<li><a href="http://Link Secundário 3.5.blogspot.com/"> Link Secundário 3.5</a></li>

25

</ul>

26

</div>

Salve o gadget e você já poderá ver seu menu em funcionamento.

DEMO

OS COMENTÁRIOS AJUDAM MUITO E INCENTIVAM,
PORTANTO NÃO DEIXE DE FAZER O SEU!