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

  • 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

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