Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Dropdown menu with jQuery and nth-child

Tags:

I just made a dropdown menu with jQuery and a little bit special html structure. This is how my structure looks like. enter image description here
And this is the jsFiddle, which was created: https://jsfiddle.net/rxLg0bo4/10/
But I want it to work like a proper dropdown menu. So that means it should show the submenu_link when you hover over the menu. f.e. if you hover over the menu_link q, the the submenu_link 1-5 should dropdown.
This is the jQuery:

$(document).ready(function () {
  $('.menu_link').ready(function () {
    $("[id$=pnlSubmenu]").hide();
  });
  $('.menu_link').hover(function () {
    $("[id$=pnlSubmenu]").slideDown(200);
  });
  $('[id$=pnlSubmenu]').mouseenter( function () {
    $(this).show();
  });
  $('[id$=pnlSubmenu]').mouseleave(function () {
    $(this).hide();
  });
  $('.menu_link').mouseleave(function () {
    $("[id$=pnlSubmenu]").hide();
  });
});

And this is my ASP.NET code:

<nav id="menu">

  <asp:Panel ID="pnlMenu" runat="server"></asp:Panel>
  <asp:Panel ID="pnlSubmenu" runat="server">
     
  <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                          
  </asp:ContentPlaceHolder>                  
          
  </asp:Panel>
</nav>

Can i do this with the nth-child anyhow? I would also like the have the links in a list style how can I do that?

like image 313
aha364636 Avatar asked Aug 18 '15 13:08

aha364636

2 Answers

Here is a solution i found with your markup.

Used CSS to beautify it.

Jquery:
What did you do?
when .menu_link is hovered i find what index it has.
The index finds if its the first child or second etc.
When we have this magic index number var nthNumber
we can use it to find its corresponding .submenu_panel (I'm guessing here since i cant see all your code) and hide or show this panel

Eg. when we hover the first .menu_link,
we will show the first .submenu_panel
And we do the same for the second and third etc.

$(".menu_link, .submenu_panel").hover(function() {
  //Hover inn function
  var nthNumber = $(this).index() + 1;

  $("[id$=Submenu]").show();
  $("[id$=Submenu] .submenu_panel:nth-of-type(" + nthNumber + ")").show();
}, function() {
  //Hover out function
  $("[id$=Submenu]").hide();
  var nthNumber = $(this).index() + 1;
  $("[id$=Submenu] .submenu_panel:nth-of-type(" + nthNumber + ")").hide();
});
#menu [id$=Menu] {
  border: 2px solid #2980b9;
  border-radius: 5px;
  background-color: #3498db;
}
#menu [id$=Menu] .menu_link {
  padding: 10px 10px;
  display: inline-block;
  font-size: 1.2em;
}
#menu [id$=Menu] .menu_link:hover {
  background-color: #45a9ec;
  //border: 2px solid #2980b9;
  border-radius: 2px;
  cursor: pointer; //Visual only (REMOVE)!
}
#menu [id$=Submenu] {
  display: none;
}
#menu [id$=Submenu] .submenu_panel {
  display: none;
  background-color: #45a9ec;
  border: 2px solid #2980b9;
  border-top: none;
  border-bottom-right-radius: 2px;
  border-bottom-left-radius: 2px;
}
#menu [id$=Submenu] .submenu_panel .submenu_link {
  position: relative;
  display: block;
  text-indent: 15px;
  font-size: 1.1em;
  padding: 4px 0px;
  border-bottom: 1px solid #2980b9;
}
#menu [id$=Submenu] .submenu_panel .submenu_link:hover {
  background-color: #56bafd;
  cursor: pointer; //ONLY FOR VISUAL(REMOVE)!
}
#menu [id$=Submenu] .submenu_panel .submenu_link:first-child {
  border-top: 1px solid #2980b9;
  margin-top: -5px;
  padding-top: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="menu">
  <div id="pn1Menu">
    <a class="menu_link">Lorem</a>
    <a class="menu_link">Ipsum</a>
    <a class="menu_link">Dollar</a>
    <a class="menu_link">Si</a>
    <a class="menu_link">Amet</a>
  </div>
  <div id="pn1Submenu">
    <div class="submenu_panel">
      <a class="submenu_link">100</a>
      <a class="submenu_link">200</a>
      <a class="submenu_link">300</a>
      <a class="submenu_link">400</a>
      <a class="submenu_link">500</a>
      <a class="submenu_link">600</a>
    </div>
    <div class="submenu_panel">
      <a class="submenu_link">010</a>
      <a class="submenu_link">020</a>
      <a class="submenu_link">030</a>
      <a class="submenu_link">040</a>
      <a class="submenu_link">050</a>
      <a class="submenu_link">060</a>
    </div>
    <div class="submenu_panel">
      <a class="submenu_link">1001</a>
      <a class="submenu_link">2002</a>
      <a class="submenu_link">3003</a>
      <a class="submenu_link">4004</a>
      <a class="submenu_link">5005</a>
      <a class="submenu_link">6006</a>
    </div>
  </div>
