Advanced CSS expandable button

Posted by ravindra | on Apr 30, 2009 7:48 AM
Share/Save/Bookmark

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

The final result is something like this:

Advanced-css-expandable-button

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

Step 3: link javascript.js , yahoo-dom-event.js, animation-min.js  file to your html pages :

Download the javascript.js , yahoo-dom-event.js, animation-min.js  file and link this file in your HTML page inside <head> tag.

Save and test the result!

download_box[1]
Download The Article 		video[10]
View The Demo
Loading
Filed Under: ajax and jQuery, css
Feeds RSS Subscribe to Feeds RSS
Email Email to Raj
6 comments

blog comments powered by Disqus

  1. jun April 30, 2009 8:33 AM  

    not working in ie.
    but grate tut...

  2. raj April 30, 2009 9:03 AM  

    hey jun thanks for suggest us the problem but now its fixed it . i really appreciated to your valuable comments . once again thanks

  3. Anonymous May 1, 2009 3:42 AM  

    Easy oversight to make... it's not like IE's popular or anything :)

  4. Wayne May 2, 2009 9:57 AM  

    yes, but it still needs to be accounted for if you want to satisfy your entire audience. Otherwise you're just leaving visitors on the table, as it were.

    Nice, would love to see it in action somewhere first.

  5. raj May 2, 2009 9:04 PM  

    hey @wayne thanks for suggestions i personally think about your suggestions and use to my next post.thanks once again

  6. fat heads creative studio May 5, 2009 1:09 AM  

    nice animation on the dropdown, great, thanks

Subscribe to: Post Comments (Atom)