[Tutorial] ¡Menú completo!

Hola preciosuras aquí la futura reina de narnia esta devuelta -u- hoy buscando tutoriales para ustedes, me encontré un menú super kawaii *ooooooo*, super duper kawaii~ & al momento dije *Tengo que compartirlo* lo pobre y es hermoso divino *ww* okey, sigue leyendo para más información...♥

Es completo, me refiero a que no necesitas link ni nada, al dar clic en el, tiene su propia página ^^
La puedes editar a tu gusto ^^

¿Quieres verlo bien? puedes verla en Tu espacio Kawaii 

¡¿Les gusta?!

Para colocarla deben acceder al editor html y buscar la etiqueta ]]></b:skin> al encontrarla, pegas antes de ella el siguiente código

.oe_overlay { /* Opacidad cuando se pasa el cursor */
    background: none repeat scroll 0 0 #ffffff; /* Color de la opacidad */
    height: 100%;
    left: 0;
    opacity: 0;
    position: fixed;
    top: 0;
    width: 100%;
}
ul.oe_menu {  /* El ancho y la posición */
    clear: both;
    float: left;
    list-style: none outside none;
    margin: 30px 0 0 30px;
    position: relative;
    width: 100px; /* aumentar el número de puesto en la horizontal*/
}
ul.oe_menu > li {  /* cada menuzinho */
    float: left;
    height: 100px;
    padding-bottom: 2px;
    position: relative;
    width: 90px;
}
ul.oe_menu > li > a { /* texto de cada menuzinho */
    color: #FF079E;
    display: block;
    font-size: 16px;
font-family: Lobster;
    font-weight: bold;
-moz-transform: rotate(-15deg);
  -webkit-transform: rotate(-15deg);
    height: 100px;
    margin: 1px;
    opacity: 0.8;
    padding: 10px;
    text-decoration: none;
    text-shadow: 0 0 1px #fff;
    width: 90px;
    background: url(http://olhar-43.net/conteudo/patterns/patterns3/4.gif) repeat;
border-left: 0 solid #fff;
    border-radius: 18px 18px 18px 18px;
box-shadow: 5px 5px 5px 5px #fcc;
}
ul.oe_menu > li > a:hover, ul.oe_menu > li.selected > a { /* cada menuzinho seleccionado  */
    background: none repeat scroll 0 0 #fee;
    color: #FF079E;
text-shadow: 0 0 1px #fff;
    opacity: 1;
border-left: 0 solid #fff;
    border-radius: 18px 18px 18px 18px;
}
.oe_wrapper ul.hovered > li > a { /* efecto hover */
    background: url(http://olhar-43.net/conteudo/patterns/patterns3/4.gif) repeat;
    text-shadow: 0 0 1px #fff;
    color: #FF079E;
border-radius: 18px 18px 18px 18px;
}
ul.oe_menu div { /* estilos para o que fica oculto */
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg68Vz_RGwmRDHS2ASfdBqLysWo72suYwRlesv3qH2iEi5Eqy3_vTZtAZhDGVHQndczC33bEmzIwFbfBt6wcK6ji-f4OPTyYdbllLa3-jgDKMXmvH54RiUGxSbBbs87RldOdLosP4vmaPI/s400/bgbodycortininha.png) repeat;
    display: none;
    height: 200px;
    left: 1px;
    padding: 30px;
    position: absolute;
    top: 103px;
    width: 400px;
border-radius: 18px 18px 18px 18px;
box-shadow: 5px 5px 5px 5px #fee;
}
ul.oe_menu div ul li a {/* Estilo de texto para lo que esta oculto*/
    color: #F694FF;
    display: block;
    font-size: 16px;
font-family: Lobster;
    margin: 2px;
    padding: 2px 2px 2px 4px;
    text-decoration: none;
text-shadow: 1px 2px 3px #fff;
}
ul.oe_menu div ul.oe_full {
    width: 100%;
}
ul.oe_menu div ul li a:hover {/* estilos para el texto del submenu oculto */
    background: none repeat scroll 0 0 #fee;
    color: #FF079E;
border-radius: 10px;
box-shadow: 1px 2px 3px #fcc;
}
ul.oe_menu li ul {
    float: left;
    list-style: none outside none;
    margin-right: 10px;
    text-align: left;
    width: 150px;
}
li.oe_heading {
    color: #F6B8FC;
    font-size: 16px;
    margin-bottom: 10px;
    padding-bottom: 6px;
    text-shadow: 0 0 1px #ffffff;
}

Ya tiene sus explicaciones traducidas mal pero traducidas, usa las lista que se representan mediante html <li> <ul> Esas  listas harán algunos marcadores que se encuentran ahí con iconos si les pusiste estilos a ellas, si no pega antes de la etiqueta anterior esto:

.post ul, li {
 line-height:1.5em;
 list-style:none;
 background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijLykvrJWhCdbAC_Z-nQwVWDUCZKWJy1Peqz0D__tasK7TymbIDm0RRb5gg7h-KHpHXV_w9EaKigAv_SaRZuxWm-4EHvgg-Ca46GgyuGs366eN2XcxOLUQkJd1Z6qn0eVd8-q9TT7dWxOX/s1600/list.png") no-repeat $startSide .3em;
 vertical-align:top;
 padding-top: 0;
 padding-$endSide: 0;
 padding-bottom: .6em;
 padding-$startSide: 17px;
 margin:0;
}

Ahora viene lo más fácil, los SCRIPTS para colocarlos debemos buscar la etiqueta </head> {La cual esta cerca de ]]></b:skin>, así que no hace falta buscarla con ctrl f} al encontrarla pegaremos lo siguiente antes de </head>

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

