¿Cuantas veces no entramos en una página web o blog y vemos unos menús impresionantes que nos gustaría usar en nuestro propio blog? Luego nos entra la duda de si seremos capaces de hacerlo, nos decimos que seguro será muy difícil y al final nos quedamos con las ganas.
Hoy esto va a cambiar, por que os voy a enseñar a instalar uno de esos super menús de forma sencilla, en este caso, os mostraré a como poner este menú circular de Stu Nicholls .
Por cierto, lo bueno que tiene este menú es que está creado bajo un código muy ligero, CSS y HTML. Lo único que puede hacer pesado este código es la cantidad de imágenes a utilizar, así que como consejo, descargar las imágenes que os gusten en vuestro pc y alojarlas en vuestro propio blog, eso ayudará mucho con los tiempos de carga.
- Android
Acceso a zona android - Google+
Danos un G+ - Facebook
¿Te gustamos? - Twitter
Retuitea nuestras entradas - Instagram
Sigue nuestras fotos - Rss
No te pierdas nuestras entradas - Amazon
Conoce nuestros productos - Youtube
Estos son nuestros videos
Podéis ponerlo dentro del código del propio código de vuestro blog o bien, si vais a diseño, podéis crear un Gadget tipo HTML/Javascript en el cual pegaríais todo el código y listo.
- 1 Descargar las siguientes 2 Imágenes
Imagen para el fondo
Círculos que rodean las imágenes.
- 2 Buscar 8 Iconos que os gusten para el menú, han de tener un tamaño de 32 x 32 pixeles.
- 3 Copiar el código y en el añadir los enlaces de la imagen del fondo, del circulo y el de las imágenes que escogisteis.
Código CSS:
- método de instalación: Tenemos 2 formas de instalar esta parte , la primera es dentro del propio código de nuestro blog, la segunda es en un gadget.
Si escogemos instalarlo dentro del blog entonces buscad ]]></b:skin> y pegad encima este código
Si por lo contrario preferís meterlo dentro de un gadget , entonces poner el siguiente código dentro de las etiquetas <style> y </style>
/* ================================================================
This copyright notice must be kept untouched in the stylesheet at
all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menu/circular.html
Copyright (c) Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
#circularMenu {padding:0; margin:0 auto; list-style:none; position:relative; width:300px; height:300px; background:#fff url (Enlace de Fondo) no-repeat;}
#circularMenu li {display:block; width:60px; height:60px; position:absolute;}
#circularMenu li.home {left:120px; top:4px; background:url(Enlace de Icono) no-repeat center center;}
#circularMenu li.chat {left:200px; top:40px; background:url(Enlace de Icono) no-repeat center center;}
#circularMenu li.upload {left:35px; top:40px; background:url(Enlace de Icono) no-repeat center center;}
#circularMenu li.email {left:230px; top:115px; background:url(Enlace de Icono) no-repeat center center;}
#circularMenu li.address {left:5px; top:115px; background:url(Enlace de Icono) no-repeat center center;}
#circularMenu li.shop {left:200px; top:190px; background:url(Enlace de Icono) no-repeat center center;}
#circularMenu li.search {left:35px; top:190px; background:url(Enlace de Icono) no-repeat center center;}
#circularMenu li.delivery {left:120px; top:225px; background:url(Enlace de Icono) no-repeat center center;}
#circularMenu li a b {display:none;}
#circularMenu li a {display:block; width:60px; height:60px; text-align:center;}
#circularMenu li a:hover {background:url(Enlace del Círculo que rodean los Iconos); text-decoration:none; font-family:georgia, serif;}
#circularMenu li a:hover b {position:absolute; display:block; width:100px; height:100px; font-size:16px; color:#63352c; background:#fff;}
#circularMenu li a:hover b span {display:block; font-size:12px; color:#888; font-weight:normal; margin-top:15px;}
#circularMenu li.home a:hover b {left:-22px; top:100px;}
#circularMenu li.chat a:hover b {left:-102px; top:64px;}
#circularMenu li.upload a:hover b {left:63px; top:64px;}
#circularMenu li.email a:hover b {left:-132px; top:-11px;}
#circularMenu li.address a:hover b {left:93px; top:-11px;}
#circularMenu li.shop a:hover b {left:-102px; top:-87px;}
#circularMenu li.search a:hover b {left:63px; top:-87px;}
#circularMenu li.delivery a:hover b {left:-22px; top:-121px;}
- Que modificar en esta parte:
En esta parte hay un par de cosas a tener en cuenta:
En Rosa o rojo claro (según como se mire) se indica donde tenéis que añadir los enlaces del fondo, el circulo y el de las imágenes que queréis para el menú, el orden a la hora de colocar los enlaces de vuestros iconos va en sentido de las agujas del reloj, pero en este caso comenzamos arriba de todo, y continuamos por la derecha. Antes de que se me olvide, las imagenes de los Iconos han de tener un tamaño 32 x 32 px
En Dorado va el nombre de cada icono. En este ejemplo se llaman Home, chat, upload, email..., vosotros podéis o bien dejar esos nombres ya que no os afectaría a la hora de reproducir el menú, o bien, adaptarlos a vuestros Iconos, si por ejemplo, queréis hacer un menú donde está un mando de xbox, en vez de "chat", podéis poner "xbox". Si decidís hacer este cambio, en el código de abajo también tenéis que hacer el mismo cambio
- Otros:
Si en vez del fondo blanco queréis otro fondo tocará cambiar cosas en la siguiente linea
#circularMenu {padding:0; margin:0 auto; list-style:none; position:relative; width:300px; height:300px; background:#fff url (Enlace de Fondo) no-repeat;}
background:#fff Indica el color de fodo que tendrá el menú en caso de que la imagen del fondo falle. Este color podéis modificarlo a vuestro antojo. Recordad que el color se escribe en Hexadecimal
url (Enlace de Fondo) no-repeat; Aquí podéis poner otra imagen diferente a la que os digo que pongáis, si queréis que la imagen tenga alguna transparencia o alguna historieta, pues sois libres de ponerla, esto es a vuestro gusto.
Código HTML:
- método de instalación: Para instalar esta segunda parte tenemos que ir a Diseño, luego aquí crearemos un gadget "HTML/Javascript" , dentro simplemente pegaremos el siguiente código.
<ul id="circularMenu">
<li class="home"><a href="URL"><b>nombre del icono<br />Frase corta</b></a></li>
<li class="chat"><a href="URL"><b>nombre del icono<br />Frase corta</b></a></li>
<li class="email"><a href="URL"><b>nombre del icono<br />Frase corta</b></a></li>
<li class="shop"><a href="URL"><b>nombre del icono<br />Frase corta</b></a></li>
<li class="delivery"><a href="URL"><b>nombre del icono<br />Frase corta</b></a></li>
<li class="search"><a href="URL"><b>nombre del icono<br />Frase corta</b></a></li>
<li class="address"><a href="URL"><b>nombre del icono<br />Frase corta</b></a></li>
<li class="upload"><a href="URL"><b>nombre del icono<br />Frase corta</b></a></li>
</ul>
- Que modificar en esta parte:
Como decía antes, la parte que está en Dorado tiene que coincidir de forma exácta con la parte en dorado del código CSS. Si arriba ponéis por ejemplo xbox y en esta parte os confundís y escribís xbos el menú no se reproducirá correctamente. Tened en cuenta, que el primer código le dice al siguiente cual es la imagen que aparecerá entre otras cosas.
En un color rosa clarito pone "URL" , esto ha de ser sustituido por el enlace de turno al que queréis ir cada vez que pinchéis en ese icono del menú. Cuidado de no borrar las comillas.
En color verde tenemos Nombre del Icono y Frase corta. Esta quizás sea la parte más obvia, siguiendo el ejemplo de la Xbox, aquí podríamos Xbox y en frase corta, por ejemplo, descubre nuestros juegos de Xbox
Como podéis ver, son 2 códigos que debemos usar y que se colocan en lugares muy definidos, no es algo al que se deba tener miedo a la hora de colocar ya que no exige sustituir un código por otro ni cosas así, por tanto os animo a probarlo.
0 comentarios:
Publicar un comentario