How to add jquery vertical left panel slider?

Many people says that they want a good left panel and they want that when they select any menu then submenu should be open in slow motion vertically.

So here is the code of left panel slider with jquery and css with some screen shot.
You can also edit them according to you need.

On the first view left panel will look like this

If you move your cursor on it than look like this

If you click any option then it opens the submenu like this

Here is the code simply copy and paste this code in your page and run

// Code start from here
<style>
body {
    font-family: Helvetica,Arial,sans-serif;
    font-size: 0.9em;
}
p {
    line-height: 1.5em;
}
ul#menu, ul#menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 18em;
}
ul#menu a {
    display: block;
    text-decoration: none;
}
ul#menu li {
    margin-top: 1px;
}
ul#menu li a {
    background: none repeat scroll 0 0 #F5ECF5;
    border: 1px solid #D7C2D7;
    color: #5E2572;
    font-family: Tahoma,Geneva,sans-serif;
    font-size: 16px;
    padding: 0.5em;
}
ul#menu li a:hover {
    background: none repeat scroll 0 0 #964298;
    color: #FFFFFF;
}
ul#menu li a.active {
    background: none repeat scroll 0 0 #964298;
    color: #FFFFFF;
}
ul#menu li ul li a {
    background: none repeat scroll 0 0 #EEEEEE;
    border-left: 10px solid #964298;
    color: #964298;
    font-size: 14px;
    padding-left: 15px;
}
ul#menu li ul li a:hover {
    background: none repeat scroll 0 0 #F5ECF5;
    border-left: 10px solid #964298;
    color: #5E2572;
    padding-left: 15px;
}
ul#menu li ul li a.active1 {
    background: none repeat scroll 0 0 #F5ECF5;
    border-left: 10px solid #964298;
    color: #5E2572;
    padding-left: 15px;
}
.code {
    border: 1px solid #CCCCCC;
    list-style-type: decimal-leading-zero;
    margin: 0;
    padding: 5px;
}
.code code {
    display: block;
    margin-bottom: 0;
    padding: 3px;
}
.code li {
    background: none repeat scroll 0 0 #DDDDDD;
    border: 1px solid #CCCCCC;
    margin: 0 0 2px 2.2em;
}
.indent1 {
    padding-left: 1em;
}
.indent2 {
    padding-left: 2em;
}

</style>

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script language="javascript">
function initMenu() {

$('#menu ul').show();
$('#first_el').hide();

$('#menu li a').click(
    function() {
      var checkElement = $(this).next();
      if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
        return false;
        }
      if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
        $('#menu ul:visible').slideUp('normal');
        checkElement.slideDown('normal');
        return false;
        }
      }
    );


}
</script>
<body onload="initMenu();">
<ul id="menu">
<li><a href="#">Blog Name</a>
          <ul id="first_el">
            <li><a href="#">Web</a></li>
            <li><a href="#" class="active">Developer</a></li>
           <li><a href="#">Solutions</a></li>
          </ul>
        </li>
</ul>
<ul id="menu">
<li><a href="#">End Code</a>
</ul>
</body>

Search This Blog

Web Developers Solution

How to add jquery vertical left panel slider?

Comments

Post a Comment