</nav>
like image 103
Persijn Avatar answered Sep 19 '22 16:09

Persijn

i tweaked quite a bit https://jsfiddle.net/rxLg0bo4/19/ You will have to try it out with a real page to know for sure. 

 $(document).ready(function () {
     $('.menu_link').ready(function () {
         $("[id$=pnlSubmenu]").hide();
     });
     $('.menu_link1').hover(function () {
         $("[id$=pnlSubmenu]").slideDown(200);
         $("[class$=submenu_panel]").css("left", "0px");
     });
     $('.menu_link2').hover(function () {
         $("[id$=pnlSubmenu]").slideDown(200);
         $("[class$=submenu_panel]").css("left", "12%");
         
     });
     $('.menu_link3').hover(function () {
         $("[id$=pnlSubmenu]").slideDown(200);
         $("[class$=submenu_panel]").css("left", "25%");
     });
     $('.menu_link4').hover(function () {
         $("[id$=pnlSubmenu]").slideDown(200);
        $("[class$=submenu_panel]").css("left", "37%");
     });
     $('.menu_link5').hover(function () {
         $("[id$=pnlSubmenu]").slideDown(200);
         $("[class$=submenu_panel]").css("left", "50%");
     });
     $('[id$=pnlSubmenu]').mouseenter(function () {
         $(this).show();
     });
     $('[id$=pnlSubmenu]').mouseleave(function () {
         $(this).hide();
     });
     $('.menu_link1').mouseleave(function () {
         $("[id$=pnlSubmenu]").hide();
     });
      $('.menu_link2').mouseleave(function () {
         $("[id$=pnlSubmenu]").hide();
     });
      $('.menu_link3').mouseleave(function () {
         $("[id$=pnlSubmenu]").hide();
     });
      $('.menu_link4').mouseleave(function () {
         $("[id$=pnlSubmenu]").hide();
     });
      $('.menu_link5').mouseleave(function () {
         $("[id$=pnlSubmenu]").hide();
     });
     });
