如何将sidebars子菜单扩展到正确的大小？

时间：2015-11-19 13:49:15

标签： html css css3

我找到了一个示例侧边栏并将其实现为适合我的网站，但我遇到了CSS问题。它希望以一定的高度进行扩展，使动画变得平滑（如果我将高度设置为自动动画已经消失）但是如果我将高度设置为实际值（124像素），它将打开过多较小的菜单项。请查看下面的图片以获得澄清。

Picture to clarify above text

所以澄清问题 - 如何保持动画，同时只打开子菜单，以便显示所有项目（不多或少 - 如右图所示）图片）？

CSS 

.sidebar {
    position: fixed;
    float:left;
    width: 200px;
    padding-left: 20px;
    background-color: #A5B839;
    border-radius:10px 0px 0px 10px;
    text-align: left;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    height: auto;
    margin: -15px auto;
    margin-left: -256px;
    margin-top: -58px;
}

.menu-item {
  margin: 0px;
  padding: 0px;
  background: #A5B839;
  width: 200px; 
  height: 100%;
}
/*Menu Header Styles*/
.menu-item h4 {
  width: 97.8%;
  border-bottom: 1px solid rgba(0,0,0,0.3);
  border-top: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  padding:12px;
   background: #A5B839;

  /*Gradient*/
  background: #A5B839; /* Old browsers */
  background: -moz-linear-gradient(top, #A5B839 0%, #8f0222 44%, #6d0019 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#A5B839), color-stop(44%,#8f0222), color-stop(100%,#A5B839)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #A5B839 0%,#A5B839 44%,#A5B839 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #A5B839 0%,#8f0222 44%,#A5B839 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #A5B839 0%,#A5B839 44%,#A5B839 100%); /* IE10+ */
  background: linear-gradient(top, #A5B839 0%,#8f0222 44%,#6d0019 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#A5B839', endColorstr='#A5B839',GradientType=0 ); /* IE6-9 */
}
.menu-item h4:hover {  
  background-color: #fff; 

}
/*ul Styles*/
.menu-item ul{
  background: #fff;
  font-size: 13px;
  line-height: 30px;
  height: 0px;
  list-style-type: none;
  overflow: hidden;
  padding: 0px;
  margin-right: -21px;
  margin-left: -20px;

  /*Animation*/
  -webkit-transition: height 1s ease;
     -moz-transition: height 1s ease;
       -o-transition: height 1s ease;
      -ms-transition: height 1s ease;
          transition: height 1s ease;
}

.menu-item ul a {
  margin-left: 20px;
  text-decoration: none;
  color: #A5B839;
  display: block;
  width: 200px;
}

/*li Styles*/
.menu-item li {
  background-color:#FFFFFF;
  border-bottom: 1px solid #eee;
}
.menu-item:hover ul{
    height: 124px;
}

HTML 

<div id="docSidebar" class="sidebar">                     
    <div class="menu-item alpha">
        <h4><a class="jumper" href="#Userguide">User guide</a></h4>                            
    </div>
    <div class="menu-item">
        <h4><a class="jumper" href="#Overview">Overview</a></h4>
        <ul>
            <li><a class="jumper" href="#SOAP">SOAP</a></li>
            <li><a class="jumper" href="#REST">REST</a></li>
        </ul>
    </div>
    <div class="menu-item">
        <h4><a class="jumper" href="#CustomerOrder">Customer Order</a></h4>
        <ul>
            <li><a class="jumper" href="#OrderHeader">OrderHeader</a></li>
            <li><a class="jumper" href="#PartnerCustomer">Partner(Customer)</a></li>
            <li><a class="jumper" href="#HaulierInfo">HaulierInfo</a></li>
            <li><a class="jumper" href="#OrderLine">OrderLine</a></li>
        </ul>
    </div>
    <div class="menu-item">
        <h4><a class="jumper" href="#ItemsProducts">Items (Products)</a></h4>
        <ul>
            <li><a class="jumper" href="#Item">Item</a></li>
            <li><a class="jumper" href="#ItemAlias">ItemAlias</a></li>
            <li><a class="jumper" href="#Dimension">Dimension</a></li>
        </ul>
    </div>
    <div class="menu-item">
        <h4><a class="jumper" href="#CustomerB2B">Customer (B2B)</a></h4>
        <ul>
            <li><a class="jumper" href="#Customer">Customer</a></li>
        </ul>
    </div>
    <div class="menu-item">
        <h4><a class="jumper" href="#Suppliers">Suppliers</a></h4>
        <ul>
            <li><a class="jumper" href="#Supplier">Supplier</a></li>
        </ul>
    </div>
    <div class="menu-item">
        <h4><a class="jumper" href="#PurchaseOrder">Purchase Order</a></h4>
        <ul>
            <li><a class="jumper" href="#PurchaseOrderHeader">Purchase Order Header</a></li>
            <li><a class="jumper" href="#PurchaseOrderLine">Purchase Order Line</a></li>
        </ul>
    </div>
    <div class="menu-item">
        <h4><a class="jumper" href="#ShipmentOrder">Shipment Order</a></h4>
        <ul>
            <li><a class="jumper" href="#Order">Order</a></li>
            <li><a class="jumper" href="#ShippedPackages">ShippedPackages</a></li>
            <li><a class="jumper" href="#ShippedItems">ShippedItems</a></li>
        </ul>
    </div>
    <div class="menu-item">
        <h4><a class="jumper" href="#Appendix">Appendix</a></h4>
        <ul>
            <li><a class="jumper" href="#Appendix1">Sample order creation in JQuery over REST-API</a></li>
            <li><a class="jumper" href="#Appendix2">Sample item creation C#</a></li>
            <li><a class="jumper" href="#Appendix3">Sample Shipment Transaction</a></li>
        </ul>
    </div>
    <div class="menu-item">
        <h4><a class="jumper" href="#top"><br />Back To Top</a></h4>
    </div>                            
</div>

1 个答案:

答案 0 :(得分：1)

试试这个：

.sidebar {
    position: fixed;
    float:left;
    width: 200px;
    padding-left: 20px;
    background-color: #A5B839;
    border-radius:10px 0px 0px 10px;
    text-align: left;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    height: auto;
    margin: -15px auto;
    margin-left: -256px;
    margin-top: -58px;
}

.menu-item {
  margin: 0px;
  padding: 0px;
  background: #A5B839;
  width: 200px; 
  height: 100%;
}
/*Menu Header Styles*/
.menu-item h4 {
  width: 97.8%;
  border-bottom: 1px solid rgba(0,0,0,0.3);
  border-top: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  padding:12px;
   background: #A5B839;

  /*Gradient*/
  background: #A5B839; /* Old browsers */
  background: -moz-linear-gradient(top, #A5B839 0%, #8f0222 44%, #6d0019 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#A5B839), color-stop(44%,#8f0222), color-stop(100%,#A5B839)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #A5B839 0%,#A5B839 44%,#A5B839 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #A5B839 0%,#8f0222 44%,#A5B839 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #A5B839 0%,#A5B839 44%,#A5B839 100%); /* IE10+ */
  background: linear-gradient(top, #A5B839 0%,#8f0222 44%,#6d0019 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#A5B839', endColorstr='#A5B839',GradientType=0 ); /* IE6-9 */
}
.menu-item h4:hover {  
  background-color: #fff; 

}
/*ul Styles*/
.menu-item ul{
  background: #fff;
  font-size: 13px;
  line-height: 30px;
  max-height: 0px;
  list-style-type: none;
  overflow: hidden;
  padding: 0px;
  margin-right: -21px;
  margin-left: -20px;

  /*Animation*/
  -webkit-transition: max-height 1s ease;
     -moz-transition: max-height 1s ease;
       -o-transition: max-height 1s ease;
      -ms-transition: max-height 1s ease;
          transition: max-height 1s ease;
}

.menu-item ul a {
  margin-left: 20px;
  text-decoration: none;
  color: #A5B839;
  display: block;
  width: 200px;
}

/*li Styles*/
.menu-item li {
  background-color:#FFFFFF;
  border-bottom: 1px solid #eee;
}
.menu-item:hover ul{
    max-height: 124px;
}

我们动画height而不是动画max-height，只使用相同的值。现在，高度应该从0px动画到内容所需的任何高度。

相关问题
最新问题