Menú circular

• HOME
  texto de home
• CHAT
  texto para chat
• EMAIL
  texto para e-mail
• DESCARGAS
  texto descargas
• MÚSICA
  texto para música
• SEARCH
  texto para buscador
• VÍDEOS
  texto para vídeos
• FOTOS
  texto para fotos

Los menús no tienen por qué ser siempre horizontales o verticales, los hay graciosos como este de Stu Nicholls cuando lo vi me dije que tenía que probarlo y ahí está después de hacer algunos cambios.
Está compuesto por una imagen de fondo y los iconos correspondientes, un texto con efecto mouse over que nos muestra una breve explicación de cada icono.
No es difícil crearlo pero si requiere un poco de atención y paciencia.

La forma de crearlo es la siguiente. Nos situamos "Plantilla de diseño" y creamos un nuevo elemento de página o gadget, escogemos la pestaña de HTML/Javascript y en su interior añadimos lo siguiente:

<ul id="circularMenu">
<li class="home"><a href="#"><b>HOME<br /><span>texto de home</span></b></a></li>
<li class="chat"><a href="#"><b>CHAT<br /><span>texto para chat</span></b></a></li>
<li class="email"><a href="#"><b>EMAIL<br/><span>texto para e-mail</span></b></a></li>
<li class="descargas"><a href="#"><b>DESCARGAS<br/><span>texto descargas</span></b></a></li>
<li class="música"><a href="#"><b>MÚSICA<br/><span>texto para música</span></b></a></li>
<li class="search"><a href="#"><b>SEARCH<br/><span>texto para buscador</span></b></a></li>
<li class="vídeos"><a href="#"><b>VÍDEOS<br /><span>texto para vídeos</span></b></a></li>
<li class="fotos"><a href="#"><b>FOTOS<br/><span>texto para fotos</span></b></a></li>
</ul>


Guardamos los cambios y nos vamos a plantilla "Edición de HTML" allí localizamos ]]></b:skin> y justo antes añadimos:

#circularMenu {padding:0; margin:0 auto; list-style:none; position:relative; width:300px; height:300px; background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2SfUYoCkAr3x8h7UHU0V8sATFmkOzHdLBeGJS3qzqY7zP8SNBYjRnwPN4d7tzqBeU7Yr6vXbKc2k_ZQiiCcI6r94yWOpnC6rDRCwVRH3qiZZIEUGZDx8OL-wEKVJBZB5PZXDkcrQkppg/s0/backgroundcircular.gif) no-repeat;}

#circularMenu li {display:block; width:60px; height:60px; position:absolute;}
#circularMenu li.home {left:120px; top:4px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj38mCqspOIX4SEOP9F834RmWqNZ0MOpknGVPoGUDm3P-RNapFN4FUPWQaH4oPmWk_rFbxdfrLQ8eX4cHZVAZN7uV30HBeyzEHE136pZXfWOvr5yBcklkvaUq2pr5XoKnJuKAXLPuM2FSU/s320/120.png) no-repeat center center;}
#circularMenu li.chat {left:200px; top:40px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwqk7R81xSigLhGSQqSntTsFTALrb9na3btevnwakIY_SVCOsGhnqs7j-OptHiGzxXjKrMYzxJ0dA8EesZh0o7OdylOgzjMhiRImjon0WO3OKUaWTdIymJyRd6aeSFOfLrl6hpvSd4pKU/s320/54.png) no-repeat center center;}
#circularMenu li.email {left:230px; top:115px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdJ278aM-GAf15jrceB9Xe6fO4qeXz4QNvtF1GUEUB9ZY-TFIqriARl8AC320KyktGq2rWKmtnEiLw3ZneXdf7Ayl3uVb991SU9Y52Xw_LrwjkUrBgiJVuk0D0O3l0DJcQNxrINAvROQ0/s320/74.png) no-repeat center center;}
#circularMenu li.descargas {left:35px; top:40px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPJnHrBx4j0J1-dB3amA3o-YP0wQ6yoUIWcqYviYJtY7izHhZAwK__3Nyt3kqgAE-i96aEyj0sxb37ehLm1SLHtEQGkBAeaXtyN8AcPz8ZIIaMvBfBSPxxl-UbOYKlRv4e9J0aXwxarLo/s320/121.png) no-repeat center center;}
#circularMenu li.música {left:200px; top:190px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4UthP6UNWmu6BW20u2MK1K28ypLRbm5Cbcg6RllKY4e8wE6jitVwcpXKjaVy4d_flMMKqSTCu73RN4b8KnK7gYWBnufzyz0BzwZd2x9DBROjuzM-WRMSjX-9E1iW4XL_1FmwSeDnfOd4/s320/110.png) no-repeat center center;}
#circularMenu li.search {left:35px; top:190px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1jXwyf9VlgoxTWa1IbqLYQ1QpKXJbRjklnZL3CfO8nEdlxeE9inN0_QqD0R5YsFKizYfGcj8JpK-dC6ZPrtwT2swzTNMLF_zsM0RiTmSb9LZcOGGH0EIF7dcolZcTe1ocxKux6ikimqg/s320/16.png) no-repeat center center;}
#circularMenu li.vídeos {left:5px; top:115px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2Sutbh-PputvvIH0gtniwptKDmdIW53dLet8PVjQkxAO9J1TFqO8KGbp5gZOWw6GrIReGTIiFShqqxhpK29OTSPiHrF6YeQspHwJ9aL_yPFNlKEB9bewQy1tBAY0q0t7Mu7s6fG-pmHA/s320/18.png) no-repeat center center;}
#circularMenu li.fotos {left:120px; top:225px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhEeMHx1J-dmwRfMUcgZRW-ZLyouecvBArxnJf_HxkkxlbR3r0IMTDOPRNkBYX4WkFM-bVrgFtwv-TONi6vYP45BUw4UEcdsfNYaMX-HvZj-wphKrHdr_DinvZn4Yc7v9ZxXeocFN_gBA/s320/125.png) 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyeoIT7p3UnFMVZ_y2xmm914tq6CSsT8KOBCViWWoI6KEcKTY1VEmOHJ-Sg6NEWcRTfwclaWdGrAXpv6uvJKFuw3rdAbuZlKUhOfEygWNjjVVMqdzba-cmd6mnjCOs2vHkxdP1MmW-H9E/s320/circle.gif); 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.descargas a:hover b {left:63px; top:64px;}
#circularMenu li.email a:hover b {left:-132px; top:-11px;}
#circularMenu li.vídeos a:hover b {left:93px; top:-11px;}
#circularMenu li.fotos a:hover b {left:-22px; top:-121px;}
#circularMenu li.search a:hover b {left:63px; top:-87px;}
#circularMenu li.música a:hover b {left:-102px; top:-87px;}

