jquery menubar - jquery,javascript,css

Question

I want to display icon in place of menu name on menubar.

Please find the fiddle http://jsfiddle.net/7Bvap/ . For the main menu items (ie,Item1,Item2,Item3..) i want to show image and upon user click on that image i want to show submenu items name as shown for Item3 menu item in fiddle.

Below is the sample code i used to create menu bar using jquery.

<ul id="nav">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a>
        <ul>
            <li><a href="#">Item 3-1</a>
            <ul>
                <li><a href="#">Item 3-11</a></li>
                <li><a href="#">Item 3-12</a></li>
                <li><a href="#">Item 3-13</a></li>
            </ul>
            </li>
            <li><a href="#">Item 3-2</a></li>
            <li><a href="#">Item 3-3</a></li>
            <li><a href="#">Item 3-4</a></li>
            <li><a href="#">Item 3-5</a></li>
        </ul>
    </li>
    <li><a href="#">Item 4</a></li>
    <li><a href="#">Item 5</a></li>
</ul>

Please suggest how to show icon in place of menu names. Thanks.

--EDIT--

Below are the imports i'm using in my local application.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

Please find the image below which shows menubar vertically.

Answer 1

Here is the working fiddle

Check this for the tutorial it will help you to make navigation bar using pure css.

HTML

<ul id="nav">
    <li><a href="#"><img src = "http://icons.iconarchive.com/icons/iconfactory/red-tab/32/Apple-Menu-items-icon.png"></a></li>
    <li><a href="#"><img src = "http://icons.iconarchive.com/icons/iconfactory/red-tab/32/Apple-Menu-items-icon.png"></a></li>
    <li><a href="#"><img src = "http://icons.iconarchive.com/icons/iconfactory/red-tab/32/Apple-Menu-items-icon.png"></a>
        <ul>
            <li><a href="#"><img src = "http://icons.iconarchive.com/icons/iconfactory/red-tab/32/Apple-Menu-items-icon.png"></a>
            <ul>
                <li><a href="#"><img src = "http://icons.iconarchive.com/icons/iconfactory/red-tab/32/Apple-Menu-items-icon.png"></a></li>
                <li><a href="#"><img src = "http://icons.iconarchive.com/icons/iconfactory/red-tab/32/Apple-Menu-items-icon.png"></a></li>
                <li><a href="#"><img src = "http://icons.iconarchive.com/icons/iconfactory/red-tab/32/Apple-Menu-items-icon.png"></a></li>
            </ul>
            </li>
            <li><a href="#"><img src = "http://icons.iconarchive.com/icons/iconfactory/red-tab/32/Apple-Menu-items-icon.png"></a></li>
            <li><a href="#"><img src = "http://icons.iconarchive.com/icons/iconfactory/red-tab/32/Apple-Menu-items-icon.png"></a></li>
            <li><a href="#"><img src = "http://icons.iconarchive.com/icons/iconfactory/red-tab/32/Apple-Menu-items-icon.png"></a></li>
            <li><a href="#"><img src = "http://icons.iconarchive.com/icons/iconfactory/red-tab/32/Apple-Menu-items-icon.png"></a></li>
        </ul>
    </li>
    <li><a href="#"><img src = "http://icons.iconarchive.com/icons/iconfactory/red-tab/32/Apple-Menu-items-icon.png"></a></li>
    <li><a href="#"><img src = "http://icons.iconarchive.com/icons/iconfactory/red-tab/32/Apple-Menu-items-icon.png"></a></li>
</ul>

jQuery

$( "#nav" ).menu({position: {at: "left bottom"}});

CSS

.ui-menu { 
    overflow: hidden;
}
.ui-menu .ui-menu {
    overflow: visible !important;
}
.ui-menu > li { 
    float: left;
    display: block;
    width: auto !important;
}
.ui-menu ul li {
    display:block;
    float:none;
    background-image: url ();
}
.ui-menu ul li ul {
    left:120px !important;
    width:100%;
}
.ui-menu ul li ul li {
    width:auto;
}
.ui-menu ul li ul li a {
    float:left;
}
.ui-menu > li {
    margin: 5px 5px !important;
    padding: 0 0 !important;
}
.ui-menu > li > a { 
    float: left;
    display: block;
    clear: both;
    overflow: hidden;
}
.ui-menu .ui-menu-icon { 
    margin-top: 0.3em !important;
}
.ui-menu .ui-menu .ui-menu li { 
    float: left;
    display: block;
}

Answer 2

I'm assuming you have checked out the jQuery Menu widget: http://api.jqueryui.com/menu/

The menu uses icons, however it's in addition to the text.

I think your best bet would be to check this out - http://tympanus.net/codrops/2009/11/23/css-tutorial-image-with-toolbar-navigation-overlay/

The tutorial seems to cover everything you need.