« anterior | siguiente »

Home > 2008 > Junio > Viernes, 20 de Junio 2008 > Menú radial mediante XHTML
Blogs Media: CSS Mania | VivirLatino | Sentido Web | Apps Mania

Publicidad

Vie20Jun2008

Menú radial mediante XHTML

11:45 H (CET)| Temas: CSS · Javascript · XHTML

Buen tutorial que nos explica cómo realizar un menú radial, es decir, un menú en el que las opciones se sitúan alrededor de un punto.

menu_radial.png

El tutorial nos indica cómo crear la estructura XHTML, los estilos, y el código Javascript para que funcione el menú.

Siendo algo puristas, no me gusta el uso del XHTML y el de los estilos, incluso podría sobrar Javascript. El código XHTML no es semántico. Aúnque claro, quizás lo haya hecho porque la solución que os paso ahora no sirve para IE6.

menu_radial2.png

El HTML sería el siguiente:

<ul>
<li><a href="1.html">1</a></li>
<li><a href="2.html">2</a></li>
<li><a href="3.html">3</a></li>
<li><a href="4.html">4</a></li>
</ul>

Y los estilos:

ul {
  width: 150px;
  height: 150px;
  display: block;
  padding: 0px;
  margin: 0px;
}
li {
  width: 48px;
  height: 48px;
  display: block;
  border: 1px solid #008585;
  background: #24B8B8;
  margin: 0px;
  padding: 0px;
  float: left;
  text-align: center;
}
li + li + li {
  margin-left: 50px;
}
li:first-child {
  margin: 0px 50px;
}
a {
  font-size: 250%;
  font-family: Arial;
  text-decoration: none;
  color: #DEDED2;
}

Javascript Tutorial - Radial Menus Part 1

Relacionados

Sin comentar » Formulario

Conversación

Nombre:

Email:

(no aparecerá)

URL:

(opcional)
¿Recordar datos?

↓ Comentarios (XHTML permitido)