CODEWITHSUNDEEP
jqueryhtmlcss
user515742
user515742

Reputation: 59

creating menu bar

I want to create a drop down menu bar with mouse over action using jquery, css, html.. Please am new to such ideas can anyone help me.

Upvotes: 0

Views: 5011

Answers (3)

rahul
rahul

Reputation: 187020

If you want to develop it from the scratch then you can take a look at this demo, which will help you get the basic understading of how a drop down menu works. If you do not want to reinvent the wheel then you can go for any plugin already existing as mentioned by others.

HTML

<ul id="menu">
    <li class="menuitem">
        <a href="#">Menu Item 1</a>
        <div class="submenu">
            <div>1</div>
             <div>2</div>
        </div>
    </li>
    <li class="menuitem">
        <a href="#">Menu Item 2</a>
        <div class="submenu">
            <div>3</div>
             <div>4</div>
        </div>
    </li>
    <li class="menuitem">
        <a href="#">Menu Item 3</a>
        <div class="submenu">
            <div>5</div>
             <div>6</div>
        </div>
    </li>
</ul>

CSS

#menu li.menuitem
{
    width: 100px;
    height: 30px;
    float: left;
    margin: 0 10px;
}
.submenu
{
    display: none;
    border-bottom: 1px solid #a9a9a9;
        border-left: 1px solid #a9a9a9;
        border-right: 1px solid #a9a9a9;
}
.submenuactive
{
    display: block;
        border-bottom: 1px solid #a9a9a9;
        border-left: 1px solid #a9a9a9;
        border-right: 1px solid #a9a9a9;
}

jQUery

$(function(){
    $("#menu li.menuitem").hover(function(){
        $(this).find("div.submenu").removeClass("submenu").addClass("submenuactive");
    },
     function(){
         $(this).find("div.submenuactive").removeClass("submenuactive").addClass("submenu");
     });
});

Upvotes: 2

dheerosaur
dheerosaur

Reputation: 15172

Search for plugins here - http://plugins.jquery.com/

Upvotes: 1

Elliott Bowles
Elliott Bowles

Reputation: 398

I believe this will help you out a ton: http://css-tricks.com/simple-jquery-dropdowns/

Upvotes: 2

Related Questions