Tuto: Menú secciones

Hola (:

A petición de David os dejaré el tutorial de cómo poner el menú que hay ahora en el blog a la derecha....

¡Allá vamos! 

Para empezar debo advertir que los códigos no son míos, son de la web de Annyz, dejo los créditos abajo.

Vete al diseño y añade un gadget HTML, allí, pega el siguiente código.

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */

/*URL: http://www.dynamicdrive.com/style/ */

.sidebarmenu ul{

width:250;

text align:center;

list-style-type: none;

font: normal 13px Century gothic;

}

.sidebarmenu ul li{

position: relative;

}

/* Top level menu links style */

.sidebarmenu ul li a{

display: block;

overflow: auto; /*force hasLayout in IE7 */

color: white;

text-align:center;

text-decoration: none;

padding: 0px;

}

.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{

background-color: #000000; /*background of tabs (default state)*/}

.sidebarmenu ul li a:visited{

color: white;}

.sidebarmenu ul li a:hover{

background-color: #6E6E6E;}

/* Holly Hack for IE \*/

* html .sidebarmenu ul li { float: left; height: 1%; }

* html .sidebarmenu ul li a { height: 1%; }

/* End */

</style>

<script type="text/javascript">

//Nested Side Bar Menu (Mar 20th, 09)

//By Dynamic Drive: http://www.dynamicdrive.com/style/

var menuids=["sidebarmenu1"] //Enter id(s) of each Side Bar Menu's main UL, separated by commas

function initsidebarmenu(){

for (var i=0; i<menuids.length; i++){

var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")

for (var t=0; t<ultags.length; t++){

ultags[t].parentNode.getElementsByTagName("a")[0].className+=" subfolderstyle"

if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu

ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item

else //else if this is a sub level submenu (ul)

ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it

ultags[t].parentNode.onmouseover=function(){

this.getElementsByTagName("ul")[0].style.display="block"

}

ultags[t].parentNode.onmouseout=function(){

this.getElementsByTagName("ul")[0].style.display="none"

}

}

for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars

ultags[t].style.visibility="visible"

ultags[t].style.display="none"

}

}

}

if (window.addEventListener)

window.addEventListener("load", initsidebarmenu, false)

else if (window.attachEvent)

window.attachEvent("onload", initsidebarmenu)

</script>

<div class="sidebarmenu">

<ul id="sidebarmenu1">

<li><a href="URL DEL SITIO AL QUE QUIERAS QUE ACCEDAN">TITULO</a></li>

<li><a href="URL DEL SITIO AL QUE QUIERAS QUE ACCEDAN">TITULO</a></li>

<li><a href="URL DEL SITIO AL QUE QUIERAS QUE ACCEDAN">TITULO</a></li>

<li><a href="URL DEL SITIO AL QUE QUIERAS QUE ACCEDAN">TITULO</a></li>

<li><a href="URL DEL SITIO AL QUE QUIERAS QUE ACCEDAN">TITULO</a></li>

<li><a href="URL DEL SITIO AL QUE QUIERAS QUE ACCEDAN">TITULO</a></li>

<li><a href="URL DEL SITIO AL QUE QUIERAS QUE ACCEDAN">TITULO</a></li>

<li><a href="URL DEL SITIO AL QUE QUIERAS QUE ACCEDAN">TITULO</a></li>

<li><a href="URL DEL SITIO AL QUE QUIERAS QUE ACCEDAN">TITULO</a></li>

<li><a href="URL DEL SITIO AL QUE QUIERAS QUE ACCEDAN">TITULO</a></li>

<li><a href="URL DEL SITIO AL QUE QUIERAS QUE ACCEDAN">TITULO</a></li>

<li><a href="URL DEL SITIO AL QUE QUIERAS QUE ACCEDAN">TITULO</a></li>

</ul>

</div>

El código en violeta es para el fondo cuando no está seleccionado, en mi blog sería el azul marino.

El código en azul es para el fondo cuando está seleccionado, en mi blog sería el morado.

Donde pone URL DEL SITIO AL QUE QUIERAS QUE ACCEDAN, pues eso xD

y para el título lo mismo.

Creo que lo básico ya está, luego para añadir e investigar os lo dejo a vosotr@s (:

Tips: ¿No sabes como poner secciones/etiquetas? Mira [aquí].

¿Y los códigos de los colores? [aquí].

Si ves que hay algún problema con los códigos avisa. Saludoos 

Creditos a Annyz.