Ads Top

Drop down menu in jquery

Drop down menu with CSS and jquery:
Anybody want to create a drop down with jquery and CSS then you can understand with this given example below:

HTML Code:
<div class="mainPage">
    <div class="menu">
        <ul>
            <li><a href="#">Home</a></li>
            <li class="subMenu"><a href="#">About <em></em></a>
                <ul class="serviceDrop3">
                    <li><a href="#">Menu 1</a></li>
                    <li><a href="#">Menu 2</a></li>
                    <li><a href="#">Menu 3</a></li>
                    <li class="subMenuSub"><a href="#">Menu 4 <i></i></a>
                        <ul class="serviceDrop4">
                            <li><a href="#">Sub Menu 1</a></li>
                            <li><a href="#">Sub Menu 2</a></li>
                            <li><a href="#">Sub Menu 3</a></li>
                            <li><a href="#">Sub Menu 4</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>

</div>

CSS Code:
<style>
    .mainPage {
        margin: 0 auto;
        width: 600px;
    }
    * {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
    }
    .menu li {
        background: #eee;
        display: block;
        color: #333;
        float: left;
        margin: 1px;
    }
    .menu a {
        color: #333;
        display: block;
        transition: all 0.3s;
        text-decoration: none;
        padding: 5px 20px;
    }
    .menu a:hover {
        background: #c00707;
        color: #fff;
    }
    a.active {
        background: #c00707;
        color: #fff;
    }
    .serviceDrop3 {
        background: #aaa;
    }
    .subMenu,
    .subMenuSub {
        position: relative;
    }
    .subMenu em {
        border: 6px solid #000;
        border-right: 6px solid transparent;
        border-left: 6px solid transparent;
        border-bottom: 6px solid transparent;
        float: right;
        margin-top: 8px;
        margin-left: 8px
    }
    .subMenu:hover em {
        border: 6px solid #fff;
        border-right: 6px solid transparent;
        border-left: 6px solid transparent;
        border-bottom: 6px solid transparent;
    }
    .subMenuSub i {
        border: 6px solid #000;
        border-right: 6px solid transparent;
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
        float: right;
        margin-top: 4px;
    }
    .subMenuSub:hover i {
        border: 6px solid #fff;
        border-right: 6px solid transparent;
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
    }
    .serviceDrop3,
    .serviceDrop4 {
        position: absolute;
        display: none;
        width: 200px;
    }
    .serviceDrop4 {
        right: -100%;
        top: 0;
        background: #aaa;
    }
    .subMenu ul li {
        float: none;
    }

</style>

Jquery Code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $(".menu ul li.subMenu").hover(
            function () { $(".serviceDrop3").fadeIn("fast"); },
            function () { $(".serviceDrop3").fadeOut("fast"); });
        $("ul.serviceDrop3").hover(
            function () { $(".menu ul li.subMenu > a").addClass("active"); },
            function () { $(".menu ul li.subMenu > a").removeClass("active"); });
        $(".menu ul li.subMenuSub").hover(
            function () { $(".serviceDrop4").fadeIn(); },
            function () { $(".serviceDrop4").fadeOut();
            });
        });
</script>



No comments:

Copyright Reserved to Anything Learn. Powered by Blogger.