MagzNetwork Blog Design Demo
MagzNetwork Blog Design Demo

Webjose20

Menu

Fuente: www.cssplay.co.uk
Vista Previa:

Texto Por Encima De La Pagina

Código:
<style type="text/css">
#info {padding-bottom:100px;}

/* ================================================================
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) 2005-2007 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(http://img40.xooimage.com/files/6/c/3/background-de5f16.gif) no-repeat;}
#circularMenu li {display:block; width:60px; height:60px; position:absolute;}
#circularMenu li.home {left:120px; top:4px; background:url(http://img22.xooimage.com/files/b/1/5/home-de5f20.gif) no-repeat center center;}
#circularMenu li.chat {left:200px; top:40px; background:url(http://img40.xooimage.com/files/5/d/0/chat-de5f30.gif) no-repeat center center;}
#circularMenu li.upload {left:35px; top:40px; background:url(http://img28.xooimage.com/files/2/6/9/photo-de5f3c.gif) no-repeat center center;}
#circularMenu li.email {left:230px; top:115px; background:url(http://img26.xooimage.com/files/b/6/c/email-de5f42.gif) no-repeat center center;}
#circularMenu li.address {left:5px; top:115px; background:url(http://img22.xooimage.com/files/f/4/0/address-de5f4c.gif) no-repeat center center;}
#circularMenu li.shop {left:200px; top:190px; background:url(http://img48.xooimage.com/files/d/7/d/shop-de5f59.gif) no-repeat center center;}
#circularMenu li.search {left:35px; top:190px; background:url(http://img48.xooimage.com/files/3/7/2/search-de5f63.gif) no-repeat center center;}
#circularMenu li.delivery {left:120px; top:225px; background:url(http://img24.xooimage.com/files/8/0/b/delivery-de5f79.gif) 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(http://www.cssplay.co.uk/menus/circular/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.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;}
</style>


Codigo Del Menu (Editar Links)

Código:
<div id="circularMenu">
   <li class="home"><a href="inicio.htm"><b>Inicio<br><span>Ve Al Inicio</span></b></a></li>
   <li class="chat"><a href="gracias.htm"><b>Contactame<br><span>Enviame Tus Dudas o Comentarios</span></b></a></li>

   <li class="email"><a href="construccion.htm"><b>Mi Email<br><span>Enviame Correos</span></b></a></li>
   <li class="shop"><a href="construccion.htm"><b>Lo Nuevo<br><span>Encuentra Lo Nuevo De la Web</span></b></a></li>
   <li class="delivery"><a href="afiliados.htm"><b>Afiliados<br><span>Web Amigas</span></b></a></li>
   <li class="search"><a href="gracias.htm"><b>Afiliate!!<br><span>Te Gustaria Estar En Mi Web?</span></b></a></li>
   <li class="address"><a href="http://www.paginawebgratis.es"><b>Pagina Web Gratis<br><span>Te Gustaria Una Web Como Esta?</span></b></a></li>

   <li class="upload"><a href="http://www.piczuela.co.cc"><b>UPLOAD<br><span>Sube Imagenes!!</span></b></a></li>
</div>


Salu2!!


Menus Desplegables:


He puesto éste código para todos aquellos WebMaster que deseen colocar un menu horizontal desplegable, modificable y que funcione con el navegador Tested in IE6, IE7, Firefox, Opera, Netscape, Mozilla y Safari (PC) (ya que el menu desplegable de didita por alguna razon no me funcionaba con algunos navegadores).
Primero desir que el codigo no es para nada sensillo, y para todo aquel que quiera implementarlo en su web debera tener conocimientos del lenguaje CSS o sino está la posibilidad que su menu no le funcione.

Bueno acá les va el código, modifiquenlo a su pinta:
Esto va en Texto por debajo de la Página escribió:

<style type="text/css">
body {font-family: Arial, Helvetica, sans-serif; margin: 0; padding: 0;}
#marco { width:921px; margin:10px 0; padding:0px; text-align: left;}

.preload2 {background: url(URL Fondo Mhover);}
.menu2 {padding:0; margin:0; margin-bottom:0; list-style:none; height:25px; background:#fff url(URL Fondo M) repeat-x; position:relative; font-family:arial, verdana, sans-serif; }
.menu2 li.top {display:block; float:left; position:relative;}
.menu2 li a.top_link {display:block; float:left; height:25px; margin-left:6px; line-height:25px; color:#Letra M; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 6px; cursor:pointer;}
.menu2 li a.top_link span {float:left; display:block; padding:0 10px 0 6px; height:40px;}
.menu2 li a.top_link span.down {float:left; display:block; padding:0 10px0 6px; height:25px;/*background:url(prodrop2/down.gif) no-repeat right top;*/}
.menu2 li a.top_link:hover {color:#fff; background:url(URL Fondo Mhover);}
.menu2 li a.top_link:hover span { background:url(URL Fondo Mhover)}
.menu2 li a.top_link:hover span.down { background:url(URL Fondo Mhover)}
.menu2 li:hover > a.top_link {color:#Letra Mhover; background:url(Fondo Mhover);}
.menu2 li:hover > a.top_link span {background:url(URL Fondo Mhover);}
.menu2 li:hover > a.top_link span.down {background:url(URL Fondo Mhover);}
.menu2 table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}

.menu2 a:hover {visibility:visible;}
.menu2 li:hover {position:relative; z-index:200;}

.menu2 ul,
.menu2 :hover ul ul,
.menu2 :hover ul :hover ul ul,
.menu2 :hover ul :hover ul :hover ul ul,
.menu2 :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
.menu2 :hover ul.sub {left:6px; top:25px; background: #fondo L1; padding:0; /*border:1px solid #1E8BB5; white-space:nowrap;*/ width:auto; height:auto; font-weight:normal;}
.menu2 :hover ul.sub li {display:block; /*height:20px; */position:relative; float:left; width:160px; border-bottom:1px solid #Borde L1,2 Inf; border-left:1px solid #Borde L1,2 Izq; border-right:1px solid #Borde L1,2 der; margin-bottom:0;}
.menu2 :hover ul.sub li a {display:block; height:auto; font-size:11px; padding:4px 3px; line-height:1; color:#Letra L1,2; text-decoration:none;}
.menu2 :hover ul.sub li a.fly {background:#fondo L1 url(URL VIÑETA) no-repeat 150px 6px;}
.menu2 :hover ul.sub li a:hover {background:#fondo L1,2hover; color:#Letra L1,2hover;}
.menu2 :hover ul.sub li a.fly:hover {background:#fondo L1hover url(URL VIÑETA) no-repeat 150px 6px;}
.menu2 :hover ul li:hover > a.fly {background:#fondo L1}

.menu2 :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul :hover ul :hover ul
{left:160px; top:-1px; background: #fff; padding:0; /* white-space:nowrap; */width:auto; z-index:300; height:auto;}
.menu2 :hover ul.sub li ul {border-top:1px solid #borde L2 sup; background: #fondo L2; z-index:300;}
</style>

Simbologia escribió:
Azul= Color de Letra
Naranjo= Color del Fondo de los menus Desplegables (Fondo Link 0.0 y 0.0.0)
Verde= Color del Borde del menu desplegable
Medidas Recomendadas de tus imágenes:
URL VIÑETA:4x7
URL FONDO M DER-IZ:3x25
URL FONDO M:1x25
URL FONDO MHOVER:1x25
pdt=el ancho no es muy importante pero el alto debe ser de 25px en tus fondos

Luego este es el codigo de tu menu, puedes pegarlo en un box y luego con el codigo de pirro ubicarlo donde quieras
Código Menu escribió:

<div id="marco">
<span class="preload2"></span>
<!--MENU-->
<ul class="menu2"><img src="URL FONDO IZ" align="left" /><img src="URL FONDO DER" align="right"/>

<li class="top"><a href="#" id="Menu1" class="top_link"><span class="down">Menu1</span>
<!--[if gte IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub">
<li><a href="#">Link 1.1</a></li>
<li><a href="#">Link 1.2</a></li>
<li><a href="#">Link 1.3</a></li>
<li><a href="#">Link 1.4</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>


<li class="top"><a href="#" id="Menu2" class="top_link"><span class="down">Menu2</span>
<!--[if gte IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub">
<li><a href="#">Link 2.1</a></li>
<li><a href="#">Link 2.2</a></li>
<li><a href="#">Link 2.3</a></li>
<li><a href="#">Link 2.4</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>


<li class="top"><a href="#" id="Menu3" class="top_link"><span class="down">Menu3</span>
<!--[if gte IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub">
<li><a href="#">Link 3.1</a></li>
<li><a href="#">Link 3.2</a></li>


<li class="mid"><a href="#" class="fly">Link 3.3
<!--[if gte IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">Link 3.3.1</a></li>
<li><a href="#">Link 3.3.2</a></li>
<li><a href="#">Link 3.3.3</a></li>
<li><a href="#">Link 3.3.4</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>


<li class="mid"><a href="#" class="fly">Link 3.4
<!--[if gte IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">Link 3.4.1</a></li>
<li><a href="#">Link 3.4.2</a></li>
<li><a href="#">Link 3.4.3</a></li>
<li><a href="#">Link 3.4.4</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>


</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>


</ul>
<!-- FIN MENU-->
</div>


Acá tienes un ejemplo de como se verá tu menú desplegable:
Click AQUI
Espero que les sirva a vari@s

Codigo Para Posicionar tu Menu Desplegable escribió:
<div style="position:absolute;left:0px;top:114px;">
Acá va el codigo de tu menu
</div>



Codigo escribió:
<style type="text/css">
body {font-family: Arial, Helvetica, sans-serif; margin: 0; padding: 0;}
#marco { width:921px; margin:10px 0; padding:0px; text-align: left;}

.preload2 {background: url(URL Fondo Mhover);}
.menu2 {padding:0; margin:0; margin-bottom:0; list-style:none; height:25px; background:#fff url(URL Fondo M) repeat-x; position:relative; font-family:arial, verdana, sans-serif; }
.menu2 li.top {display:block; float:left; position:relative;}
.menu2 li a.top_link {display:block; float:left; height:25px; margin-left:6px; line-height:25px; color:#Letra M; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 6px; cursor:pointer;}
.menu2 li a.top_link span {float:left; display:block; padding:0 10px 0 6px; height:40px;}
.menu2 li a.top_link span.down {float:left; display:block; padding:0 10px0 6px; height:25px;/*background:url(prodrop2/down.gif) no-repeat right top;*/}
.menu2 li a.top_link:hover {color:#fff; background:url(URL Fondo Mhover);}
.menu2 li a.top_link:hover span { background:url(URL Fondo Mhover)}
.menu2 li a.top_link:hover span.down { background:url(URL Fondo Mhover)}
.menu2 li:hover > a.top_link {color:#Letra Mhover; background:url(URL Fondo Mhover);}
.menu2 li:hover > a.top_link span {background:url(URL Fondo Mhover);}
.menu2 li:hover > a.top_link span.down {background:url(URL Fondo Mhover);}
.menu2 table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}

.menu2 a:hover {visibility:visible;}
.menu2 li:hover {position:relative; z-index:200;}

.menu2 ul,
.menu2 :hover ul ul,
.menu2 :hover ul :hover ul ul,
.menu2 :hover ul :hover ul :hover ul ul,
.menu2 :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
.menu2 :hover ul.sub {left:6px; top:25px; background: #fondo L1; padding:0; /*border:1px solid #1E8BB5; white-space:nowrap;*/ width:auto; height:auto; font-weight:normal;}
.menu2 :hover ul.sub li {display:block; /*height:20px; */position:relative; float:left; width:160px; border-bottom:1px solid #Borde L1,2 inf ; border-left:1px solid #Borde L1,2 izq; border-right:1px solid #Borde L1,2 der; margin-bottom:0;}
.menu2 :hover ul.sub li a {display:block; height:auto; font-size:11px; padding:4px 3px; line-height:1; color:#Letra L1,2; text-decoration:none;}
.menu2 :hover ul.sub li a.fly {background:#fondo L1 url(URL VIÑETA) no-repeat 150px 6px;}
.menu2 :hover ul.sub li a:hover {background:#fondo L1,2hover; color:#Letra L1,2hover;}
.menu2 :hover ul.sub li a.fly:hover {background:#fondo L1hover url(URL VIÑETA) no-repeat 150px 6px;}
.menu2 :hover ul li:hover > a.fly {background:#fondo L1}

.menu2 :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul :hover ul :hover ul
{left:160px; top:-1px; background: #fff; padding:0; /* white-space:nowrap; */width:auto; z-index:300; height:auto;}
.menu2 :hover ul.sub li ul {border-top:1px solid #Borde L2 sup; background: #fondo L2; z-index:300;}
</style>

Simbologia escribió:
CELESTE:Éste es el ancho de tu menu horizontal
ROJO: Son las url de tus imagenes
VERDE CLARO: Es el alto de tu menu horizontal
VERDE: Es el color de los bordes
NARANJO: Es el fondo de lo que se desplega
AZUL: Es el color de letra
ROSA: Es La ubicación de tu menú horizontal

Medida Recomendada:
URL FONDO M DER-IZ:3x25
URL FONDO M:1x25
URL FONDO MHOVER:1x25


Y ESTE ES EL CODE PARA QUE COMIENCES A CREAR TU MENU:
MENU escribió:

<div style="position:absolute;left:0px;top:140px;">
<div id="marco">
<span class="preload2"></span>
<!--MENU-->
<ul class="menu2"><img src="URL FONDO IZ" align="left" /><img src="URL FONDO DER" align="right"/>

<li class="top"><a href="#" id="Menu1" class="top_link"><span class="down">Menu1</span>
<!--[if gte IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub">
<li><a href="#">Link 1.1</a></li>
<li><a href="#">Link 1.2</a></li>
<li><a href="#">Link 1.3</a></li>
<li><a href="#">Link 1.4</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li class="top"><a href="#" id="Menu2" class="top_link"><span class="down">Menu2</span>
<!--[if gte IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub">
<li><a href="#">Link 2.1</a></li>
<li><a href="#">Link 2.2</a></li>
<li><a href="#">Link 2.3</a></li>
<li><a href="#">Link 2.4</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li class="top"><a href="#" id="Menu3" class="top_link"><span class="down">Menu3</span>
<!--[if gte IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub">
<li><a href="#">Link 3.1</a></li>
<li><a href="#">Link 3.2</a></li>


<li class="mid"><a href="#" class="fly">Link 3.3
<!--[if gte IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">Link 3.3.1</a></li>
<li><a href="#">Link 3.3.2</a></li>
<li><a href="#">Link 3.3.3</a></li>
<li><a href="#">Link 3.3.4</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li class="mid"><a href="#" class="fly">Link 3.4
<!--[if gte IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">Link 3.4.1</a></li>
<li><a href="#">Link 3.4.2</a></li>
<li><a href="#">Link 3.4.3</a></li>
<li><a href="#">Link 3.4.4</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>


</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>


</ul>
<!-- FIN MENU-->
</div>
</div>

SIMBOLOGIA:



Mas...:

Hola xD !



Primero se pegas este codigo :

Código:
  <link rel="stylesheet" type="text/css" href="http://www.dynamicdrive.com/cssexamples/media/jquerycssmenu.css" />

<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="http://img10.xooimage.com/files/1/8/a/jquerycssmenu-b581fe.js"></script>
 <br /><br />




Para agregar esto :

Código:

<div id="myjquerymenu" class="jquerycssmenu">
<ul>
<li><a href="#">Item 1</a></li>

<li><a href="#">Item 2</a></li>


<li><a href="#">Folder 1</a>
  <ul>
  <li><a href="#">Sub Item 1.1</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
  <li><a href="#">Sub Item 1.3</a></li>
  <li><a href="#">Sub Item 1.4</a></li>
  </ul>
</li>


<li><a href="#">Item 3</a></li>


<li><a href="#">Folder 2</a>
  <ul>
  <li><a href="#">Sub Item 2.1</a></li>
  <li><a href="#">Folder 2.1</a>
    <ul>
    <li><a href="#">Sub Item 2.1.1</a></li>
    <li><a href="#">Sub Item 2.1.2</a></li>
    <li><a href="#">Folder 3.1.1</a>
      <ul>
          <li><a href="#">Sub Item 3.1.1.1</a></li>
          <li><a href="#">Sub Item 3.1.1.2</a></li>
          <li><a href="#">Sub Item 3.1.1.3</a></li>
          <li><a href="#">Sub Item 3.1.1.4</a></li>
          <li><a href="#">Sub Item 3.1.1.5</a></li>
      </ul>
    </li>
    <li><a href="#">Sub Item 2.1.4</a></li>
    </ul>
  </li>
  </ul>
</li>

<li><a href="#">Item 4</a></li>

</ul>
<br style="clear: left" />
</div>
 


Saludos !

fuente:

http://www.dynamicdrive.com/style/csslibrary



Otro Mas xD:

Aqui les dejo un menu horizontal desplegable... espero q les guste

aunque yo se q hay muchos jejeje



Lo primero es la estructura, para ella usaré una lista, asi queda todo bien recogidito:

<ul id=”menu-horizontal”>
<li><a href=”#” title=”Texto”>Texto</a></li>
<li><a href=”#” title=”Texto”>Texto</a></li>
<li><a href=”#” title=”Texto”>Texto</a>
<ul>
<li><a href=”#” title=”Texto”>Texto</a></li>
<li><a href=”#” title=”Texto”>Texto</a></li>
</ul>
</li>
<li><a href=”#” title=”Texto”>Texto</a></li>
<li><a href=”#” title=”Texto”>Texto</a></li>
</ul>

La cosa es así: el <ul> es el menú en sí, cada <li> es un botón del menú y el <ul> dentro del <li> es desplegable de ese botón. ¿Me se entiende? xD

Vale, ahora voy a aplicarle un poco de estilo para que quede el menu en horizontal, ya que por defecto las listas son verticales. Se consigue fácil, agregandole a los elementos de la lista el atributo de flotante:


ul#menu-horizontal li {
float: left;
display: inline;
position: relative;
}

Y ahora que es horizontal, voy a ocultar el submenú, ya que no quiero que aparezca aún, solo se tiene que mostrar cuando pase el ratón por encima del botón que tiene submenu. El css en cuestión:

ul#menu-horizontal ul {
display: none;
position: absolute relative;
top: 24;
left:0;
margin-left:-40px;
margin:0;
padding:0;
background:#FFFFFF;
}

ul#menu-horizontal ul li {
display: block !important;
}

ul#menu-horizontal li:hover ul,
ul#menu-horizontal li.iehover ul {
display: none;
}

ul#menu-horizontal li:hover ul,
ul#menu-horizontal li.iehover ul{
display: block;
}

Y.. perfecto! Ya funciona nuestro menu desplegable y horizontal, pero nos queda un paso. Hacerlo bonito. Para ello aplicamos un poco de estilo por aquí..

#menu-horizontal {
width:500px;
margin:0 auto;
}

#menu-horizontal li {
margin:0 1px;
width:98px;
min-height:19px;
text-align:center;
background:#BBB;
list-style:none;
padding:2px 0;
}

/* y otro poquito por aquí.. */

#menu-horizontal li:hover {
background:#C5014F;
}

#menu-horizontal li a {
font:bold 11px Arial, Helvetica, sans-serif;
color:#FFF;
text-decoration:none;
}

#menu-horizontal li ul li{
float:none;
width:98px;
margin:1px 0;
}

=> ¿Desea una página web gratis? Pues, haz clic aquí! <=