如何将子菜单添加到slidedown菜单中

时间：2015-12-11 15:22:39

标签： jquery html css

小提琴：http://jsfiddle.net/yjp2sner/

HTML：

<div class="dropdown">
  <a href="javascript:void(0);" class="userLink"><span id="CPHB_lblUser">ADMIN</span></a>
  <div class="dvHolder">
    <ul id="ulDrop">
      <li><a class="ondrop reloadLink" href="Default.aspx" target="_self" title="Reload Page">Reload Page</a></li>
      <li id="liLogout" onclick="logout();">
        <span class="ondrop logoutLink">Logout</span>
      </li>
      <li><a class="ondrop viewfolderLink" href="javascript:void(0);" title="Reports">Reports</a>
      </li>
    </ul>
  </div>
</div>

我要做的是为li添加一个具有相同样式的子菜单。因此，例如对于Report列表项，我想要一个向左滑动的子菜单，如下所示：

enter image description here

如何修改我的HTML / CSS以允许这种情况发生。

2 个答案:

答案 0 :(得分：1)

$(document).ready(function(){
$(".top-level-menu li,.second-level-menu li").hover(
	function(){
		$(this).children('ul').hide();
		$(this).children('ul').slideDown('fast');
	},
	function () {
		$('ul', this).slideUp('fast');            
	});
});
.third-level-menu
    {
        position: absolute;
        top: 0;
        right: -150px;
        width: 150px;
        list-style: none;
        padding: 0;
        margin: 0;
        display: none;
    }

    .third-level-menu > li
    {
        height: 30px;
        background: #999999;
    }
    .third-level-menu > li:hover { background: #CCCCCC; }

    .second-level-menu
    {
        position: absolute;
        top: 30px;
        left: 0;
        width: 150px;
        list-style: none;
        padding: 0;
        margin: 0;
        display: none;
    }

    .second-level-menu > li
    {
        position: relative;
        height: 30px;
        background: #999999;
    }
    .second-level-menu > li:hover { background: #CCCCCC; }

    .top-level-menu
    {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .top-level-menu > li
    {
        position: relative;
        float: left;
        height: 30px;
        width: 150px;
        background: #999999;
    }
    .top-level-menu > li:hover { background: #CCCCCC; }

    .top-level-menu li:hover > ul
    {
        /* On hover, display the next level's menu */
        display: inline;
    }


    /* Menu Link Styles */

    .top-level-menu a /* Apply to all links inside the multi-level menu */
    {
        font: bold 14px Arial, Helvetica, sans-serif;
        color: #FFFFFF;
        text-decoration: none;
        padding: 0 0 0 10px;

        /* Make the link cover the entire list item-container */
        display: block;
        line-height: 30px;
    }
    .top-level-menu a:hover { color: #000000; }
<ul class="top-level-menu">
    <li><a href="#">Home</a></li>
    <li>
        <a href="#">Offices</a>
        <ul class="second-level-menu">
            <li><a href="#">Chicago</a></li>
            <li><a href="#">Los Angeles</a></li>
            <li>
                <a href="#">New York</a>
                <ul class="third-level-menu">
                    <li><a href="#">Information</a></li>
                    <li><a href="#">Book a Meeting</a></li>
                    <li><a href="#">Testimonials</a></li>
                    <li><a href="#">Jobs</a></li>
                </ul>
            </li>
            <li><a href="#">Seattle</a></li>
        </ul>
    </li>
    <li><a href="#">Contact</a></li>
</ul>

答案 1 :(得分：1)

试试这段代码jsfiddle

＆＃13;
＆＃13; 
$('.sub-list').parent().click(function(){
  
  	$('.sub-list').css("display", "block");
  });
$(".dropdown").hover(function() {
  $(".dvHolder ul").slideToggle();
  
});
＆＃13; 
* {
  padding: 0;
  margin: 0;
}

.dropdown {
  position: relative;
  height: 27px;
  width: 230px;
  background: #363d47;
  border: 1px solid;
  border-color: #272c33 #242930 #22272d;
  border-radius: 3px;
  display: inline-block;
  vertical-align: baseline;
  zoom: 1;
  *display: inline;
  *vertical-align: auto;
  background-image: -webkit-linear-gradient(top, #4a5361, #363d47);
  background-image: -moz-linear-gradient(top, #4a5361, #363d47);
  background-image: -o-linear-gradient(top, #4a5361, #363d47);
  background-image: linear-gradient(to bottom, #4a5361, #363d47);
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);
}

.dropdown a,
.dropdown span {
  font-size: 12px;
  text-decoration: none;
  text-shadow: 0 1px black;
}

.dropdown > a,
.dropdown > span {
  float: left;
  position: relative;
  height: 27px;
  line-height: 26px;
  padding: 0 25px;
  color: #ecf0f1;
  border-radius: 2px 0 0 2px;
}

.dropdown div.dvHolder {
  float: right;
  height: 27px;
  width: 26px;
  background: url("../theImages/icSettings.png") 9px 9px no-repeat;
  border-left: 1px solid #292e36;
  border-color: rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: inset 1px 0 rgba(255, 255, 255, 0.08);
  box-shadow: inset 1px 0 rgba(255, 255, 255, 0.08);
  cursor: pointer;
}

.dropdown div:hover {
  -webkit-box-shadow: inset 1px 0 rgba(255, 255, 255, 0.04), inset 26px 26px rgba(0, 0, 0, 0.1);
  box-shadow: inset 1px 0 rgba(255, 255, 255, 0.04), inset 26px 26px rgba(0, 0, 0, 0.1);
}


/*.dropdown div:hover ul
		{
			display: block;
		}*/

.dropdown ul {
  display: none;
  position: absolute;
  top: 27px;
  left: -1px;
  right: -1px;
  background: #272c33;
  border: 1px solid #20242a;
  border-radius: 0 0 3px 3px;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.dropdown ul li {
  display: block;
}

.dropdown ul li:first-child {
  height: 27px;
  line-height: 26px;
  color: #b2b8c4;
}

.dropdown ul li:nth-child(2) {
  height: 27px;
  line-height: 26px;
}

.dropdown ul li:last-child span {
  border-radius: 0 0 3px 3px;
}

.dropdown ul .ondrop {
  display: block;
  line-height: 28px;
  padding: 0 10px 1px;
  color: #b2b8c4;
  border-top: 1px solid transparent;
}

.dropdown ul .ondrop:hover {
  color: white;
  text-shadow: 0 1px rgba(0, 0, 0, 0.7);
  border-color: #78aad5;
  background: #426ebf;
  background-image: -webkit-linear-gradient(top, #5e9ace, #416cb8);
  background-image: -moz-linear-gradient(top, #5e9ace, #416cb8);
  background-image: -o-linear-gradient(top, #5e9ace, #416cb8);
  background-image: linear-gradient(to bottom, #5e9ace, #416cb8);
}

.dropdown ul li:nth-child(2):hover {
  border-color: #78aad5;
}

.dropdown ul li:nth-child(3) {
  
  position: relative;
}


/*.dvHolder ul li:nth-child(2) div:last-child
		{
			display: none;
		}*/

#ulDrop li:last-child,
#ulDrop li:nth-child(3),
#ulDrop li:nth-child(4),
#ulDrop li:nth-child(5),
#ulDrop li:nth-child(6),
#ulDrop li:nth-child(7) {
  background: url(../theImages/bordertop.png) repeat-x;
  padding-top: 2px;
}

.sub-list{
  
  position: absolute;
  right:-46px;
  top:0px;
  display: none;
  background: #272C33 none repeat scroll 0% 0%;
}

.sub-list li{
  
  padding: 5px 10px;
  color:#fff;
}
＆＃13; 
<div class="dropdown">
  <a href="javascript:void(0);" class="userLink"><span id="CPHB_lblUser">ADMIN</span></a>
  <div class="dvHolder">
    <ul id="ulDrop">
      <li><a class="ondrop reloadLink" href="Default.aspx" target="_self" title="Reload Page">Reload Page</a></li>
      <li id="liLogout" onclick="logout();">
        <span class="ondrop logoutLink">Logout</span>
      </li>
      <li>
        <a class="ondrop viewfolderLink" href="javascript:void(0);" title="Reports">Reports</a>
        <ol class="sub-list">
          <li>text</li>
          <li>text</li>
          <li>text</li>
        </ol>
      </li>
    </ul>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

注意：我使用<ol>代替<ul>，因为您要为div dropdown中的每个ul设置一些样式。

相关问题
最新问题