En este artículo voy a explicar cómo crear un menú desplegable como el de Facebook o Linkedin usando jQuery y CSS en asp.net.
Vamos a crear una aplicación para ver el menú funcionando. Primero crearemos una hoja de estilo CSS, para dar el estilo del menú desplegable. Para añadir una hoja de estilo en el sitio web, primero vaya al menú página web y haga clic en Agregar nuevo elemento, Seleccionar stylesheet.css y puedes cambiarle el nombre a menu.css
En el menu.css pega el siguiente:
body {
}
.dropdown
{
color: #555;
margin: 3px -22px 0 0;
width: 143px;
position: relative;
height: 17px;
text-align:left;
}
.submenu
{
background: #fff;
position: absolute;
top: -12px;
left: -20px;
z-index: 100;
width: 135px;
display: none;
margin-left: 10px;
padding: 40px 0 5px;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.dropdown li a
{
color: #555555;
display: block;
font-family: Georgia;
padding: 6px 15px;
cursor: pointer;
text-decoration:none;
}
.dropdown li a:hover
{
background:#3B5998;
color: #FFFFFF;
text-decoration: none;
}
a.mainmenu
{
font-size: 14px;
line-height: 16px;
color: #555;
position: absolute;
z-index: 110;
display: block;
padding: 11px 0 0 20px;
height: 28px;
width: 121px;
margin: -11px 0 0 -10px;
text-decoration: none;
background: url(icons/arrow.png) 116px 17px no-repeat;
cursor:pointer;
}
.menuitems
{
list-style:none;
margin:0px;
padding:0px;
font-size: 11px;
padding: 11px 0 0 0px;
border-top:1px solid #dedede;
}
.icon{
color: #0099FF;
}
.toggle-login
{
display: inline-block;
*display: inline;
*zoom: 1;
height: 25px;
line-height: 25px;
font-weight: bold;
padding: 0 8px;
text-decoration: none;
text-shadow: 0 1px 0 #fff;
}
Enseguida creamos la página que tendrá la funcionalidad, debe quedar como sigue:
%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="MenuDesplegable_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="menu.css" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<%--Toggles the icon ?--%>
<script type="text/javascript">
$(document).ready(function () {
$('.toggle-login').click(function () {
$(this).next('#login-content').slideToggle();
$(this).toggleClass('active');
if ($(this).hasClass('active')) $(this).find('span').html('▲')
else $(this).find('span').html('▼')
})
});
</script>
<%--Handling Menu and items--%>
<script type="text/javascript">
$(document).ready(function () {
$(".mainmenu").click(function () {
var X = $(this).attr('id');
if (X == 1) {
$(".submenu").hide();
$(this).attr('id', '0');
}
else {
$(".submenu").show();
$(this).attr('id', '1');
}
});
//Mouse click on sub menus
$(".submenu").mouseup(function () {
return false
});
//Mouse click on my account link
$(".mainmenu").mouseup(function () {
return false
});
//On Document Click
$(document).mouseup(function () {
$(".submenu").hide();
$(".mainmenu").attr('id', '');
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<fieldset style="width: 119px; height: 160px; padding: 30px;">
<legend>jQuery Dropdown</legend>
<div class="dropdown">
<a class="mainmenu toggle-login">Cuenta<span class="icon">?</span></a>
<div class="submenu">
<ul class="menuitems">
<li><a href="#">Configurar Cuenta</a></li>
<li><a href="#">Privacy setting</a></li>
<li><a href="#">Salir</a></li>
<li><a href="#">Ayuda</a></li>
</ul>
</div>
</div>
</fieldset>
</div>
</form>
</body>
</html>
Puedes descargar el ejemplo de esta liga: Descargar ejemplo
Espero que este ejemplo te sea de utilidad y si tienes comentarios escríbenos, estaremos felices de responderte.
Saludos y gracias por leernos.
