Menu dinamico en Jquery
Posteado el 02. Jun, 2010 por Webi 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