Team-Soporte
¿Quieres reaccionar a este mensaje? Regístrate en el foro con unos pocos clics o inicia sesión para continuar.

Menu Desplegable

4 participantes

Team-Soporte :: General :: Codigos

Ir abajo

Menu Desplegable Empty Menu Desplegable

Mensaje por ForoX Miér Nov 19, 2008 6:43 pm

Bueno aqui les dejo un codigo de un menu Despegable
Código:
style type="text/css" media="screen">

<!--

body

{

font-family: Times New Roman, Arial;

font-size: 00px;

overflow: auto;

padding: 10px;

margin: 0px;

}



ul, li

{

list-style-type: none;

padding: 0px;

margin: 0px;

}



li a

{

padding-right: 20px;padding-top: 5px;

}



div.menu

{

position: absolute;

z-index: 3;

top: 163px;

left: 52%;

margin-left: 149px;

width: 100px;

}



.menu li

{

width: 95px;

float: left;

}



.menu a

{

border: 0px solid #ffffff;

background-color: #xxxxxx;

background-image: url();

text-decoration: none;

text-align: center;

font-weight: bold;

cursor: pointer;

margin: 0px;

display: block;

height:67px;

color: #808080;

}



.menu a:hover

{

background-color: #transparent;

background-image: url();

}



#smenu1, #smenu2, #smenu3, #smenu4, #smenu5

{

font-size: 15px;

display: none;

width: 70px;

float: left;

}



#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a, #smenu5 a

{

font-weight: bold;

padding-top: 5px;

border-top: 0px;

cursor: pointer;

color: #FFFFFF;

}

//-->



</style>



<script type="text/javascript">

<!--

function montre(id)

{

with (document)

{

if (getElementById)

getElementById(id).style.display = 'block';

else if (all)

all[id].style.display = 'block';

else

layers[id].display = 'block';

}

}



function cache(id)

{

with (document)

{

if (getElementById)

getElementById(id).style.display = 'none';

else if (all)

all[id].style.display = 'none';

else

layers[id].display = 'none';

}

}

//-->

</script>

<div class="menu">

<li><a href="Link1"></a> </li>

<li><a href="Link2"></a> </li>

<li><a href="Link3"></a> </li> 

<li><a href="Link4"></a> </li>

<li><a href="Link5"></a> </li>



 

</div>



<div id="Designmystic">



<div id="text"><h1></h1>

</div>





<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>







<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"Careloko"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http:/www.w3.org/1999/xhtml">

<div style="width:910px; position: relative; margin-left: auto; margin-right: auto;">



<style type="text/css">

body {font-family: Arial, Helvetica, sans-serif;margin: 0;padding: 0;}

#marco {width:500px;margin:110px 0;padding:0px;text-align:left;}



.preload2 {background: url(http://img232.imageshack.us/img232/3973/nazimcabuton4ut3.gif);}

.menu2 {padding:0; margin:0; margin-bottom:0; list-style:none;
height:25px; background:#fff
url(http://img232.imageshack.us/img232/3973/nazimcabuton4ut3.gif)
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:#FFFFFF; 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(http://img232.imageshack.us/img232/3973/nazimcabuton4ut3.gif);}

.menu2 li a.top_link:hover span { background:url(http://img232.imageshack.us/img232/3973/nazimcabuton4ut3.gif)}

.menu2 li a.top_link:hover span.down { background:url(http://img232.imageshack.us/img232/3973/nazimcabuton4ut3.gif)}



.menu2 li:hover > a.top_link {color:#ffffff; background:url(http://img232.imageshack.us/img232/3973/nazimcabuton4ut3.gif);}

.menu2 li:hover > a.top_link span {background:url(http://img232.imageshack.us/img232/3973/nazimcabuton4ut3.gif);}

.menu2 li:hover > a.top_link span.down {background:url(http://img232.imageshack.us/img232/3973/nazimcabuton4ut3.gif);}





.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:#981026;
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
#fc0311; border-left:1px solid #fc0311; border-right:1px solid #fc0311;
margin-bottom:0;}

.menu2 :hover ul.sub li a {display:block; height:auto;
font-size:11px; padding:4px 3px; line-height:1; color: #ffffff;
text-decoration:none;}

.menu2 :hover ul.sub li a.fly {background:#981026  url(http://pixelea.com/s/2dfee34e5f.png) no-repeat 150px 6px;}

.menu2 :hover ul.sub li a:hover {background: #000000; color#ffffff;}

.menu2 :hover ul.sub li a.fly:hover {background: #000000url(http://pixelea.com/s/2dfee34e5f.png) no-repeat 150px 6px;}

.menu2 :hover ul li:hover > a.fly {background:

#981026}



.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 #fc0311; background: #000000; z-index:300;}

</style>



<div style="position:absolute;left:0px;top:114px;">

<div id="marco">

<span class="preload2"></span>

<!--MENU-->

<ul class="menu2"><img
src="http://pixelea.com/s/91cc705aae.png" align="left" /><img
src="http://pixelea.com/s/c8d445da7e.png" align="right"/>

<li class="top"><a href="spre4dsheets.es.tl/" id="Menu1" class="top_link"><span class="down">HoMe</span>

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



<li class="top"><a href="#" id="Menu2" class="top_link"><span class="down">TutorialeS</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="Menu7" class="top_link"><span class="down">Menu7</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>

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

</li>



</ul>

<!-- FIN MENU-->

</div>
Gracias espero que le guste
ForoX
ForoX
Novato
Novato

Cantidad de envíos : 1
Fecha de inscripción : 19/11/2008

Volver arriba Ir abajo

Menu Desplegable Empty Re: Menu Desplegable

Mensaje por juan Jue Nov 20, 2008 12:30 pm

Muchas gracias amigo Smile
juan
juan
Moderador
Moderador

Cantidad de envíos : 71
Edad : 29
Localización : Cordoba- Argentina
Fecha de inscripción : 15/06/2008

--> Perfil
Talller(es): Si
Moderadores: Si

http://quemusica.es.tl

Volver arriba Ir abajo

Menu Desplegable Empty Re: Menu Desplegable

Mensaje por Team-Soporte Jue Nov 20, 2008 9:01 pm

Gracias por tu colaboracion
Team-Soporte
Team-Soporte
Administrador
Administrador

Cantidad de envíos : 172
Edad : 29
Localización : CR (Costa Rica)
Fecha de inscripción : 26/05/2008

--> Perfil
Talller(es): Si
Moderadores: No

http://free-tutoriales.es.tl

Volver arriba Ir abajo

Menu Desplegable Empty Re: Menu Desplegable

Mensaje por MoDiTox Mar Dic 30, 2008 5:37 pm

Excelente menú gracias por el aporte.
MoDiTox
MoDiTox
Moderador
Moderador

Cantidad de envíos : 39
Edad : 29
Localización : ¿Yo? En mi casa porque?
Fecha de inscripción : 17/12/2008

--> Perfil
Talller(es): No
Moderadores: No

http://www.designs-web.es.tl

Volver arriba Ir abajo

Menu Desplegable Empty Re: Menu Desplegable

Mensaje por Contenido patrocinado


Contenido patrocinado


Volver arriba Ir abajo

Volver arriba

- Temas similares

Team-Soporte :: General :: Codigos

 
Permisos de este foro:
No puedes responder a temas en este foro.