Ahora añade igualmente antes de </head> el siguiente código

<script type='text/javascript'>
//<![CDATA[
            $(function() {
    var $oe_menu  = $('#oe_menu');
    var $oe_menu_items = $oe_menu.children('li');
    var $oe_overlay  = $('#oe_overlay');
                $oe_menu_items.bind('mouseenter',function(){
     var $this = $(this);
     $this.addClass('slided selected');
     $this.children('div').css('z-index','9999').stop(true,true).slideDown(200,function(){
      $oe_menu_items.not('.slided').children('div').hide();
      $this.removeClass('slided');
     });
    }).bind('mouseleave',function(){
     var $this = $(this);
     $this.removeClass('selected').children('div').css('z-index','1');
    });
    $oe_menu.bind('mouseenter',function(){
     var $this = $(this);
     $oe_overlay.stop(true,true).fadeTo(200, 0.6);
     $this.addClass('hovered');
    }).bind('mouseleave',function(){
     var $this = $(this);
     $this.removeClass('hovered');
     $oe_overlay.stop(true,true).fadeTo(200, 0);
     $oe_menu_items.children('div').hide();
    })
            });
      //]]>
</script>

Tienes que revisar si esta bien, de lo contrario tendrás que volver a realizar los pasos anteriores.

Listo, ya tenemos todo, ahora vamos a un gadget html/javascript o una entrada html y colocamos el código:

<div class="oe_wrapper">
   <div id="oe_overlay" class="oe_overlay"></div>
   <ul id="oe_menu" class="oe_menu">
    <li><a href=""><img src="http://olhar-43.net/conteudo/avatares/90x90_4/4.gif"><br>About</a>
     <div>
      <ul>
       <li class="oe_heading">About</li>
    Aquí tu texto, ¡Hazte conocer por los demás!  </ul>
     </div>
    </li>
    <li><a href=""><img src="http://olhar-43.net/conteudo/avatares/90x90_4/70.gif"><br>Goodies</a>
     <div style="left:-111px;"><!-- -112px -->
      <ul>
       <li class="oe_heading">Etiquetas</li>
       <li><a href="#">Wallpapers</a></li>
       <li><a href="#">Tutoriales</a></li>
       <li><a href="#">Programas</a></li>
       <li><a href="#">Gifs</a></li>
       <li><a href="#">Otros</a></li>
      </ul>
 
           </div>
    </li>
    <li><a href=""><img src="http://olhar-43.net/conteudo/avatares/90x90_4/37.gif"><br>Contacto</a>
     <div style="left:-223px;">
      <ul class="oe_full">
       <li class="oe_heading">¿Quieres contactarme?</li>
¿Cómo te contacto? ¡Coloca aquí tu formulario!      </ul>
     </div>
    </li>
    <li><a href=""><img src="http://olhar-43.net/conteudo/avatares/90x90_4/47.gif"><br>F.A.Q</a>
     <div style="left:-335px;">
      <ul>
       <li class="oe_heading">Reglas:</li>
       <li>¿Cuál es tu regla? ¡Coloca la tuya!</li>
       <li>¿Cuál es tu regla? ¡Coloca la tuya!</li>
       <li><a href="#">Créditos</a></li>
      </ul>
     </div>
    </li>
 
     </div>
    </li>
   </ul>
  </div>

Pueden ir modificando a su gusto, para los enlaces deben cambiar # por el enlace que deseen, las imágenes {los icons} fueron sacados de annyz blog pero tengan cuidado con el tamaño el 400x200 estaría bien ^^

Pueden agregar icons con las descripciones, ósea cada icon con el texto sobre mi o about etc...

Deben tener mucho cuidado con el html, ya que es algo muy complicado.

Puedes crear tu propio formulario para Contacto en la siguiente página http://br.foxyform.com/

Bueno espero que les guste el menú, todos los créditos a... Reino Kawaii lo traducí al español por que la página esta en portuges ^^

Muchos besos para uds~♥*www*