CODEWITHSUNDEEP
jqueryhtmlcssjquery-ui
amura.cxg
amura.cxg

Reputation: 2427

JQueryUI Menubar using Menus

I'm trying to create a menu bar for my site using CSS and JQueryUI, specifically using JQueryUI's menu widget. It's seems to be working for the most part but for some reason the menu shows up horizontal whereas I want it to be vertical. I'm trying to learn some more CSS and I got the basics for the menubar from a few tutorials online.

I've thrown my code into a fiddle here

HTML

<div class="ui-widget-header">
<ul class="menu">
    <li><a href="#">Test</a>
    </li>
    <li>    <a href="#">Test2</a>

        <ul>
            <li><a href="#">Sub item</a>
            </li>
            <li><a href="#">Sub item</a>
            </li>
            <li>    <a href="#">Sub item</a>

                <ul>
                    <li><a href="#">Sub item</a>
                    </li>
                    <li><a href="#">Sub item</a>
                    </li>
                    <li><a href="#">Sub item</a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

CSS

ul.menu {
    text-align: left;
    display: inline;
    margin: 0;
    padding: 15px 4px 17px 0;
    list-style: none;
}
ul.menu li {
    float: left;
    margin: 0px 10px 0px 10px;
}
ul.menu li.ui-state-hover {
    margin: -1px 9px -1px 9px;
}
.menu li a {
    display: block;
}
.menu li ul {
    display: none;
    position: absolute;
}
.menu li ul li {
    display: block;
}
li.ui-menu-item.ui-state-hover {
    margin: 0px;
}

JS

$(function () {
    $(".menu li").hover(

function () {
    $(this).addClass("ui-state-hover");
    $("ul", $(this)).show();
},

function () {
    $(this).removeClass("ui-state-hover");
    $("ul", $(this)).hide();
});
$(".menu li ul").each(function () {
    $(this).menu();
});
});

Any help would be greatly appreciated :)

Upvotes: 0

Views: 1023

Answers (2)

Uiupdates
Uiupdates

Reputation: 196

you have implemented it correctly there is a slight change in the CSS 

ul.menu {
    text-align: left;
    display: inline;
    margin: 0;
    padding: 15px 4px 17px 0;
    list-style: none;
}
ul.menu li {
            margin: 0px 10px 0px 10px;
            padding:10px;
}
ul.menu li.ui-state-hover {
    margin: -1px 9px -1px 9px;
}
.menu li a {
    display: block;
}
.menu li ul {
    display: none;
    position: absolute;
}
.menu li ul li {
    display: block;
}
li.ui-menu-item.ui-state-hover {
    margin: 0px;
}

check this :- http://jsfiddle.net/uiupdates/76gm29tu/

Upvotes: 0

Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13988

Apply float:none for your first level menus like below.

.menu li ul li {
display: block;
float:none;
}

FIDDLE DEMO

Upvotes: 1

Related Questions