Danieboy
Danieboy

Reputation: 4521

How to expand sidebars sub-menu to the correct size?

I have found an example sidebar and implemented it to fit my website but I got a problem with the CSS. It wants to expand at a set amount of height for the animation to be smooth (if I set the height to auto the animation is gone) but if I set the height to an actual value (124 px) it will open too much for the smaller menu items. Look at the picture below for clarification.

Picture to clarify above text

So to clarify the question - How do I make keep the animation while also just opening the sub-menu enough so that all of the items are shown (not more or less - like in the right picture)?

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>

Upvotes: 0

Views: 45

Answers (1)

Travis L
Travis L

Reputation: 681

Try this:

.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;
}

Instead of animating height we animate max-height and just use the same values. Now the height should animate from 0px to whatever height the content requires.

Upvotes: 1

Related Questions