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.

Artículos relacionados
16 Comentarios
  • Stroud Comentar
    Monday, March 12, 2018

    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,

  • Toombs Comentar
    Wednesday, March 14, 2018

    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!

  • Eastin Comentar
    Saturday, March 17, 2018

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

  • Hutcherson Comentar
    Sunday, March 18, 2018

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

  • Brogan Comentar
    Friday, March 30, 2018

    Vc é Bahia?

  • Aiston Comentar
    Saturday, March 31, 2018

    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.

  • Newcomb Comentar
    Wednesday, April 4, 2018

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

  • Crouch Comentar
    Wednesday, April 4, 2018

    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.

  • Ricker Comentar
    Wednesday, April 18, 2018

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

  • Titsworth Comentar
    Thursday, April 26, 2018

    docente e seus alunos escolhem algo amolação.

  • McAdams Comentar
    Friday, April 27, 2018

    Pretty portion of content. I simply stumbled upon your weblog and in accession capital to claim that I acquire in fact loved account your weblog posts. Anyway I'll be subscribing in your augment or even I fulfillment you access constantly fast.

  • Wales Comentar
    Saturday, April 28, 2018

    My spouse and I stumbled over here from a different page and thought I may as well check things out. I like what I see so now i am following you. Look forward to checking out your web page repeatedly.

  • Judge Comentar
    Friday, May 4, 2018

    constantemente lia menor artigos ?u clientes que também limpar seus motivos, e isso também está acontecendo ?om isso post que estou lendo aqu? .

  • Northern Comentar
    Saturday, May 5, 2018

    Post writing is also a excitement, if you be familiar with then you can write if not it is complex to write.

  • De Little Comentar
    Monday, May 7, 2018

    Attractive section of content. I just stumbled upon your blog and in accession capital to assert that I get in fact enjoyed account your blog posts. Anyway I will be subscribing to your augment and even I achievement you access consistently fast.

  • Eklund Comentar
    Tuesday, May 22, 2018

    I've been browsing online more than 3 hours as of late, yet I by no means discovered any interesting article like yours. It's pretty price enough for me. In my view, if all website owners and bloggers made excellent content as you did, the net will likely be much more helpful than ever before.

Enviame un comentario