Ya podemos guardar los cambios y vamos a entender un poco en qué consiste para poder personalizarlo.
La primera parte contiene la imagen de fondo del menú:
#circularMenu {padding:0; margin:0 auto; list-style:none; position:relative; width:300px; height:300px; background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2SfUYoCkAr3x8h7UHU0V8sATFmkOzHdLBeGJS3qzqY7zP8SNBYjRnwPN4d7tzqBeU7Yr6vXbKc2k_ZQiiCcI6r94yWOpnC6rDRCwVRH3qiZZIEUGZDx8OL-wEKVJBZB5PZXDkcrQkppg/s0/backgroundcircular.gif) no-repeat;}

La segunda imagen es el círculo que rodea los iconos cuando pasamos el ratón sobre la imagen:
#circularMenu li a:hover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyeoIT7p3UnFMVZ_y2xmm914tq6CSsT8KOBCViWWoI6KEcKTY1VEmOHJ-Sg6NEWcRTfwclaWdGrAXpv6uvJKFuw3rdAbuZlKUhOfEygWNjjVVMqdzba-cmd6mnjCOs2vHkxdP1MmW-H9E/s320/circle.gif); text-decoration:none; font-family:georgia, serif;}

Como es lógico podemos tener otra idea respecto a iconos o enlaces que deseamos añadir así que en este mismo código de la plantilla vamos a sustituir los iconos por los nuestros..
Cada icono está representado con un color, donde dice por ejemplo música lo sustituimos por el nombre que añadiremos a ese tema en particular.
También vamos a sustituir la url de la imagen por la nuestra poniendo especial atención que cada url de la imagen esté relacionada con el nombre del tema:

#circularMenu li.música {left:200px; top:190px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4UthP6UNWmu6BW20u2MK1K28ypLRbm5Cbcg6RllKY4e8wE6jitVwcpXKjaVy4d_flMMKqSTCu73RN4b8KnK7gYWBnufzyz0BzwZd2x9DBROjuzM-WRMSjX-9E1iW4XL_1FmwSeDnfOd4/s320/110.png) no-repeat center center;}

Cada vez que sustituimos una imagen y añadimos el nombre iremos al código que hay más abajo :
#circularMenu li.música a:hover b {left:-102px; top:-87px;}

Ahí también debemos añadir el nombre de nuestro tema, por ejemplo si sustituimos el icono de música por uno de "enlaces" sustituimos el texto de "música" por "enlaces"
#circularMenu li.enlaces a:hover b {left:-102px; top:-87px;}

Una vez terminamos con todos guardamos los cambios y nos dirigimos al elemento de página que añadimos en HTML.. allí las modificaciones serán las siguientes.
Cada línea está relacionada con el código de la plantilla por ejemplo en:
<li class="home"><a href="#url"><b>HOME<br /><span>texto de home</span></b></a></li>
En HOME tenemos el icono que añadimos en nuestra plantilla, le adjudicamos una clase que es el nombre "class="home" esa clase será la que otorgue la imagen y el efecto al pasar el ratón sobre el icono, ese es el motivo por el que deben coincidir los dos nombres de lo contrario no causaría efecto.
Para crear un enlace sustituimos el asterisco # por la url de la página que vamos a enlazar.
En "HOME" es el texto de mayor tamaño.
Donde "texto de home" es el texto de menor tamaño que muestra una breve descripción.


» Menú de CSSplay
» Iconos Milky de iconeden