Cómo crear un menú desplegable con jQuery como Facebook y Linkedin en asp.net

Estrada Web Group
Administrador
Cómo crear un menú desplegable con jQuery como Facebook y Linkedin en asp.net

asp.net, social media, developer web

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('&#x25B2;')
                else $(this).find('span').html('&#x25BC;')
            })
        });
    </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.

Compartir artículo:

Más artículos geniales

Manténgase actualizado

Obtenga excelente contenido en su bandeja de entrada todas las semanas.
Solo contenido excelente, no compartimos su correo electrónico con terceros.
Subir al inicio de la pantalla ;