Menu dinamico en Jquery

Posteado el 02. Jun, 2010 por in Desarrollo Web, Jquery

Aqui puedes ver lo que te enseñaremos hoy es un menu dinamico en jquery

Aqui te dejamos este video de como hacer un menú dinámico con JQUERY. Te colocamos los codigos que utilizamos tanto de HTML como de CSS

Codigo HTML que usamos

<link rel="stylesheet" href="css/menu.css" type="text/css"
 
media="screen">
 
</head> 
 
<body> 
 
<div id="container">
 
      <ul id="nav">
 
            <li id="selected"><a href="#">Inicio</a></li>
 
            <li><a href="#">Quienes Somos</a></li>
 
            <li><a href="#">Productos</a></li>
 
            <li><a href="#">Servicio</a></li>
 
            <li><a href="#">Contáctenos</a></li>
 
      <li style="width: 171px; height: 116px; left: 0px; top: -10px;
 
background-color: rgb(11, 43, 97); display: list-item;" id="blob"></li></ul> 
 
</div> 
 
<script src="js/jquery.js" type="text/javascript"></script> 
 
<script type="text/javascript" src="js/jquery-ui.js"></script>
 
<script type="text/javascript" src="js/jquery_002.js"></script>
 
<script type="text/javascript">
 
$('#nav').spasticNav();
 
</script>
 
</body>
 
</html>

Codigo CSS que utilizamos

#container {
 
width: 1200px;
 
margin: 100px auto;
 
} 
 
ul, li {
 
margin: 0; padding: 0;
 
} 
 
#blob { 
 
border-right: 1px solid #0059ec;
 
border-left: 1px solid #0059ec;
 
position: absolute;
 
top: 0;
 
z-index : 1;
 
background: #34820d;
 
background: -moz-linear-gradient(top, #34820d, #4fc415);
 
background: -webkit-gradient(linear, left top, left bottom, from(#0b2b61), to(#1153c0));
 
-moz-border-radius: 4px;
 
-webkit-border-radius: 4px;
 
-moz-box-shadow: 2px 3px 10px #011331;
 
-webkit-box-shadow: 2px 3px 10px #011331; 
 
} 
 
#nav {
 
position: relative;
 
background: #292929;
 
float: left;
 
} 
 
#nav li {
 
float: left;
 
list-style: none;
 
border-right: 1px solid #4a4a4a;
 
border-left: 1px solid black;
 
} 
 
#nav li a {
 
color: #e3e3e3;
 
 position: relative;
 
z-index: 2;
 
float: left;
 
font-size: 30px;
 
font-family: helvetica, arial, sans-serif;
 
text-decoration: none;
 
padding: 30px 45px;
 
}

Descarga todos los archivos que usamos en Menu dinamico en jquery aqui


Tags:

Deja tu Comentario

Tutoriales en la web se reserva el derecho de moderación de los comentarios. Evita por favor utilizar palabras soeces, ataques directos e insultos, de lo contrario tu comentario será eliminado.

Hire PHP Developer India
Get Adobe Flash player