<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
Remove this if you use the .htaccess -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>index</title>
<meta name="description" content="" />
<meta name="author" content="HP" />
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link type="text/css" href="ui/css/interfaz-de-usuario-de-la-ligereza/jquery-ui-1.8.17.custom.css" />
<script type="text/javascript" src="ui/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="ui/js/jquery-ui-1.8.17.custom.min.js"></script>
<script>
$(document).ready(function() {
//OCULTAMOS LOS LI Y LUEGO LOS MOSTRAMOS CON UN EFECTO DE DESPLIEGUE TIPO SLIDE
$('#nav li').hide();
for(var i=0;i<4;i++){
$('#nav li').eq(i).show("slide", { direction: "down" }, 1200);
}
//AL PASAR EL MOUSE LE DAMOS UN PEQUEÑO BORDE PARA DESTACARLO
$('#nav li').mouseover(function() {
$(this).css('border-bottom','solid 2px #000000')
});
//AL SALIR LE DAMOS UN EFECTO PARA QUE SE DESTAQUE
$('#nav li').mouseout(function() {
$(this).css('border-bottom','none')
$(this).hide("slide", { direction: "down" }, 150).show("slide", { direction: "down" }, 200);
});
//AL CLICKEAR LO ACTIVAMOS
$('#nav li').click(function(){
$('#nav li').removeClass('active');
$(this).addClass('active');
})
});
</script>
<style>
li {
background: none repeat scroll 0 0 orange;
border-radius: 10px 10px 0 0;
float: left;
height: 30px;
line-height: 30px;
list-style: none outside none;
margin: 0 2px;
text-align: center;
width: 100px;
background: linear-gradient(top, #ff8e03, #b86a0e);
background:-moz-linear-gradient(top, #ff8e03, #b86a0e);
background:-webkit-linear-gradient(top, #ff8e03, #b86a0e);
}
.active{
background: linear-gradient(top, #b86a0e, #ff6c00);
background:-moz-linear-gradient(top, #b86a0e, #ff6c00);
background:-webkit-linear-gradient(top, #b86a0e, #ff6c00);
}
a{
text-decoration:none;
color:#fff;
display: block;
}
</style>
</head>
<body>
<div>
<header></header>
<nav></nav>
<section>
<ul id="nav">
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
<li><a href="#">menu4</a></li>
</ul>
</section>
<footer></footer>
</div>
</body>
</html>