Advanced CSS expandable button

Posted by ravindra Apr 30, 2009

This tutorial explains how to Create Beautiful Double Door CSS menu tutorial .

The final result is something like this:

Step 1: HTML page:

Create a new HTML page and copy and paste the following code inside <body> tag:

<div id="Layer1">
<div class="leftCol">
<div id="lhsHeader6" class="leftBoxHeading_Off" onclick="lhsAction('6',true,'T6_Effective_Behaviour_Change');">CSS Expandable Button</div>
        <div id="lhsExpander6" class="leftBoxExpander">
          <div id="lhsInner6" class="leftBoxInnerPic"> <img src="images/left-box-inner-img.png" alt="Left image" height="18" width="287" />
                <ul>
                  <li><a href="">add your link here</a></li>
                  <li><a href="">add your link here</a></li>
                  <li><a href="">add your link here</a></li>
                  <li><a href="">add your link here</a></li>
                  <li><a href="">add your link here</a></li>
                  <li><a href="">add your link here</a></li>
                  <li><a href="">add your link here</a></li>
                </ul>
          </div>
        </div>
        <div id="lhsFooter6" class="leftBoxFooter_Off" onclick="lhsAction('6',true,'false');"></div>
</div>
</div>
</div>

Step 2: CSS file:

.leftCol {
    width: 295px;
    overflow: hidden;
    padding: 15px 0px 0px 0px;
    margin: 0px 25px 0px 0px;
    float: left;
    clear: both;
    }
    .leftBoxHeading_Off {
    width: 295px;
    height: 19px;
    background: url(images/left-box-heading-off.png) no-repeat;
    color: #94c93d;
    font-size: 100%;
    padding: 8px 0px 0px 18px;
    cursor: pointer;
    }
    .leftBoxExpander {
    width: 295px;
    overflow: hidden;
    height: 0px;
    background: url(images/left-box-expander-bg.png);
    }
    .leftBoxInnerPic {
    width: 287px;
    overflow: hidden;
    background: url(images/left-box-inner-bg.png) bottom repeat-x;
    margin: 0px 0px 0px 1px;
    }
    .leftBoxInnerPicImg {
    width: 89px;
    overflow: hidden;
    float: left;
    padding: 0px 0px 0px 18px;
    }
.leftBoxInnerPicUlWrap {
    width: 167px;
    overflow: hidden;
    float: left;
    }
.leftBoxInnerPic ul {
    width: 138px;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 9px;
    list-style: none;
    }
.leftBoxInnerPic ul li {
    color: #6699cc;
    font-size: 110%;
    width: 266px;
    }
.leftBoxInnerPic ul li a {
    color: #6699cc;
    text-decoration: none;
    display: block;
    padding: 3px 0px 3px 20px;
    }
.leftBoxInnerPic ul li a:hover {
    color: #6699cc;
    }
.leftBoxHeading_Off {
    width: 295px;
    height: 19px;
    background: url(images/left-box-heading-off.png) no-repeat;
    color: #6699cc;
    font-size: 110%;
    padding: 8px 0px 0px 18px;
    cursor: pointer;
    }
.leftBoxHeading_On {
    width: 295px;
    height: 19px;
    background: url(images/left-box-heading-on.png) no-repeat;
    color: #6699cc;
    font-size: 110%;
    padding: 8px 0px 0px 18px;
    cursor: pointer;
    }
.leftBoxFooter_Off {
    width: 295px;
    height: 12px;
    background: url(images/left-box-footer-off.png) no-repeat;
    cursor: pointer;
    margin: 0px 0px 15px 0px;
    }
.leftBoxFooter_On {
    width: 295px;
    height: 12px;
    background: url(images/left-box-footer-on.png) no-repeat;
    cursor: pointer;
    margin: 0px 0px 15px 0px;
    }
.leftBoxExpander {
    width: 295px;
    overflow: hidden;
    height: 0px;
    background: url(images/left-box-expander-bg.png);
    }
.leftBoxInner {
    width: 287px;
    overflow: hidden;
    margin: 0px 0px 0px 1px;
    }
.leftBoxInner ul {
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 9px;
    list-style:none;
    }
.leftBoxInner ul li {
    color: #6699cc;
    font-size: 75%;
    width: 266px;
    }
.leftBoxInner ul li a {
    text-decoration: none;
    display: block;
    padding: 3px 0px 3px 20px;
    }
.leftBoxInner ul li a:hover {
    color: #6699cc;
    }
.leftBoxInnerPic {
    width: 287px;
    overflow: hidden;
    background: url(images/left-box-inner-bg.png) bottom repeat-x;
    margin: 0px 0px 0px 1px;
    }