The hyperlink appears to be malfunctioning

I've been working with a jQuery multilayer menu, but I encountered an issue with the link not being clickable.

For reference:

jQuery:

JS Array Demo:

When navigating through the menu on the demo site - "devices" -> "Mobile phones" -> "super smart phones", I added a link in "super smart phones" that is not clickable when implemented into my code. The page does not redirect to '/devices/mobile/supersmartphones/' as defined in the 'a' tag.

Here are excerpts from my code:

<a href="/devices/mobile/supersmartphones/">
    <i class="floatRight undefined"></i>Super Smart Phone</a>

.mlpm_w a {
display: block;
outline: none;
overflow: hidden;
font-size: 1.5em;
line-height: 1em;
padding: .2em .2em;
text-decoration: none;
color: #fff;
}

.mlpm_w a:hover {
color: #ffe;
}

.mlpm_w .floatRight {
float: right;
}

title: 'All Product',
    icon: 'fa fa-reorder',
    items: [
        {
            name: 'Mobile Phone',
            link: '/device/mobile/',
            items: [
                {
                    title: 'Mobile Phone',
                    items: [
                        {
                            name: 'Super Smart Phone',
                            link: '/device/mobile/supersmartphones/'
                        },

I'm unsure where the problem lies, and I apologize for any confusion in explaining it.

Thank you for your help in resolving this issue.

Answer №1

To manage the menu and link it to a custom URL, ensure preventItemClick is set to false.

$('#menu').multilevelpushmenu( { preventItemClick: false  } );

Check out the demo here!

Answer №2

The specialized tool manages different events using its unique event handlers which are fully customizable. An illustration of customizing the tool can be seen when wanting to open a new tab with specific content:

$('#navigation').customtool({
    onSelection: function() {
        $selectedItem = arguments[2]
        var targetURL = $selectedItem.find( 'a' ).attr("href");
        window.open(targetURL,'_blank');
    }
});

Unique Fiddle

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

Struggling to make JavaScript read JSON data from an HTML file

I am currently working on developing a word search game using django. One of the tasks I need to accomplish is checking whether the entered word exists in a dictionary. To achieve this, I have been converting a python dictionary into JSON format with json. ...

Learning about a basic sorting algorithm that analyzes and compares different values

While on the hunt for a simple jQuery sorting script, I stumbled upon this gem online: $(function() { $('ol').each(function() { var matches = $('li', this).filter(function() { // Each item var text = $(this).te ...

Utilizing Host Styles in Angular2 Components

In the midst of developing a custom form component for my Angular project, I am facing challenges with styling. I wish to allow variable widths for the input element and have them controlled by the host component. For instance: <my-input class="input" ...

``Change the color of the sections in a 3D pie chart on a Highcharts

I am looking to create a custom pie chart with two different colors: one for the main surface and another for the sides. Currently, I can only configure the lighter blue color for the main surface, but I would like to also change the darker blue color for ...

Refreshing Datatable without having to refresh the entire webpage

I apologize for my limited English proficiency. Could you please explain to me the process of reloading data without refreshing the page using jQuery's datatable? I have been encountering issues with my table not properly reloading. Here is my view: ...

Internet Explorer 11 fails to interpret the attribute attr.xlink:href

I am a beginner in Angular 2 and I'm working on creating an icon component. The code I have below works perfectly in Chrome and Firefox, but unfortunately, it's not functioning in Internet Explorer 11. Here is what my component looks like: @Com ...

Navigating JSONP using jQuery

I'm encountering an issue where I can see the correct response in Firebug, but I'm unable to access the data it returns. I need some guidance on how to achieve this. Specifically, I'm attempting to place the timestamp of an entry into a div ...

Use JavaScript to swap out various HTML content in order to translate the page

I am currently facing a challenge with my multilingual WordPress website that utilizes ACF-Field. Unfortunately, WPML is not able to translate the field at the moment (2nd-level-support is looking into it). As a solution, I have been considering using Java ...

When you set the href attribute, you are essentially changing the destination of the link

UPDATE: I'm not referring to the status bar; instead, I'm talking about the clickable text that leads to a link. /UPDATE I've gone through a few similar posts but couldn't find a solution. I have a link that needs to be displayed. www ...

Enhance TinyMCE functionality to permit text as a primary element within <table> or <tr> tags

I've been struggling for the past three hours, trying out different solutions and searching like crazy on Google. Unfortunately, I have not been able to find a resolution to this particular issue. Issue: TinyMCE is not allowing me to insert text dire ...

What is the best way to ensure the proper formatting of my initial form?

Hello, I am encountering some challenges with formatting my form. As a beginner in web coding, I apologize for what may seem like a simple issue - this is the first form I am attempting to code. My objective is as follows: On screens and tablets: have fo ...

Tips for resolving a double click issue with a jQuery slide up/down animation

When I click a button, there is an animation that makes a div slide up and then down again. It functions the way I want it to, but the first time you click it, it doesn't work; you have to click twice for it to respond. Someone recommended using... ...

Update the hover effect specifically for mobile devices

.hovereffect a.info,.hovereffect h2{text-transform:uppercase;color:#fff} .hovereffect{float:left;position:relative;cursor:default} .hovereffect .overlay{position:absolute;top:0;left:0;opacity:0;background-color:none;-webkit-transition:all .4s ease-in-out ...

Null value arising due to AJAX's asynchronous nature

I am facing an issue with a form that includes a select option displaying various choices. My goal is to retrieve the selected option and display it in a text box. The options are loaded using AJAX from an XML data source. When attempting to grab the sele ...

Is Webkit's Overflow Scrolling feature hiding the divs on your website?

I recently implemented a design for my website where the content is contained within an absolute positioned div that takes up the entire screen. However, I noticed that the scrolling on this div felt clunky and not as smooth as I would like it to be. After ...

Is the hidden element still viewable even with display: none?

Can you explain why the icon is still visible when the display is set to none? .toc.item { display: none; } <a class="toc item"><i class="sidebar icon"></i></a> ...

Is there a way for me to remove an uploaded image from the system

Here is an example of my HTML code: <input type='file' multiple/> <?php for($i=0;$i<5; $i++) { ?> <div class="img-container" id="box<?php echo $i ?>"> <button style="display: none;" type="submit" cl ...

Crafting a website in HTML

Hello there! I am looking to create a flexible HTML and CSS page that adjusts in size when the user resizes the browser window. I want the page to be responsive to different resolutions. I've explored various solutions on this platform, but unfortunat ...

Field Enchanted - JQuery Plugin

A TypeError was caught: Object #<Object> does not contain the method 'easeOutCubic' is being output in the console, and it seems to be related to a JQuery plugin known as Decorated Field. Upon inspecting the contents of the zip file, I cou ...

Is there a way to collect multiple optional phone numbers dynamically using DOM manipulation?

I have a piece of code here where I am looking to dynamically add additional phone numbers as an optional field. Can anyone help me figure out how to achieve this? <div class="col-12 row border my-2 py-2"> <di ...