Change the CSS menu item to directly load the website instead of using javascript to replace a placeholder

Question

Change the CSS menu item to directly load the website instead of using javascript to replace a placeholder

I have a CSS navigation menu, but I'm facing an issue. When I click on a link in the menu, like Google for example, it only changes the name of the placeholder and doesn't actually load the page. Any suggestions on how to fix this?

Thank you for your assistance!

Here is a fiddle example where you can try to load Google from the menu: http://jsfiddle.net/n877s/3/


function DropDown(el) {
    this.dd = el;
    this.placeholder = this.dd.children('span');
    this.opts = this.dd.find('ul.dropdown > li');
    this.val = '';
    this.index = -1;
    this.initEvents();
}
DropDown.prototype = {
    initEvents : function() {
        var obj = this;

        obj.dd.on('click', function(event){
            $(this).toggleClass('active');
            return false;
        });

        obj.opts.on('click',function(){
            var opt = $(this);
            obj.val = opt.text();
            obj.index = opt.index();
            obj.placeholder.text(obj.val);
        });
    },
    getValue : function() {
        return this.val;
    },
    getIndex : function() {
        return this.index;
    }
}

$(function() {

    var dd = new DropDown( $('#dd') );

    $(document).click(function() {
        // close all dropdowns
        $('.wrapper-dropdown-3').removeClass('active');
    });

});

HTML

<div class="wrapper-demo">
<div id="dd" class="wrapper-dropdown-3" tabindex="1">
    <span>Transport</span>
        <ul class="dropdown">
        <li><a href="#">Classic mail</a></li>
        <li><a href="#">UPS Delivery</a></li>
        <li><a href="http://www.google.com">Google</a></li>
        </ul>
</div>

javascript jquery html css menu

Answer 1

Answer №1

To alter the standard link behavior, including descendant links, you can implement the following code:

        obj.dd.on('click', function(event){
            $(this).toggleClass('active');
            return false;
        });

To prevent clicks on menu items from reaching the above handler, include this additional code:

        obj.dd.find('a').on('click',function(event){
            event.stopPropagation();
        });

You can see a functional example in this JSFiddle demo.

Please note that due to the SAMEORIGIN policy, google.com will not load in the jsfiddle iframe; check the console for the outcome.

Answer 2

To alter the standard link behavior, including descendant links, you can implement the following code:

        obj.dd.on('click', function(event){
            $(this).toggleClass('active');
            return false;
        });

To prevent clicks on menu items from reaching the above handler, include this additional code:

        obj.dd.find('a').on('click',function(event){
            event.stopPropagation();
        });

You can see a functional example in this JSFiddle demo.

Please note that due to the SAMEORIGIN policy, google.com will not load in the jsfiddle iframe; check the console for the outcome.

Answer 3

Answer №2

The <a> tags are nested within the <div id="dd">, and the div contains a script that triggers on click events to prevent default actions using false. When a click event occurs on the a tag, it propagates up to the div element which halts it from executing.

To resolve this issue, you can insert the following code:

if ($(event.target).is("a[href!=#]"))
    return true;

right before the return false; statement

Answer 4

The <a> tags are nested within the <div id="dd">, and the div contains a script that triggers on click events to prevent default actions using false. When a click event occurs on the a tag, it propagates up to the div element which halts it from executing.

To resolve this issue, you can insert the following code:

if ($(event.target).is("a[href!=#]"))
    return true;

right before the return false; statement

Answer 5

Answer №3

The first method involves removing return false; from the click event of obj.dd, and replacing it with event.stopPropagation(); at the beginning. This will allow the link href attributes to load the page as intended. Here's how:

obj.dd.on('click', function(event){
    event.stopPropagation();

    $(this).toggleClass('active');
});

An alternative method is to try this approach:

obj.opts.on('click',function(e){
    e.preventDefault();

    var opt = $(this);
    obj.val = opt.text();
    obj.index = opt.index();
    obj.placeholder.text(obj.val);

    window.location.href = opt.attr('href');
});

In your HTML code, simply add links similar to the google link you currently have.

Answer 6

The first method involves removing return false; from the click event of obj.dd, and replacing it with event.stopPropagation(); at the beginning. This will allow the link href attributes to load the page as intended. Here's how:

obj.dd.on('click', function(event){
    event.stopPropagation();

    $(this).toggleClass('active');
});

An alternative method is to try this approach:

obj.opts.on('click',function(e){
    e.preventDefault();

    var opt = $(this);
    obj.val = opt.text();
    obj.index = opt.index();
    obj.placeholder.text(obj.val);

    window.location.href = opt.attr('href');
});

In your HTML code, simply add links similar to the google link you currently have.

Change the CSS menu item to directly load the website instead of using javascript to replace a placeholder

Answer №1

Answer №2

Answer №3

Similar questions

Using CSS to resize an element with both dimensions while maintaining its

Removing characters from a string with regular expressions

FingerprintJS is experiencing an issue with the navigator object not being defined, resulting in

Could anyone please provide advice on how to resolve the issue I encountered when trying to make Post and get Http method calls using protractor?

Excessive Width Issue Caused by Bootstrap 4 Navbar Items

Steps to link two mat-autocomplete components based on the input change of one another

React Native Function fails to return a value

Utilize vue.js to save the components of an object

The property 'matMenuTrigger' cannot be attached to 'a' because it is not recognized

Ways to dynamically update CSS properties (such as changing the color scheme throughout the entire application)

Tips on invoking a factory method from a different service method in AngularJS

Arranging Divs into Two Columns in CSS - A Simple Guide

Angular and Three JS collaboration leads to misplacement of canvas rendering

The controller method in MVC is not receiving the expected data

Tips for styling an inline list using CSS before revealing it with jQuery's .show method:

Styling the tab view in PrimeFaces

Tips on choosing and showcasing information from jQuery date and time picker

Creating an IF statement within a jQuery / Ajax request when using PHP

Customizing the date-select widths: A step-by-step guide

Tips for displaying a loading spinner each time the material table is loading