Dropdown menu with jQuery and nth-child

2019-04-18 14:34发布

站内文章 / JavaScript
37 0 0

问题:

I just made a dropdown menu with jQuery and a little bit special html structure. This is how my structure looks like.
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?

回答1:

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>



回答2:

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>



回答3:

I think this is what you are asking for? Use CSS rather than jquery. This should get you started.

https://jsfiddle.net/cshanno/bgryLLwo/

HTML

<ul class="menu">
    <li>Link
        <ul class="submenu">
            <li>Example 1</li>
            <li>Example 2</li>
        </ul>
    </li>
    <li> Link 2</li>
</ul>

CSS

.menu {
    border:1px solid black;
}
.menu, .menu li {
    padding:0;
    margin:0 10px;
    display:inline-block;
    list-style:none;
}
.menu ul {
    display:none;
}
.menu li:hover ul  {
    display:block;
    position:absolute;
     padding:0;
}
.menu li:hover ul li {
    margin:0 0;
    display:block;
    border: 1px solid black;
}
.menu li ul li:hover {
    background-color:skyblue;

}


标签： javascript jquery html asp.net css-selectors
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~