0

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 (i.e.,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. enter image description here

Improve this question
15
  • you want an image icon before every lists? Commented May 21, 2015 at 14:10
  • no in place of main menu item name i.e., Item1,Item2,Item3.. i want to show an icon. @rickjancawaling Commented May 21, 2015 at 14:21
  • ahhh like background of menu items? Commented May 21, 2015 at 14:23
  • yes...and no need to show the menu item name. Commented May 21, 2015 at 14:25
  • 1
    do you want like this? Commented May 21, 2015 at 14:28

2 Answers 2

Reset to default
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;
}
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thankyou @rick jan cawaling..but when i copied and pasted the code in my local application its still showing vertical menubar only as shown in above posted image. may be the imports is making the trouble. But ur answer is correct. Appreciate your help and effort. But no luck , i will investigate more to find out the exact problem when ran in local application using tomcat server...
0

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.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.