I have the following navigation in my site.
The first 3 items are normal links to other pages in my site. The last orange link opens a modal box.
This is how I have written it in code
<?php wp_nav_menu(['menu' => 'Main menu', "container" => "", "menu_class" => "desktop-menu"]); ?>
<a class="open-modal-registration passion-one bg-orange white" href="#">Einfach anmelden und kostenlos studieren</a>
I have a menu that can be customized from the Control panel, and then the orange button is hardcoded.
Now comes my problem. I would like to be able to reorder the items in the navigation in a way that I can also reorder the orange button, and put it, lets say, between "Page #1" and "Page #2".
To do this, I guess I would have to add it to my menu from the Control Panel, but I do not see any proper way to do this. All that can be added to the menu are
Custom links
Pages
Posts
Categories
Tags
And none of those elements seem the right one to define a button with such a functionality.
How could I solve this?
Based on what you are looking for and the way a WordPress menu is loaded, I would say your best bet is to add it to the menu like the other items. You can enter in all of the same data, the dead-link, style it and then use the menu item id assigned to every wordpress menu item dynamically as the selector that opens your modal. There is no need for the class you are currently using to open it since only one element will be opening the modal based on your question.
For example:
jQuery(document).ready(function(){
jQuery('#menu-item-7155').click(function() {
//add the selector/js to open your modal
jQuery('#modal').show();
});
});
Hope that helps! Good luck.
Related
How to disable top menu link in Wordpress to avoid redirect to another page on click. I only need to show submenus.
Give the menu item link a the value #.
Then you'll need some Javascript to prevent default link clicking action.
E.g. with jQuery:
$('.class').click(function(e){
e.preventDefault();
});
// replace class with whatever the selector of the link is. To cover ALL menu items that have sub menus (and have the WP classes), you can use '.menu-item-has-children a'
Add custom link to menu item (Put # value on link)
Log into your WordPress administration panel. Navigate to Appearance, and select Menus:
Navigate to Links on the left and type in the URL you want to have for this menu button, add Link Text to specify what the tab will say, and then click Add to Menu:
Optionally, if you would like to control whether your menu link opens in a new tab when clicked, check the “Link Target” advanced property from within Screen Options to reveal this setting on individual menu items:
Refresh the site and you will see your new custom page and link in the navigation menu.
This site (http://blindsa.org.za/) has been created for the Blind and needs to be fully accessible, however the screen reader is only reading 'Clickable' for the next & previous buttons on the revolution slider images that are at the top of the home page. Is there any way that I can change this to next slide and previous slide?
I can't tab to the next/prev buttons so I can't hear what the screen reader will say when focus goes to them. They're just <div> tags. There are several things you can do to help, if you have access to the html. These should all be added to the <div> tag.
add tabindex=0 so that I can tab to the buttons
add role=button so that I know it's a button
add aria-label='previous slide' and aria-label='next slide' so that I know what the buttons are for
add a keyboard handler (probably for onkeyup) so that I can hit space or enter to activate the button
I have Main_Menu which is my Primary and User_Menu which is my Secondary Links Menu. I want to show the Main_Menu when user clicks on one of the Menu Items in the User_Menu. How do i achieve this?
I'm not sure I understand the use case for showing the primary menu after clicking on the secondary menu. That seems to contradict the meanings of "primary" and "secondary". :)
But you might get some use out of the Menu Block module: http://drupal.org/project/menu_block
I'm trying to remove the link href from an unordered list item.
The menu has been created by wordpress and I'm trying to remove the link from the first item, so that when I user rolls over the item the menu still drops down but the very first item (the one that triggers the drop down) isn't clickable.
Currently I just have href="#" in place but I'd like to remove the link altogether.
How can I go about stripping out the href element?
After creating the menu item place holder remove the # from the URL field to create the non clickable dropdown place holder.
This is possible by adding a custom link to the menu assigning it any url (for this example I just added #) then click add to menu. Once it's on the menu open it and remove the url you assigned and save. If you don't put the url initially WordPress won't let you add it to the menu. On your pages you will be able to hover over it and the drop down children will appear but you wont be able to click on the parent "place holder".
Note: This answer is from the same question on WordPress Answers
Click me
I am supposing the menu you are talking abou is an automatic one.
I would use jQuery to prevent the default action of the link.
<script>
$("menu-item-123").click(function(event) {
event.preventDefault();
});
</script>
Here is my site:
http://wake9.com/blogs/norcal-merced-wakesurfing-competition-2009/.
Notice the menu item "Photos and Results". Hover over it and you will see sub menu items. I want to be able to click on the sub-menu items but the main menu item shouldn't be a page or be clickable. The only way i could get this item on the menu was to make it a page. Is there a way to just have a menu item that has sub menu items to content, but the actual menu item isn't clickable? I was thinking about using JQuery to remove the anchor tag, but that is a real hack and I want to know if there is an easier way.
Thanks in advance!
One option would be to use Page Links to plugin and set the main link as '#' . I tried this and it works in my blog.
What about using the jQuery.remove to remove the element?
something like this:
function removeLinkAttrib() {
var attrib = jQuery(#menus).find("a").attr("Photos and Results");
jQuery(attrib).remove;
}
I'm not sure if $(attrib).remove; will work, but you get the picture :)
(this answer is for people using Wordpress.com free sites):
You can go to Appearance > Menus, then add a custom link to the menu by clicking 'Links' in the left-hand column, and adding "#" as the URL (and whatever you want as a label). Then add this link to the menu. Open the options for the new menu item in 'Menu Structure', and then delete '#' from the URL, so the field is blank, and save changes. Now you can add sub-menus to this menu item, and there will be no link for this item on the main menu...works for me.