Question

我希望菜单与此页面中的此菜单具有相同的效果http://store.anumberofnames.org/当有人点击商店链接时，子菜单下拉，当他们点击商店链接关闭的信息和信息子菜单时下拉菜单，当他们点击sebmenus上的某个类别时，我想要突出显示他们选择的链接，下面是我有的html和css代码

HTML

 <div id="menu">
<nav>
 <ul>

  <li>
    <a href="#">SHOP</a>
    <ul>
      <li><a href="#">T-SHIRT</a></li>
      <li><a href="#">KNIT</a></li>
      <li><a href="#">SHIRT</a></li>
      <li><a href="#">PANTS</a></li>
      <li><a href="#">ACCESSORY</a></li>
    </ul>
  <li><a href="#">INFORMATION</a>
   <ul>
       <li><a href="#">ABOUT</a></li>
      <li><a href="#">CONTACT</a></li>
      <li><a href="http://www.google.com">NEWSLETTER</a></li>
      <li><a href="#">LEGAL</a></li>
    </ul>
    </LI>
   </ul>
  </nav> 
 </div>    
</div>

CSS

#menu nav > ul > li > ul {
display: none;
text-align: right;
}

#menu nav a {
display: block;  
}

#menu nav > ul > li > a {
display: block;  
border-bottom: 3px solid transparent;  
}

#menu nav > ul > li:hover > a {
border-bottom: 3px solid white;  
}



#menu nav ul li  {
font-size: 11px;
top:106px;
list-style-type: none;
text-decoration: none;
color:#ffffff;
line-height: 19px;

}

nav a {
color:rgb(153, 153, 153);
text-decoration: none;
}
#mainSidebar {
display: block;
font-family:arial;
font-size: 11px;
font-stretch: normal;
font-style: normal;
font-variant: normal;
font-weight: normal;
height: 450px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
min-height: 750px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
position: fixed;
text-transform: uppercase;
vertical-align: baseline;   
}
#menu nav ul {
padding: 0px;
line-height: 11.5px;
margin-top: 0px;    
padding-bottom: 5px;
width: 143px;
padding-top: 5px;   
}
#menu nav ul li a:hover{
color: #000;
}

Answer 1

使用jQuery。您可以使用以下两个函数执行此操作：slideDown()和slideUp()，或使用单个函数：slideToggle()：

$(function() {
  $("#menu nav > ul > li > ul").hide();
  $("#menu nav > ul > li > a").click(function() {
    if (!$(this).next("ul").is(":visible")) {
      $("#menu nav > ul > li > ul").slideUp();
      $(this).next("ul").slideDown();
    }
    return false;
  });
});

#menu nav > ul > li > ul {
  margin: 0;
  margin-left: 25px;
}
#menu nav a {
  display: block;
}
#menu nav > ul > li > a {
  display: block;
  border-bottom: 3px solid transparent;
}
#menu nav > ul > li:hover > a {
  border-bottom: 3px solid white;
}
#menu nav ul li {
  font-size: 11px;
  list-style-type: none;
  text-decoration: none;
  color: #ffffff;
  line-height: 19px;
}
nav a {
  color: rgb(153, 153, 153);
  text-decoration: none;
}
#mainSidebar {
  display: block;
  font-family: arial;
  font-size: 11px;
  font-stretch: normal;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  height: 450px;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 0px;
  min-height: 750px;
  padding-bottom: 0px;
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 0px;
  position: fixed;
  text-transform: uppercase;
  vertical-align: baseline;
}
#menu nav ul {
  padding: 0px;
  line-height: 11.5px;
  margin-top: 0px;
  padding-bottom: 5px;
  width: 143px;
  padding-top: 5px;
}
#menu nav ul li a:hover {
  color: #000;
}

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<div id="menu">
  <nav>
    <ul>
      <li>
        <a href="#">SHOP</a>
        <ul>
          <li><a href="#">T-SHIRT</a></li>
          <li><a href="#">KNIT</a></li>
          <li><a href="#">SHIRT</a></li>
          <li><a href="#">PANTS</a></li>
          <li><a href="#">ACCESSORY</a></li>
        </ul>
      <li><a href="#">INFORMATION</a>
        <ul>
          <li><a href="#">ABOUT</a></li>
          <li><a href="#">CONTACT</a></li>
          <li><a href="http://www.google.com">NEWSLETTER</a></li>
          <li><a href="#">LEGAL</a></li>
        </ul>
      </LI>
    </ul>
  </nav> 
</div>

带子菜单的侧边菜单

1 个答案: