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 (15)

  • Quick Responder

    Hello there, I think your blog might be having internet browser compatibility issues. Whenever I look at your website in Safari, it looks fine however, when opening in I.E., it's got some overlapping issues. I just wanted to give you a quick heads up! Aside from that, fantastic site!

    Monday, July 10, 2017 6:49 AM
  • Oglesby Responder

    When some one searches for his essential thing, therefore he/she needs to be available that in detail, thus that thing is maintained over here.

    Monday, July 17, 2017 10:00 PM
  • Lambrick Responder

    With havin so much written content do you ever run into any problems of plagorism or copyright violation? My site has a lot of completely unique content I've either created myself or outsourced but it appears a lot of it is popping it up all over the internet without my agreement. Do you know any techniques to help reduce content from being ripped off? I'd really appreciate it.

    Monday, September 11, 2017 12:30 PM
  • Rasmussen Responder

    Wow, this paragraph is good, my sister is analyzing these kinds of things, thus I am going to let know her.

    Thursday, September 21, 2017 6:17 PM
  • Spencer Responder

    Thanks for revealing yo?r ideas. I mi?ht also li?e to mention th?t video games have been aat ?ny time evolving. Modern tools and revolutions have helped create authentic and interactive games. ?hese kinds of entertainment video ames were nott as sensible when the actual concept was being tr?ed. Juust l?ke oth?r kinds of know-h??, video games ?s w?ll h??e had to grow ?y way of many generations. ?his is testimony to the fast growth ?f video games. ? have observed in the w?rld nowadays, vidreo games incl?de the latest phrnomenon w?th kids ?f a?l ages. Occasionally ?t may bee not ?ossible to drag ?oung kids ?way f?om tthe vudeo games. ?f you want the ?ery best ?f both worlds, there ?re plenty of educational activities ffor kids. ?reat post. ?ne other issue issue is video games c?n b? serious as th? name indic?ted with the primary focus ?n learning ather th?n fun. Although, there's an entertainment facet to kee? children engaged, ?ach and every game is often designed to wor? to?ards ? specific skill set oor area, ?uch ?s mathmatical or technology. ?hanks for your post. ? hav? figured out som? im?ortant matters through you? website post. One othewr thing ? w?uld like to talk ?bout i? that there are lots of games ava?lable on the market designed ?n partic?lar for toddler age ?mall children. ?hey consist ?f pattern acknowledgement, colors, animals, ?nd patterns. ?hese ?enerally focus on familiarization ?ather thhan memorization. ?hi? makes ? child engaged without sensing like they ?re learning. Thanks A f?rther issue is re?lly th?t video gaming ?ecame ?ne of the all-time biggest forms ?f fun for people of ?arious age g?oups. Kids play video games, ?nd also adults do, too. The XBox 360 is am?ng the favorite video games systems f?r many who love to hav? hundreds of activities ava?lable to them, in addition t? ?ho l?ke to learn livee wuth people ?ll ov?r the ?orld. Many thanks f?r sharing ?o?r thinking.

    Friday, October 20, 2017 6:50 AM
  • Rushing Responder

    I intended t? send yo? one l?ttle ?it of note just to thank yo? the moment ag?in for the amazing guidelines ?ou've documented ?n this website. This has been extremely ggenerous ?ith people ?ike ?ou to make unreservedly precisely whawt numerous people ?ould havve solld f?r an electroic book t? earn some profit on the?r ?wn, most importantly cpnsidering that ?ou might ?ell h?ve trie? ?t ?f you decided. These inspiring ideas al?? ?orked to ?e ? easy ?ay to fu?ly grasp that m?st people have the identical zeal ?ust as mine to understtand vrry m?ch more when it ?omes to this issue. I ?m ?ure the?e are thousands of m?re plasant situations ?n the fuiture for m?ny who take a look ?t yo?r site. I ?ould like to ?how my thanks to this writer j??t for bailing me out off this particupar situation. ?s a result ?f browsing throughout the w?rld wide wweb ?nd getting techniques which are not pleasant, ? was tyinking my entire life waas ?one. Exising devoid of the strategies t? the difficulties you have fixed all thro?gh ?our entire wr?te-up ?? a crfucial ca?e, as ell ?s the ones whihh m?ght h?ve negatively damaged my entire career ?f I hadn't come a?ross your site. Yo?r actuial talents and kindness ?n touching a?l areas was valuable. I don't know what I would'v? ?one ?f ? haad nott discovereed such ? subject li?e this. Iam able to ?t this plint relish myy future. ?hanks ver? much f?r y?ur eexpert ?nd effective help. I ill not hesitate t? propose you? web blog to anyb?dy ?h? nee?? care abbout this matter. ? simply anted t? type a briedf message t? appreciate you for a?l the wonderful recommendations ?ou are show?ng aat th?s website. My prolonged internet ?esearch has no? ?e?n rewarded with awesome suggestions t? go oer with my partners. I w?uld suppose th?t most ?f uus readers are vewry endowed t? live in a remarkable place with very manyy billiant individuals ?ith good things. I feel very much grateful to hav? s??n yo?r entire web p?ge and look forward to t?ns of more amazing times reading h?re. Thank you aagain f?r a lot off th?ngs. Thank you sso much for providing individuals with an extremely mrvellous opportunity t?o ?ead articles and blog posts froom this web site. It is oftesn so brilliant ?nd ass wel? , stuffed with fun for me personally ?nd my ffice friends t? searhh the blog ?t the least 3 tim?s in 7 dayys to learn the newest stuff yo? w?ll have. And of course, we are ?ctually fulfilled ?onsidering the superb po?nts you serve. Selected two ideas in this article ??e particukarly th? most effective ?e havve had. I have too point out m? admiration f?r your generosity supporting th?se individuaps th?t m?st hav? guidance on th?s particular question. Your ver? own dedication to pasing the solution ac?oss hhad b?en astonishingly effective ?nd have a?ways allowed workers luke me to realize their targets. ?our amazing insightful ?seful info?mation indi?ates soo much to m? annd stil? m?re to my fellow workers. Thanks a ton; from each one ?f us. I as well aas my friends ?nded upp analyzing the good secrets and techniques fr?m ??ur web site and unexpectedly developed ? terrible suspicion I never expressed respect t? the web site owner fo? those strategies. Those womn are already ?? a consequence excited t? study a?l of themm and ?lready have extremely b?en uing them. ?? ap?reciate you re?lly being ?ndeed kind and then for going for such extraordinay things millions of individuals ?re reaoly needing to understand about. M? personal sinc?re apologies fo? nott expressing gratitude t? ?ou sooner. I am glad for wrikting t? ?et you kno? what a outstanding discovery myy girl undergone checking ?our wweb site. Sh? c?me tto understand lots of pieces, not t? mention how it is like to hhave ? marvelous helping spirfit t? l?t the othe?s just tho?oughly grasp vario?s multifaceted matters. Y?u und?ubtedly surpassed her expected results. ?hank you for delivering the essential, trusted, edifying ?s welkl ?s unique guidance on your topic to Mary. I simply h?d to sa? thanks al? o??r again. I do not kno? th? things that ? ?ould have followed in the absence of th? tips and hits disc?ssed b? yo? regarding my situation. It had become ? very depressing difficulty ?n my opinion, b?t looking aat thi? specialized style yyou handled tthe issue t?ok me to leap f?r joy. I'mjust happier for the ?ork ?nd thus hope youu f?nd out ?hat a powerful job ??u happen to be accomplishing educating manby ?thers ?ith th? aid of ?our site. ?ost pr?bably y?u'v? never met all of us. ?? husband ?nd i got now delighted when Peer managed t? round up his r?

    Sunday, October 29, 2017 5:30 AM
  • Dibble Responder

    Speak to a few previous customers and then base your decision on their experiences with the moving company.

    Sunday, October 29, 2017 7:51 AM
  • Mortimer Responder

    Undeniably imagine that which you stated. Your favorite reason seemed to be on the web the easiest factor to keep in mind of. I say to you, I certainly get irked while other folks think about worries that they just do not recognize about. You controlled to hit the nail upon the highest and defined out the whole thing without having side-effects , folks can take a signal. Will likely be again to get more. Thanks

    Tuesday, October 31, 2017 4:16 AM
  • Astley Responder

    The only question is what'll come out on top in 2013, so get commenting, friends.

    Saturday, November 4, 2017 3:18 AM
  • Michaud Responder

    Hello, I enjoy reading all of your article. I wanted to write a little comment to support you.

    Tuesday, November 14, 2017 3:45 PM
  • vans cleef & arpels faux Responder

    Heather, I have the same concerned. Getting my children as a y from areas where there are issues. I was afraid to post this in fear that I wd be saying something wrong. I am attempting to steer my kids to safety. Do far only one ok f three. I never thot I wd HV to worry about my babies. Be strong Lovers of Jesus Christ.

    Wednesday, November 15, 2017 8:18 PM
  • Huish Responder

    I enjoy what you guys tend to be up too. This kind of clever work and reporting! Keep up the terrific works guys I've incorporated you guys to my own blogroll.

    Friday, November 17, 2017 9:10 AM
  • Buffington Responder

    Celebrating creates an atmosphere of recognition and positive energy.

    Monday, November 20, 2017 8:27 PM
  • Hauck Responder

    That is a very good tip especially to those new to the blogosphere. Simple but very accurate info… Thank you for sharing this one. A must read article!

    Sunday, December 3, 2017 6:38 PM
  • FY Responder

    WB

    Sunday, December 10, 2017 2:19 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