Saturday, February 18, 2012

Create Stylish menu using CSS and Jquery


This code will generate a stylish menu bar with CSS and Jquery





<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery Sliding Menu Demo</title>
<script type="text/javascript">
$(function(){
                // hide all links except for the first
                $('ul.child:not(:first)').hide();
                $("a.slide:first").css("background-color","#FF9900");
                // for image
                // $("a.slide:first").css("background-image","url('path')");
               
                $('ul.parent a.slide').click(function(){
                                $('ul.parent a.slide').css("background-color","#3399FF");
                               
                                $('ul.parent a.slide').hover(function(){
                                                $(this).css("background-color","#66CC66");
                                });

                                $('ul.parent a.slide').mouseout(function(){
                                                $(this).css("background-color","#3399FF");
                                });

                                $(this).mouseout(function(){
                                                $(this).css("background-color","#FF9900");
                                });
                               
                                $(this).css("background-color","#FF9900");

               
                                // slide all up
                                $('ul.child').slideUp('slow');
                               
                                // show the links of current heading
                                $(this).next().find('a').show();
                               
                                // slide down current heading
                                $(this).next().slideDown('fast');

                                // prevent default action
                                return false;
                });
});

</script>

<style type="text/css">

a
{
                outline:none;
}

ul
{
                list-style:none;
}

ul.parent
{
                margin:0px;
}

ul.parent a
{
                display:block;
                width:200px;
                border-bottom:1px solid #336699;
                background:#3399FF;
                color:#FFFFFF;
                font-weight:bold;
                text-decoration:none;
                padding:7px;
}

ul.parent a:hover
{
                color:#000000;
                background:#66CC66
}

ul.child a
{
                background:#333333;
                color:#FFFFFF;
                border-bottom:1px solid #f6f6f6;
                font-weight:normal;
                margin-left:-40px;
                padding:7px;
                width:200px;
                display:block;
                line-height:10px;
}

ul.child a:hover
{
                color:#3333333;
                background:#CCCCCC
}

</style>

</head>

<body>

                <h1 align="center">JQuery Sliding Menu Demo</h1>
   
   
  
    <ul class="parent">
                <li>
                <a href="#" class="slide">Title One</a>
           
            <ul class="child">
                <li><a href="#">Link One</a></li>
                <li><a href="#">Link Two</a></li>
                <li><a href="#">Link Three</a></li>
                <li><a href="#">Link Four</a></li>
                <li><a href="#">Link Five</a></li>
            </ul>
           
         </li>
    </ul>

    <ul class="parent">
                <li>
                <a href="#" class="slide">Title Two</a>
           
            <ul class="child">
                <li><a href="#">Link One</a></li>
                <li><a href="#">Link Two</a></li>
                <li><a href="#">Link Three</a></li>
                <li><a href="#">Link Four</a></li>
                <li><a href="#">Link Five</a></li>
            </ul>
           
         </li>
    </ul>
   
    <ul class="parent">
                <li>
                <a href="#" class="slide">Title Three</a>
           
            <ul class="child">
                <li><a href="#">Link One</a></li>
                <li><a href="#">Link Two</a></li>
                <li><a href="#">Link Three</a></li>
                <li><a href="#">Link Four</a></li>
                <li><a href="#">Link Five</a></li>
            </ul>
           
         </li>
    </ul>
   
    <ul class="parent">
                <li>
                <a href="#" class="slide">Title Four</a>
           
            <ul class="child">
                <li><a href="#">Link One</a></li>
                <li><a href="#">Link Two</a></li>
                <li><a href="#">Link Three</a></li>
                <li><a href="#">Link Four</a></li>
                <li><a href="#">Link Five</a></li>
            </ul>
           
         </li>
    </ul>
   
    <ul class="parent">
                <li>
                <a href="#" class="slide">Title Five</a>
           
            <ul class="child">
                <li><a href="#">Link One</a></li>
                <li><a href="#">Link Two</a></li>
                <li><a href="#">Link Three</a></li>
                <li><a href="#">Link Four</a></li>
                <li><a href="#">Link Five</a></li>
            </ul>
           
         </li>
    </ul>
<br /><br /><br />
               
                                <br /><br />
                                <!--<hr width="750" />-->
                                <p align="center">
</body>
</html>

1 comment:

  1. wow brilliant nice work i really appreciate this. keep it up.

    http://www.deepdesigncompany.com/

    ReplyDelete