#pnlMenu .menu_link:hover #pnlSubmenu .submenu_link {
    height:50px;
    display:block;
}
#wrapper_menu {
    margin-bottom: 50px;
    position: relative;
    z-index: 1;
}
#menuicon {
    margin: 0 auto;
    width: 27px;
    display: none;
}
.menubar {
    background: #001155;
    height: 4px;
    width: 27px;
    margin-bottom: 5px;
    border-radius: 2px;
    position: relative;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
#menuicon:hover #menubar-top {
    transform: translate(0px, 9px) rotate(45deg);
}
#menuicon:hover #menubar-mid {
    opacity: 0;
}
#menuicon:hover #menubar-bottom {
    transform: translate(0px, -9px) rotate(-45deg);
}
#menu {
    height: 44px;
    width: 980px;
    margin: 0 auto;
    border-radius: 5px;
    background: rgb(229, 229, 229);
    /* Old browsers */
    background: -moz-linear-gradient(top, rgba(229, 229, 229, 0.95) 0%, rgba(193, 192, 194, 0.95) 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(229, 229, 229, 0.95)), color-stop(100%, rgba(193, 192, 194, 0.95)));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(229, 229, 229, 0.95) 0%, rgba(193, 192, 194, 0.95) 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(229, 229, 229, 0.95) 0%, rgba(193, 192, 194, 0.95) 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(229, 229, 229, 0.95) 0%, rgba(193, 192, 194, 0.95) 100%);
    /* IE10+ */
    background: linear-gradient(to bottom, rgba(229, 229, 229, 0.95) 0%, rgba(193, 192, 194, 0.95) 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e5e5e5', endColorstr='#c1c0c2', GradientType=0);
    /* IE6-9 */
    -webkit-box-shadow: 0px 2px 2px 0px rgba(50, 50, 50, 0.5);
    -moz-box-shadow: 0px 2px 2px 0px rgba(50, 50, 50, 0.5);
    box-shadow: 0px 2px 2px 0px rgba(50, 50, 50, 0.5);
}
#pnlMenu {
    width: 100%;
    height: auto;
}
.menu_link1, .menu_link2, .menu_link3, .menu_link4, .menu_link5, .menu_link6 {
    position:relative;
    font-size: 15px;
    line-height: 44px;
    padding: 0 40px;
    text-align:left;
}
.menu_link1:active, .menu_link2:active, .menu_link3:active, .menu_link4:active, .menu_link5:active, .menu_link6:active, .menu_link1:focus, .menu_link2:focus, .menu_link3:focus, .menu_link4:focus, .menu_link5:focus, .menu_link6:focus, {
    color: #2d98e5;
    border-radius: 5px;
    background: rgb(229, 229, 229);
    /* Old browsers */
    background: -moz-linear-gradient(top, rgba(193, 192, 194, 0.95) 0%, rgba(229, 229, 229, 0.95) 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(193, 192, 194, 0.95)), color-stop(100%, rgba(229, 229, 229, 0.95)));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(193, 192, 194, 0.95) 0%, rgba(229, 229, 229, 0.95) 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(193, 192, 194, 0.95) 0%, rgba(229, 229, 229, 0.95) 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(193, 192, 194, 0.95)) 0%, rgba(229, 229, 229, 0.95) 100%);
    /* IE10+ */
    background: linear-gradient(to bottom, rgba(193, 192, 194, 0.95) 0%, rgba(229, 229, 229, 0.95) 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(endColorstr='#c1c0c2', startColorstr='#e5e5e5', GradientType=0);
    /* IE6-9 */
    -webkit-box-shadow: inset 0px 0px 7px 0px rgba(50, 50, 50, 0.3);
    -moz-box-shadow: inset 0px 0px 7px 0px rgba(50, 50, 50, 0.3);
    box-shadow: inset 0px 0px 7px 0px rgba(50, 50, 50, 0.3);
}
.last_menu_link {
    float: right;
}
.submenu_link {
}
.submenu_panel {
    width: 15%;
    height: auto;
    background: gray;
    position:relative;
    overflow: hidden;
    transition: all 0.2s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="wrapper_menu">
    <div id="menuicon">
        <div class="menubar" id="menubar-top"></div>
        <div class="menubar" id="menubar-mid"></div>
        <div class="menubar" id="menubar-bottom"></div>
    </div>
    <nav id="menu">
        <div id="pnlMenu">	<a class="menu_link1" href="Index.aspx?category=1">menu1</a><a class="menu_link2" href="Index.aspx?category=2">menu2</a><a class="menu_link3" href="Index.aspx?category=4">menu3</a><a class="menu_link4" href="Index.aspx?category=5">menu4</a><a class="menu_link5" href="Index.aspx?category=6">menu5</a><a class="menu_link6 last_menu_link" href="Index.aspx?category=8">menu6</a>

        </div>
        <div id="pnlSubmenu" style="display:none">
            <div class="submenu_panel" style="height:100px">	<a class="submenu_link" href="Pages/Chart.aspx?id=7">submenu1</a><a class="submenu_link" href="Pages/Chart.aspx?id=8">submenu2</a>

            </div>
            <div class="submenu_panel" style="height:100px"> <a class="submenu_link" href="Pages/Chart.aspx?id=4">Link1</a>
 <a class="submenu_link" href="Pages/Chart.aspx?id=11">Link2</a>

            </div>
        </div>
    </nav>
</div>
like image 32
Rachel Gallen Avatar answered Sep 20 '22 16:09

Rachel Gallen
Sign in to Comment

Related questions

Do subdomains protect a domain's reputation when sending emails?
Scala implicit object vs implicit val
Speed Up Website's Multiple Image Upload from Client Browser to Server
How browsers store data for autocomplete and where?
Should there be one bias per layer or one bias for each node?
Efficiently computing (a - K) / (a + K) with improved accuracy
How to configure logging for Kafka producers?
React-Native ios App crashes without report
There is not enough memory to perform requested operation-Android studio
Why this code compiles with jdk8u45 and above but not with jdk8u25?
Why is docker build taking so long to run?
Do we need to wrap ES6 code in an IIFE?

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!