I'm having an issue with anchor links in my menu.
Here is a quick example of the issue I'm having:
The 2 Anchor Links:
<div id="anchor1"></div>
<div id="anchor2"></div>
The Menu:
Menu Item One (http://test.com/m1)
-Sub Menu Item One (/m1/#anchor1)
-Sub Menu Item Two (#anchor2)
Essentially Sub Menu Item One will bring me to the right place but it always re loads the page if I'm currently on it.
Sub Menu Item Two works perfectly if I'm on the page but does not work if I'm on another page.
So what I need is for the link to take me to the anchor location without refreshing the page if I'm currently on it and to take me to the anchor location if I'm on a different page.
Any ideas?
Did you use full path in href on Sub Menu Item One? Add full path with the anchor in the end and it should work like you hoped.
Related
My problem is that for my navigation bar, it's supposed to have a green "active" box to show what tab the user is currently on. The box shows up for every tab I have, except for one, which happens to be a dropdown menu. Therefore, I need help figuring out why it doesn't appear. Is it because I declared 2 classes in an <a> tab? Here's my code: https://jsfiddle.net/wmzpktw7/. As you can see, there's no boxes on the "Games" menu. If you move class="selected" into another tab, you'll see the green box. Any help will be much appreciated.
It's because you have two declarations for class inside the HTML element. Multiple classes can be declared like this:
<a class="dropbtn selected" href="#">Games</a>
https://jsfiddle.net/mmd9u1h7/1/
First visit http://velnikolic.com/music/?page_id=6#test
Then hover over the music tab on the navigation. There is a highlight on both "Classic and Category 2". I think the reason for this is because they both link to anchor tags on the Music page. Is there a way to highlight only the item clicked on. For example if I clicked "Classic" only Classic and Music would be highlighted not all three.
one Idea is that u can remove ".current-menu-item" on the rest submenu items,
and only make sure you assign ".current-menu-item" to the one u cliked
when u click on one of the submenu "li".
I have a problem using Joomla 2.5.
I'm displaying my navigation on a different way than usual. My mainMenu and subMenu are positioned separated from each other. (Required by the jQuery animation I've implemented)
There is a need to retain the menuStructure therefor i've created the following menu:
(in this example I only give the first 2 mainMenuItems a subMenu)
mainMenuItem #1 {Alias of subMenuHead #1}
mainMenuItem #2 {Alias of subMenuHead #2}
mainMenuItem #3
mainMenuItem #4
The Submenu's:
in the settings, only the first level of Children are displayed!
subMenuHead #1
subMenuItem #1.1
subMenuItem #1.2
subMenuHead #2
subMenuItem #2.1
subMenuItem #2.2
My Problem?
The subMenus are only being displayed if the user is on the Parent-page or the actual page it self. Even when set they should display on all pages.
So for example: When I navigate to mainMenuItem #3 I am unable to see any subMenus.When I navigate to subMenuItem #1.2 I only see the subMenu of mainMenuItem #1.
When I navigate to subMenuItem #2.1 I only see the subMenu of mainMenuItem #2.
What I want:
All subMenus being displayed, on all pages (Menu Assignment is set like so).
Don't understand? Maybe the direct link may help :) (Dutch-text): http://www.notabilisweb.nl/tenc2012/
Thanks in advance!
I'm assuming that you are using the default Joomla menu module. In the module you are using to display the submenu, you should make sure that the "Show Sub-menu Items" setting is set to Yes.
I made a custom menu item on my website named Toys and linked it with 'custom links' to: http://mydomain.com/toys/our-toys/
When I go to the website the menu item Toys gets a current menu item with a green background color (as it is supposed to be). On this page you can navigate to another page, because I limited the products with 6 items every page. When I click on the next or last page button, I go to: http://mydomain.com/toys/our-toys/page/2/. On this page, the current menu item has disappeared.
Does anyone know how to set the current page items when I go to the next and previous pages? I use wp ecommerce with mazine theme.
Wordpress automatically adds a .current-menu-item class to the li of your current menu item, check that that is the class that is being styled and not a custom class or pseudo element.
e.g.
.nav .current-menu-item a {
color:red;
}
I'm attempting to implement a multi-level drop-down navigation menu in CSS only but there's one small part which I just can't seem to get working correctly.
What should happen is:
1) When hovering over a menu item, it should be highlighted by using a different image (this works fine).
2) When hovering over a sub-menu item, the parent menu item should be highlighted.
Point 2 works fine up until I have a class .bottom on the parent menu item (this class is used as the image is slightly different). If the parent menu item has class .bottom, the highlight simply doesn't happen.
A demo of this can be viewed here: http://jsfiddle.net/cZFtW/2/
The demo shows that when hovering over Menu 1 > Sub Menu 3 > Sub Sub Menu X, Sub Menu 3 is highlighted. However, when hovering over Menu 2 > Sub Menu 3 > Sub Sub Menu X there is no highlight.
Can anyone see what I'm missing? On a side note, there's no real reason for not using Javascript here, I'd just prefer to have it all handled by CSS if possible (only need to support IE7+).
TL;DR; version: this fiddle shows the answer.
I understand what you mean. And I am pretty sure that the styling to which you need an answer to, which works for all except for the one at the bottom, has arisen purely by accident. (Kind a nice one I must say). I am almost certain of this, because your code as well as the file names lack any form of consistancy. There is double code, there is superfluous code, and there are images missing.
Therefore I have rewritten your markup and style sheet, and came to the fiddle as mentioned above.
Now, how does it work?
The trick is to attach the background image to an element inside the list item. In this case I chose for an anchor element, since that is most the likely. The first step is to change the background image at hovering the anchor, that's basic.
The second step is to change the background again when you hover over the submenu. At that point, the anchor element isn't hovered any more, but the list item is. So you can still change the background of the anchor element.
Note: in my solution there is a small difference to what you wish: when you hover the arrow, the background if the list item is already changed instead of until the cursor is over the submenu. If you want to prevent that, then you have to add an extra element for every sub menu like you had done yourself. But I think this is pretty nice also.