Mundo-Informatico

Mundo-Informatico By Minedosantox
 
ÍndiceÍndice  CalendarioCalendario  FAQFAQ  BuscarBuscar  MiembrosMiembros  Grupos de UsuariosGrupos de Usuarios  RegistrarseRegistrarse  ConectarseConectarse  
Bienvenidos a mi foro Mundo-Informatico xD By Minedosantox
Navegación
 Portal
 Índice
 Miembros
 Perfil
 FAQ
 Buscar
Foro
Noticias
Últimos temas
» Encristar Codigos
Miér Oct 27, 2010 2:01 pm por Minedosantox

» Nuevo Taller
Mar Oct 26, 2010 7:59 pm por Minedosantox

» Me Presento soy el staff
Lun Oct 25, 2010 7:47 pm por Minedosantox

» Rangos del foro
Lun Oct 25, 2010 7:42 pm por Minedosantox

» TEMA PARA LAS PERSONAS QUE BUSCAN EL CODIGO DE FIRMA!
Lun Oct 25, 2010 5:32 am por Minedosantox

» Respuesta rapida
Lun Oct 25, 2010 5:31 am por Minedosantox

» Poniendo Pop Up
Lun Oct 25, 2010 5:31 am por Minedosantox

» Reglamentos de los foros
Dom Oct 24, 2010 10:45 pm por Minedosantox

» Ya Pusimos Resuelto y en curso
Dom Oct 24, 2010 10:31 pm por Minedosantox

Mejores posteadores
Minedosantox
 

Get your own Chat Box! Go Large!
Spirate v2 Buscar en Spirate v2 UTF-8 data:image/x-icon;base64,R0lGODlhEAAQAPcAAAAAAD06GicnJzU4MWR1KW98Ok5LVk1RSFBWS1VbTmZYXGBcYHV1epsME7IHDLUXHLoQE5tlAIRmIYl1LZt6LZl%2BOq94Aap%2BJaB%2FNptBRJFYXYR7Sq9ye7J3e8kAANMqL9MuMegAAP8AAP8ABP8REe8mKfksMP8yMv9ERISbJoWWM5StJpClMJ21J7KILIuTXpaDWoyTao%2BZZpKbZrfJQv%2BdAOWpHf%2BqAP%2B7AOWzKdOnQcXYSdbqUuLDU%2B3OXv%2FaR%2F%2FYT%2F%2FWZv%2Fdd%2F%2FdepOXnpKbm5uTmKWfk7KJlLKJl7KNmrqLmKi1t662urexpbO2t7G6vLq4tLzC0%2F%2BJifSlpP%2B%2Fv8zDm9HGmtjlhd3qhd3thN%2FqofTTi%2Bj3iuj5hu%2F%2Fh%2BXyne78kv%2Flh%2Bj0pP%2Frtf%2Fut%2FD8rv%2FztcbGxsjIztHR0dHS1tfe79zd4tre6P%2Fd3f%2F%2Fyf%2F62%2BLi4uLh6uPj6OTj7ebm7eXp6ubo7ejo7fT0%2Bff4%2Bff8%2FPn5%2Bfz8%2FP%2F%2F%2FwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAP8ALAAAAAAQABAAAAjJAAEIHEhwoAABAv8oXHiHQYeFff4kXPiHj5EPDqhQnLiQCQgRIR5UWcjxDxQIIkSc8GDijUKOTTKMEEECRYkGU14C%2BOPnyQINHJYgSaLEgAI0Enf6USOnyAQfPXLYkEBkTVKKTirEISMGiIU2e64ujEJhSJAyQi64iVhSSoQaN85wwYBHJ0U2Lm7g%2BKEDBh09egTmsVNnTpojV6xsCDDgAIIEAmfEkPGiAIEUK1qwUEFjBw%2BBWbx8%2BeIFi5YuYcBsGWMGTsHXrwMCADs%3D http://www.yelidmod.com/web/

Comparte | 
 

 Menu Horizontal Desplege

Ver el tema anterior Ver el tema siguiente Ir abajo 
AutorMensaje
Minedosantox
Administrador
Administrador
avatar

Post: : 53
Gracias : 4
Fecha de inscripción : 22/10/2010
Edad : 26

MensajeTema: Menu Horizontal Desplege   Dom Oct 24, 2010 5:46 am

Código:
e 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:

Volver arriba Ir abajo
Ver perfil de usuario http://mundo-informatico.espana-foro.org
 
Menu Horizontal Desplege
Ver el tema anterior Ver el tema siguiente Volver arriba 
Página 1 de 1.
 Temas similares
-
» menu horizontal deslizante
» necesito menu horizontal
» [Tutorial] Menú horizontal que se ilumina
» El menu acordeón se muestra en forma vertical en vez de horizontal.
» Quiero una barra horizontal donde aparezcan las redes sociales de un lado, y del otro lado un menú desplegable...

Permisos de este foro:No puedes responder a temas en este foro.
Mundo-Informatico :: Códigos :: Html-
Cambiar a: