customization - clickable toggle menu, help

admin管理员组

文章数量:1130349

I'm trying to edit the toggle menu so that instead of having to click on the icon near the menu, the menu would open up by clicking on the words instead. How to do this? I understood how to remove the icons, yet I'm not sure how to make the titles clickable instead of being a # link.

the website is:

Anyone can help by any chance? that would be amazing

thank you!

I'm trying to edit the toggle menu so that instead of having to click on the icon near the menu, the menu would open up by clicking on the words instead. How to do this? I understood how to remove the icons, yet I'm not sure how to make the titles clickable instead of being a # link.

the website is: http://maayanboni

Anyone can help by any chance? that would be amazing

thank you!

• customization
• menus
• theme-twenty-fifteen

Share Improve this question asked Dec 7, 2018 at 17:02 mademoiselleflomademoiselleflo 322 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Solution One, which is also the simplest, would be to postion the button over the text. Then you could click anywhere within the link to open the menu. This assumes you don't actually ever want to go to the top level page.

In you styles.css, add width: 100% !important; and text-align: right; to your .dropdown-toggle class. so it would look like this...

.dropdown-toggle {
    background-color: transparent;
    border: 0;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    content: "";
    height: 42px;
    padding: 0;
    position: absolute;
    text-transform: lowercase;
    top: 3px;
    right: 0;
    width: 100% !important;
    text-align: right;
}

Solution Two (Parents NOT Linkable), Use the following code, it's a simple script that does what your asking. Note: you should remove the script that you are currently using.

jQuery(document).ready(function () {
    jQuery('.sidebar_menu ul ul').hide();
    if (jQuery('.menu-item-has-children').length > 0) {
        jQuery('.menu-item-has-children').click(

        function (event) {
            jQuery(this).addClass('toggled')
            if (jQuery(this).hasClass('toggled')) {
                jQuery(this).children('ul').toggle();
            }

            return false;

        });
    }

});

Solution Three (Parents Linkable)

jQuery(document).ready(function () {
    jQuery('.sidebar_menu ul ul').hide();
    if (jQuery('.menu-item-has-children').length > 0) {
        jQuery('.menu-item-has-children').click(

        function (event) {            
            if (jQuery(this).hasClass('toggled')) {
                    jQuery(this).removeClass('toggled');
                jQuery(this).children('ul').toggle();
            }else{
                    jQuery(this).addClass('toggled');
                    jQuery(this).children('ul').toggle();
                return false;
            }
        });
    }

});

I'm trying to edit the toggle menu so that instead of having to click on the icon near the menu, the menu would open up by clicking on the words instead. How to do this? I understood how to remove the icons, yet I'm not sure how to make the titles clickable instead of being a # link.

the website is:

Anyone can help by any chance? that would be amazing

thank you!

I'm trying to edit the toggle menu so that instead of having to click on the icon near the menu, the menu would open up by clicking on the words instead. How to do this? I understood how to remove the icons, yet I'm not sure how to make the titles clickable instead of being a # link.

the website is: http://maayanboni

Anyone can help by any chance? that would be amazing

thank you!

• customization
• menus
• theme-twenty-fifteen

Share Improve this question asked Dec 7, 2018 at 17:02 mademoiselleflomademoiselleflo 322 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Solution One, which is also the simplest, would be to postion the button over the text. Then you could click anywhere within the link to open the menu. This assumes you don't actually ever want to go to the top level page.

In you styles.css, add width: 100% !important; and text-align: right; to your .dropdown-toggle class. so it would look like this...

.dropdown-toggle {
    background-color: transparent;
    border: 0;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    content: "";
    height: 42px;
    padding: 0;
    position: absolute;
    text-transform: lowercase;
    top: 3px;
    right: 0;
    width: 100% !important;
    text-align: right;
}

Solution Two (Parents NOT Linkable), Use the following code, it's a simple script that does what your asking. Note: you should remove the script that you are currently using.

jQuery(document).ready(function () {
    jQuery('.sidebar_menu ul ul').hide();
    if (jQuery('.menu-item-has-children').length > 0) {
        jQuery('.menu-item-has-children').click(

        function (event) {
            jQuery(this).addClass('toggled')
            if (jQuery(this).hasClass('toggled')) {
                jQuery(this).children('ul').toggle();
            }

            return false;

        });
    }

});

Solution Three (Parents Linkable)

jQuery(document).ready(function () {
    jQuery('.sidebar_menu ul ul').hide();
    if (jQuery('.menu-item-has-children').length > 0) {
        jQuery('.menu-item-has-children').click(

        function (event) {            
            if (jQuery(this).hasClass('toggled')) {
                    jQuery(this).removeClass('toggled');
                jQuery(this).children('ul').toggle();
            }else{
                    jQuery(this).addClass('toggled');
                    jQuery(this).children('ul').toggle();
                return false;
            }
        });
    }

});

本文标签： customizationclickable toggle menuhelp