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

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

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

Comentarios (9)

  • Stroud Responder

    Cho tôi h?i ? TPHCM ch? nào kh?c ph?c sùi mào gà th?p nh?t ?? cháu Ð?i v?i t?n Bình Thu?n c?n em k hi?u du?c ch? nào t?t d? di khám . AloBacsi có th? ch? giúp cho tôi du?c k ?? tôi xin c?m on AloBacsi da s?. (Thanh Nhan Nguyen) AloBacsi tr? l?i: Chào b?n, ngày tru?c, sùi mào gà du?c xem là 1 b?nh nam khoa lành tính. song hi?n nay , vài nhà h?p lý cho r?ng trong m?t s? tru?ng h?p, b?nh nguy nguy hi?m dòm th?y chi?u hu?ng tr? thành ác tính, gây ra ung thu c? t? cung ho?c c?a quý . l?a tu?i nhi?m b?nh r?t nhi?u d?c bi?t là 20-25. b?nh này thu?ng qua 2 lý do gây ra ra: + do "yêu" mang ngu?i dã và dang mang b?nh. + b?ng r?a không s?ch s?. + phê chu?n m?c chung d? d?n ngu?i dang mang b?nh + do c?i ngu?n nu?c b?n áp d?ng 0 ?n. c?p b?nh này b?n có kh? nang khám và ngan ng?a t?i BV Da Li?u ho?c BV T? Du. Tùy th?i kì n?ng nh? c?a b?nh s? hình thành phuong án tr? thích h?p nhu: d?t di?n, ch?m thu?c. ph?i kiên trì làm h?t b?nh t?t s? ng?a phòng kh?i, gi? d? d? lâu s? khó ch?a b?ng b?nh lý s? lan truy?n ti?t nhi?u vùng khác trên kia th? xác. B?n có kh? nang giao thông các b?nh xá sau d? du?c làm ki?m tra và ch?a k?p th?i nhé: BV Da Li?u TPHCM 2 Nguy?n Thông, Phu?ng 6, Qu?n 3, TPHCM ÐT: 08 3930 5995 hotline nóng: 0908 051 200 D?ch v? d?t l?ch h?n làm ki?m tra b?nh lý 0909 100 819 Ð? k lan nhi?m cò m?i d? d? quá trình d?n tham khám t?i BV Da Li?u b?n có l? s? Làm theo thêm bài vi?t sau d? ch? d?ng hon khi ho?t d?ng. >> li?u trình ki?m tra tham khám b?nh lý t?i BV Da Li?u TPHCM BV T? Du TPHCM 106 C?ng Qu?nh, Phu?ng Ph?m Ngu Lão, Qu?n m?t, TPHCM ÐT: 08 5404 2829 Mong r?ng m?t vài tin t?c ? trên s? giúp cho ích cho b?n. Thân ái,

    Monday, March 12, 2018 5:56 PM
  • Toombs Responder

    I like the helpful information you supply to your articles. I will bookmark your weblog and take a look at again right here frequently. I am fairly sure I'll be told many new stuff proper right here! Best of luck for the next!

    Wednesday, March 14, 2018 5:19 AM
  • Eastin Responder

    Quality content is the crucial to be a focus for the people to visit the website, that's what this web page is providing.

    Saturday, March 17, 2018 4:36 PM
  • Hutcherson Responder

    Thanks for sharing your thoughts on Diseño y Desarrollo Webseo. Regards

    Sunday, March 18, 2018 11:35 PM
  • Brogan Responder

    Vc é Bahia?

    Friday, March 30, 2018 10:24 AM
  • Aiston Responder

    Hello to all, how is everything, I think every one is getting more from this web page, and your views are fastidious designed for new visitors.

    Saturday, March 31, 2018 12:13 AM
  • Newcomb Responder

    It's fantastic that you are getting ideas from this paragraph as well as from our discussion made at this time.

    Wednesday, April 4, 2018 1:12 PM
  • Crouch Responder

    Hello, i read your blog occasionally and i own a similar one and i was just wondering if you get a lot of spam feedback? If so how do you protect against it, any plugin or anything you can advise? I get so much lately it's driving me insane so any help is very much appreciated.

    Wednesday, April 4, 2018 8:25 PM
  • Ricker Responder

    I visited various sites however the audio quality for audio songs present at this website is in fact marvelous.

    Wednesday, April 18, 2018 2:38 PM

Animate deja un comentario!!!

Eres un humano?

Últimos Tweets

Contáctanos

  • Dirección: Plutarco Elias Calles 243, Granjas México, Iztacalco, DF.

  • Teléfono:55-2712-3820 o 55-4164-9484

  • Email: info@developerji.com