change menu dropdown button

  • Resolved filzer

    (@filzer)


    10 years, 6 months ago

    i have a menu like this: screenshot (in a child theme)

    as the item “paint” has no content (it is no page, just a link to nowhere), it would be better if a click on the name would also toggle the dropdown.

    so if i click on “paint” the same thing would happen than if i click on the dropdown button.

    i tried to modify this line in the functions.js container.find( '.menu-item-has-children > a' ).after( '<button class="dropdown-toggle" aria-expanded="false">' + screenReaderText.expand + '</button>' ); but could not find out how to do it correctly.

    the “paint” could ideally be the name of the button and no <a> element anymore.

    i hope anyone understands what i am into 🙂 any help is very welcome!

Viewing 11 replies - 1 through 11 (of 11 total)
  • Loc_rabbirt

    (@loc_rabbirt)

    10 years, 6 months ago

    I think it will need customized and it cannot give with free support.

    Thread Starter filzer

    (@filzer)

    10 years, 6 months ago

    thank you for your answer, but i don’t understand: do you want to sell me a solution?

    Loc_rabbirt

    (@loc_rabbirt)

    10 years, 6 months ago

    Contact me via: outsource[@]designerresource.org and I will do it for you with some little cost.

    Sampression

    (@sampression)

    10 years, 6 months ago

    Pleas change this code
    .menu-item-has-children > a
    to
    .menu-item-has-children > a[href='#']

    You have to add the code as per the toggle function.
    If you get confused please provide us the menu code.

    Thanks,
    Sampression

    Thread Starter filzer

    (@filzer)

    10 years, 6 months ago

    thank you for that @sampression! but it won’t work, the problem is that the menu item “paint” is not part of the toggle button.

    the .js code obviously inserts it’s <button> tag after the <a> (for the menu item).

    if i could remove the <a>paint</a> and replace it with <button>paint</button> i think this should work.

    here the HTML output:

    <li id="menu-item-152" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-152">
<a>art</a>
<button class="dropdown-toggle toggle-on" aria-expanded="true"><span class="screen-reader-text">Untermenü verbergen</span></button>
<ul class="sub-menu toggled-on">
	<li id="menu-item-137" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-137"><a>paint</a><button class="dropdown-toggle toggle-on" aria-expanded="true"><span class="screen-reader-text">Untermenü verbergen</span></button>
	<ul class="sub-menu toggled-on">
		<li id="menu-item-129" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-129"><a href="http://tstaudt.net/portfolio/paint-1/">paint 1</a></li>
		<li id="menu-item-144" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-144"><a href="http://tstaudt.net/portfolio/paint-2/">paint 2</a></li>
		<li id="menu-item-143" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-143"><a href="http://tstaudt.net/portfolio/paint-3/">paint 3</a></li>
	</ul>
</li>
	<li id="menu-item-125" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-125"><a href="http://tstaudt.net/portfolio/kunst/print-2/">print</a></li>
	<li id="menu-item-124" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-124"><a href="http://tstaudt.net/portfolio/kunst/photo/">photo</a></li>
	<li id="menu-item-123" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-123"><a href="http://tstaudt.net/portfolio/kunst/paper/">paper</a></li>
</ul>
</li>

    what part of code of the menu do you need? it is the standard fifteen theme menu.

    the site i am working on (only the menu atm) is http://tstaudt.net/portfolio/

    thanks in advance!

    Sampression

    (@sampression)

    10 years, 6 months ago

    Provide # link to the <a>paint</a>
    Eg. <a href="#">paint</a>
    Form the backend of the wordpress

    and add this

    jQuery("li.menu-item-has-children > a[href='#']").on('click', function() {
            jQuery('.submenu').slideToggle('slow');
        });

    Or you can just add this code

    jQuery("li.menu-item-has-children > a").on('click', function() {
            jQuery('.submenu').slideToggle('slow');
        });

    Thanks,
    Sampression

    Sampression

    (@sampression)

    10 years, 6 months ago

    If you have herf=”some link” inside a tag then the browser recognize as the link tag and if you don’t have href=”some link ” inside the a tag browser render it as a general tag (but it is not consider as semantic). so, if you are providing href=”some link” then use first code instead you can use second code.

    Thanks,
    Sampression

    Thread Starter filzer

    (@filzer)

    10 years, 6 months ago

    Okay, i have a <a href="#">paint</a> link now. but i don’t know where to add the above jQuery code. I added it in the functions.js (which is copied from the original fifteen theme into my child theme folder) but there happens nothing.

    i really appreciate your help! as i understand it is your idea to add another toggle to the link, so there will be one toggle with the button and another with the link. will they sync as well?

    Sampression

    (@sampression)

    10 years, 6 months ago

    Add this code

    jQuery("li.menu-item-has-children a").on('click', function() {
            jQuery(this).siblings("ul").toggleClass('toggled-on');
        });

    Above
    })(jQuery);

    In function.js file.

    Thanks,
    Sampression

    Thread Starter filzer

    (@filzer)

    10 years, 6 months ago

    YES Sampression! Thank you very much, this did it! Very cool! (and so nice there are still people who try and help without wanting money…!)

    Sampression

    (@sampression)

    10 years, 6 months ago

    Thank you,
    Sampression

Viewing 11 replies - 1 through 11 (of 11 total)

The topic ‘change menu dropdown button’ is closed to new replies.