Como mi amigo Marco dice: Wikipedia define mejor...
CSS: http://en.wikipedia.org/wiki/Cascading_Style_Sheets
Jquery: http://es.wikipedia.org/wiki/JQuery
Con el afan de mejorar el diseño de tus sitios web y la poca flexibilidad a la hora de manejar algunos controles de navegacion. Los desarrolladores, se ven obligados a buscar otras opciones. Esta opcion utiliza html, css y jquery. Con este Menu el desarrollador podra manejar la salida desde el servidor, con tan solo asignar el contenedor (el cual podria ser un Div) como runat=server. Con esto podra politizar quien tiene acceso a tal opcion desde el menu y quien no, ya que el menu puede crearse al vuelo desde codigo. Igualmente se puede poner estatico.
Aqui pondre los pasos para usarlo, de tal manera que te sea facil ponerlo a funcionar.
Los archivos utilizados los adjuntare abajo.
1. Declarar el uso de Jquery en el Header
<script src="js/jquery-1.2.6.min.js" type="text/javascript"></script>
2. Crear el codigo de estilo en el Header
<style type="text/css">
#header {
BACKGROUND: url(Images/body_bg.gif); PADDING-TOP: 120px
}
.hjk
{
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: url(/Images/body_bg.gif) =
#ddd repeat-x; PADDING-BOTTOM: 0px; MARGIN: 0px;
}
.menunav
{
FONT: 10px normal = Arial, Helvetica, sans-serif; PADDING-TOP: 0px;
}
ul.topnav {
list-style: none;
padding: 0 15px;
margin: 0;
float: left;
width: 100%;
background: #222;
font-size: 1.2em;
background: url(/Images/topnav_bg.gif) repeat-x;
}
ul.topnav li {
float: left;
margin: 0;
padding: 0 15px 0 0;
position: relative; /*--Declare X and Y axis base for sub navigation--*/
}
ul.topnav li a{
padding: 10px 5px;
color: #fff;
display: block;
text-decoration: none;
float: left;
}
ul.topnav li a:hover{
background: url(/Images/topnav_hover.gif) no-repeat center top;
}
ul.topnav li span { /*--Drop down trigger styles--*/
width: 17px;
height: 30px;
float: left;
background: url(/Images/subnav_btn.gif) no-repeat center top;
}
ul.topnav li span.subhover {background-position: center bottombottom; cursor: pointer;} /*--Hover effect for trigger--*/
ul.topnav li ul.subnav {
list-style: none;
position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
left: 0; top: 35px;
background: #333;
margin: 0; padding: 0;
display: none;
float: left;
width: 190px;
border: 1px solid #111;
}
ul.topnav li ul.subnav li{
margin: 0; padding: 0;
border-top: 1px solid #252525; /*--Create bevel effect--*/
border-bottom: 1px solid #444; /*--Create bevel effect--*/
clear: both;
width: 190px;
}
html ul.topnav li ul.subnav li a {
float: left;
width: 165px;
background: #333 url(/Images/dropdown_linkbg.gif) no-repeat 10px center;
background-image: url(/Images/dropdown_linkbg.gif) no-repeat 10px center;
padding-left: 20px;
}
html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
background: #222 url(/Images/dropdown_linkbg.gif) no-repeat 10px center;
}
.style2
{
color: #FFFFFF;
}
</style>
3. Crear un Contenedor Div y agregar el codigo adentro:
<div id="MenuDiv" runat="server" class="menunav">
<ul class="topnav">
<li><a href="#">Parametricas</a>
<ul class="subnav">
<li><a href="/Parametricas/ParAirlines.aspx">Airlines</a></li>
<li><a href="/Parametricas/ParAudiTypes.aspx">Audit Types</a></li>
<li><a href="/Parametricas/ParBadPractice.aspx">Bad Practices</a></li>
<li><a href="/Parametricas/ParCambioMoneda.aspx">Cambio Moneda</a></li>
<li><a href="/Parametricas/ParCheckNames.aspx">Check Names</a></li>
<li><a href="/Parametricas/ParContactos.aspx">Contactos</a></li>
<li><a href="/Parametricas/ParIataAgencies2.aspx">Iata Agency</a></li>
<li><a href="/Parametricas/ParPseudoAgencies.aspx">No Iata Agency</a></li>
</ul>
</li>
</ul>
</div>
4. Coloca este codigo Javascript abajo, antes de cerrar el Body.
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.subnav*)
$("ul.topnav li span").click(function() { //When trigger is clicked...
//Following events are applied to the subnav itself (moving subnav up and down)
$(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click
$(this).parent().hover(function() { }, function(){
$(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
});
//Following events are applied to the trigger (Hover events for the trigger)
}).hover(function() {
$(this).addClass("subhover"); //On hover over, add class "subhover"
}, function(){ //On Hover Out
$(this).removeClass("subhover"); //On hover out, remove class "subhover"
});
});
</script>
4. Verifica que las ruta de las imagenes en el stilo sean correctas a las tuyas.
Ok eso es todo, solo necesitas el jquery file js, y las imagenes, te las dejo abajo.
Si tienes preguntas o problemas al usar este codigo no dudes en dejarnos tus comentarios.
dropdown_linkbg.gif (277.00 bytes)
header_bg.gif (74.70 kb)
subnav_btn.gif (433.00 bytes)
topnav_bg.gif (155.00 bytes)
topnav_hover.gif (874.00 bytes)
jquery-1.2.6.min.js (54.47 kb)
Lo Prometido es deuda, para que entiendas mejor y veas un ejemplo del uso y apariencia del Menu aqui te dejo un zip. Que dejaron los creadores de este vistoso Menu
MenuJquery.zip (152.10 kb)
Tags: