6 de febrero de 2013

Tuto: Menú secciones

Tumblr_mgjlo0v1431qbpp4co1_500_large

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.

7 comentarios:

  1. vaya esta muy util el tuto amiga!!
    la vdd ahorita ando pensando como colocar mi menu en mi new
    plantilla
    aahhsss ya casi XDD

    ResponderEliminar
  2. Hola Shine! Hacía mucho que no me pasaba por aqui pero he estado liada con los exámenes! Veo que tu blog sigue yendo estupendamente y el diseño me encanta. Mil besos!

    ResponderEliminar
  3. Oh... antes que nada QUE CHULA LA NUEVA CABECERA!! y el fonfo:333
    Ok... ahora, genial idea Shiny:)
    Besos:*

    ResponderEliminar
  4. tE DOY CIEN PUNTOS Y TE QUEDO DEBIENDO SOLUCIONASTE MI PROBLEMA Y O SE COMO AGRADECERTE

    ResponderEliminar
  5. Hola buen dia me ayudaste a sulocuinar mi problema con mi blog
    http://creacionpaginaswebibaguehosting.blogspot.com/ mil gracias te doy cien puntos

    ResponderEliminar
  6. Aplicalo a tu sitio pues no se ve bien en internet explorer 7 y 8

    ResponderEliminar
    Respuestas
    1. Usa chrome y no se de que van esos 100 puntos xD
      un saludo & de nada~

      Eliminar

Gracias por comentar, cada uno de los comentarios me saca una sonrisa, así que ya sabes, ¡no te cortes!
Cualquier duda, pregunta, sugerencia... ¡aquí!
Recuerda comentar con respeto. Cualquier comentario que sea irrespetuoso será automáticamente eliminado.
(SIEMPRE DEVUELVO COMENTARIOS EN LOS BLOGS♥) besitos