Conceal sub-menu icons within the jQuery User Interface Menu Widget

Is there a way to hide the submenu icon for the jQuery UI menu widget? The default value is set to ui-icon-carat-1-e.

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

I have been trying to find a solution to this seemingly simple issue, but unfortunately, I can't seem to figure it out.

Thank you for any help or suggestions you can provide.

EDIT: Sharing my HTML code below:

<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 is the code after jQuery has processed it:

<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>

I am looking to remove the span class="ui-menu-icon ui-icon ui-icon-carat-1-e" to get rid of the unwanted submenu icon.

Thank you, Alex

jquerycssjquery-ui

Answer №1

The solution provided earlier is a temporary workaround. By adjusting the settings accordingly, you can eliminate the icon, although this will result in an empty space in its place. Utilize CSS to get rid of the extra spacing for the icon. You have the option to implement both solutions or solely focus on the CSS approach.

To initialize the Javascript menu (you can opt for the CSS method to completely hide it):

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

CSS modifications:

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

Answer №2

Check out this working example on JSFiddle

If you want to achieve this using jQuery, you can simply use the remove command.

Here is the jQuery code to achieve this:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The scrolling action triggered by el.scrollIntoViewIfNeeded() goes way past the top boundary

el.scrollIntoViewIfNeeded() function is used to scroll to element el if it's not within the visible browser area. Although it generally works well, I have encountered some issues when trying to use it with a fixed header. I have provided an example s ...

javascripthtmlcssscroll

Is your display:inline-block feature not functioning properly?

I am currently designing the homepage for this website and I am attempting to arrange the category divs under the header in a grid layout, with 3 divs per row. I have been trying to achieve this using display:inline-block, but so far, I can only get the d ...

htmlwordpresscss-floatcss

Create a cylindrical HTML5 canvas and place a camera view inside the cylinder

I have a unique project in mind that involves creating an HTML5 canvas cylinder with the camera view at its center. The walls of the cylinder will display images, and the entire structure should be able to rotate and zoom. If anyone has any advice on how ...

javascriptjqueryhtmlcanvas

Changing navigation position while scrolling to a different anchor using fullpage.js

Currently, I have a lengthy scrolling webpage that utilizes fullpage.js. The navigation is fixed in position over the page and each active slide is highlighted by its corresponding link. My goal is to have the link move to the top position when it's ...

jquerycssbootstrap-4fullpage.jsslick.js

Issues with excessive firing of JQuery blur and hide functions

I am currently using jQuery v1.11.2 and have set up a basic JSFiddle at this link (http://jsfiddle.net/k1g3upbv/). The layout may not be ideal in JSFiddle due to the integration of Twitter Bootstrap within my project. I quickly put together the JSFiddle, o ...

javascriptjqueryajax

The submission of the form is not functioning properly after loading the page using AJAX

Having trouble submitting my form after loading the page with ajax. Here is the code I am using to load the page: The problem occurs after loading the ajax form as a modalbox. function account_list(url) { $.ajax({ type: 'get', url: url, befor ...

javascriptjqueryhtmlajax

Can you explain the function of the "Normalize CSS" feature in Fiddle?

I recently came across this interesting fiddle: Demonstration of rounded corners It achieves the desired outcome, however, I noticed that it only works properly when the "Normalised CSS" checkbox is selected. When it's not checked (like in my code), ...

css

Exploring JSONP data using AJAX

Tomorrow I have an exam on Web Design and I'm struggling to understand how to read JSONP responses with AJAX. While I can work with JSON and basic JSONP, I face issues when a callback function is involved. Let me illustrate this with two examples: F ...

jqueryhtmlajaxjsonp

The error message "email() is not a valid function when using the onclick attribute

Can anyone lend a hand? I feel like I must be overlooking something really obvious. I'm having trouble calling my function to execute my ajax call. Any assistance would be greatly appreciated. Thank you! Here is an excerpt of the HTML code: $(docu ...

javascriptjqueryhtmlajax

Service is not recognizing the content-type application/json specified in RestAssured

Utilizing jQuery in Google Chrome with --disable-web-security, I am able to access a service using the following code snippet: $.ajax({ type: 'POST', url: "http://10.30.1.2:9234/myapp/v6/token/generate", headers: { "Content-T ...

javajqueryajaxrestrest-assured

How come the Google fonts won't display correctly within my HTML document?

After importing some fonts into my CSS file, I noticed that they are not displaying correctly in the design. Below is the code for the imported fonts and CSS linking: https://i.stack.imgur.com/9RQ4u.png The output only shows sans-sarif working properly: ...

htmlcssgoogle-fonts

Using JQuery to locate and substitute occurrences of HTML elements throughout my webpage

Looking for assistance with a JQuery search and replace task involving multiple instances of HTML within a specific DIV element on my webpage. Specifically, I need to change certain items in the textbox to a simpler display format. Here is a snippet of th ...

javascriptjqueryhtml

Upon clicking the navbar dropdown item, it shifts its position

I am currently working on setting up a navigation bar with multiple items aligned to the right side. However, I have encountered an issue where clicking on the "notification" icon causes the other icons in the navbar to move instead of remaining fixed in p ...

htmlcssnavbardropdownmove

Encountering a ModuleBuildError while setting up Tailwind CSS in Laravel 8

I am currently learning Laravel version 8 and encountered an issue while trying to install Tailwind CSS using the npm command. npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 Here is a detai ...

cssnpmlaravel-mixtailwind-csslaravel-8

Creating a unique custom icon by leveraging the material UI icons - a step-by-step guide

I am looking to create an arrow graphic similar to the one shown in the image below https://i.stack.imgur.com/k9TvH.png Originally, I was able to achieve this using SVG - <svg height='24' width='12' style={{ marginBottom: '-4p ...

csssvgmaterial-ui

Why is this <div> element refusing to budge according to my jQuery commands?

Currently embarking on a jQuery coding challenge where I am attempting to maneuver a circle around the page in a square pattern. Numerous methods have been tested with no success thus far. While I would like to showcase my various attempts, it would prove ...

javascriptjqueryanimationsetintervaloffset

Change justify-content-between to something else

After successfully fixing the issue with aligning the navbar brand in the middle of my navigation bar, I am now facing a new challenge. I want to add a button right before the right navigation toggle, but all my attempts have been unsuccessful so far. I&ap ...

htmlcssbootstrap-5

What is the best way to modify and execute js and css (less) files dynamically using ajax and jQuery?

Whenever I click a button, an ajax call is triggered to load various html code into a div with the id 'main'. While displaying the html content is not an issue, integrating and applying css and js code to my current page has proven to be challeng ...

javascriptjqueryhtmlcssajax

Shooting star css animation featuring pre and post effects

Trying to create a falling star using CSS animation. I made a star with a pseudo element, but I'm having trouble setting the animation in the pseudo-element. i{ position: relative; width: 0; height: 0; border-left: 12px solid transpa ...

htmlcss

Adjust the vertical size of the background hue on the span element within the text

Can the height of the background color in my span be adjusted? HTML <span class="highlight">Some highlighted text</span> CSS .highlight{ font-family: 'Roboto', sans-serif; font-weight: 300; font-size: 1.5em; backgr ...

htmlcss