CODEWITHSUNDEEP
jquerycssjquery-ui
DaFunkyAlex
DaFunkyAlex

Reputation: 1969

Hide submenu icons in jQuery UI Menu Widget

I'm trying to hide the submenu icon for jquery ui menu widget (default value is ui-icon-carat-1-e).

$(document).ready(function(){
    $(function() {
        $( "#menu" ).menu({
            icons: { 
                submenu: false
            }
        });
    });
});

I guess the solution is very simple, but I can't get it :-(

Thanks for your help, guys.

EDIT: Here's my html code:

<ul id="menu" style="z-index:1">
    <li><a href="#"><span class="ui-icon ui-icon-info" style="margin: 3px 0 0 4px;"></span>Information </a>
        <ul>
            <li><a href="?site=something"><span class="ui-icon ui-icon-star" style="margin: 2px 0 0 4px;"></span>Something</a></li>
            <li>...</li>
...
        </ul>
    </ul>

And here's the code when jquery has done it's hob:

<ul id="menu" class="ui-menu ui-widget ui-widget-content ui-corner-all ui-menu-icons" style="z-index:1" role="menu" tabindex="0" aria-activedescendant="ui-id-152">
    <li class="ui-menu-item" role="presentation">
        <a id="ui-id-152" class="ui-corner-all" href="#" aria-haspopup="true" tabindex="-1" role="menuitem">
            <span class="ui-menu-icon ui-icon ui-icon-carat-1-e"></span>
            <span class="ui-icon ui-icon-info" style="margin: 3px 0 0 4px;"></span>
                Information 
        </a>
        <ul class="ui-menu ui-widget ui-widget-content ui-corner-all" style="display: none; top: 31px; left: 20px;" role="menu" aria-expanded="false" aria-hidden="true">
            <li class="ui-menu-item" role="presentation"> … </li>
            <li class="ui-menu-item" role="presentation"> … </li>
            <li class="ui-menu-item" role="presentation"> … </li>
            <li class="ui-menu-item" role="presentation"> … </li>

And I want to remove this annoying span tag span class="ui-menu-icon ui-icon ui-icon-carat-1-e"

Cheers Alex

Upvotes: 1

Views: 3475

Answers (2)

jnl
jnl

Reputation: 447

The previous answer is a poor hack. You can use the proper settings to remove the icon, tho this will leave an empty space where the icon would normally go. Use CSS to remove the extra spacing for the icon. You can do both, or just the CSS part.

Javascript menu initialization (optional change - css will hide it fully):

$("#mymenu").menu({
    icons: {submenu: 'ui-icon-blank'}
});

CSS changes:

#mymenu .ui-menu-icon{display: none;}
#mymenu.ui-menu .ui-menu-item{padding: 3px 3px 3px 3px;}

Upvotes: 4

Rooster
Rooster

Reputation: 10077

Working Fiddle using jquery solution

Basically you can do this by using the jquery remove command.

JS(run after initializing the widget)

$('.ui-menu-icon.ui-icon.ui-icon-carat-1-e').remove();

Upvotes: 3

Related Questions