Toggle menu issue

Question

I've got a toggle menu, please see http://jsfiddle.net/Wp2em/41/ for code and functions.

On the real site which is using the same code, everytime when you click on h3 (Category 1, 2 & 3 which is an a tag at the moment), it toggles its submenu down a bit, then the page changes to a new h3 linking page, and the submenu collapses together on the new page.

I'm just wondering is there any way I can tell the submenu to be open when its parent page/the new h3 linking page is opened? Please see this bank site which has the side bar effect I'd like my toggle menu to be.

Thank you in advance!

Sure just trigger the click event on the menu element when you're on that page. — j08691, Mar 21 '12 at 19:28
Hi @j08691, thanks for your fast response. Does that mean I have to trigger the click event on every h3 page? Is it possible for you to give me some example/code on it? I'm still learning:) Thanks very much! — grumpypanda, Mar 21 '12 at 19:32
I would just check the URL and trigger the click if the page matches. — j08691, Mar 21 '12 at 19:33

colemande · Accepted Answer · 2012-03-30T14:28:33.593

2

Here is my fiddle

all you will need to do is put the class "currentPage" on the li that you are currently on and the menu should be open after the page loads. I also moved some of your css around so it should move a little smoother now.

** Updated fiddle code. It will now look at your current URL and set the link that matches with it to the currentPage. Also I added that if another menu is open it will close itself if you click on another parent menu

** Updated fiddle code. Ok now if you click on the arrow the menu will expand and not go to the link(like the bank site). Also I changed it where you will have to put the anchor tag in all parent H3s.

edited Mar 30 '12 at 14:28

answered Mar 21 '12 at 19:59

colemande

392
1
5
17

Hi Colemande, thanks for your response. I moved your code to my local, unfortunately the h3 a tags are not working any more. Everytime i clicked on h3, the menu toggles but the linking page is not opening. Also do I have to identify var pathname = window.location.pathname; on each page? How do i do it? Thanks for your help! :) – grumpypanda Mar 21 '12 at 20:46
Updated [fiddle](http://jsfiddle.net/colemande/LcsLr/12/) . You shouldn't have to set the pathname on each page. – colemande Mar 21 '12 at 21:42
Thanks for the follow up Colemande, I grabbed the code off the new fiddle, but Category 1 and category 3 which have submenus underneath still only just toggle the submenu but not go to the new linking pages. Any way to fix that? Thank you! – grumpypanda Mar 21 '12 at 21:50
1

Updated [fiddle](http://jsfiddle.net/colemande/LcsLr/19/) . Sorry didn't look at that bank website closely didn't know you wanted the parent menu items to also be links. Should work how you want it now. – colemande Mar 22 '12 at 04:11
Hi Colemande, thank you, I'm nearly there with your great help. Is there any way to make the arrow images to slide the submenu only(like the bank site) not a link? Eg, when you're on Category 1 page, it is great you made the category 1 submenu open but I can't close the category 1 submenu or see other submenu's options on the page cos the arrows are the links at the mo. Thanks:) – grumpypanda Mar 22 '12 at 19:28
Hi Colemande, thanks very much for your great help and useful code again. Just one further question regarding your menu if you could help. When you click on a h3 tag eg 'Category 1', it goes to the Category 1 page and the submenu stays open, great! However if you click on the highlighted 'Category 1' again on the current Category 1 page, the Category 1 submenu slides close and then open. Is there any way to stop this extra toggle action when you click on the highlighted Category 1 on its current page? Thanks! – grumpypanda Apr 05 '12 at 04:09
1

Hi Colemande, thanks very much! You are a legend, I hope one day I can be like you to help others. Thank you!! :) – grumpypanda Apr 10 '12 at 02:08

Frank van Wijk · Answer 2 · 2012-03-22T00:01:20.230

If the page loads and the submenu (ul.second_level) is generated (i.e. from php), parse an active css class on the submenu that must be visible.

ul.active {
    display: block
}

ul.second_level {
    display: none
}

This is in addition to your click function. Do not trigger the click event since it starts the animation (which I presume you don't want).

Update:

It is quite basic stuff, but I do not know how the HTML code for your menu is created. If you are using php and a database (for example) to create the menu, check every submenu item with the page you are on. If the page is one of the pages in the submenu, set the class 'active' on that submenu. The CSS does the rest (displaying this submenu and hide other submenus).

If you have a static page, use javascript to check on which page you are with window.location.href for example. The rest is the same.

Hi Mikey, thanks for your response. Sorry I'm a bit lost with the suggestion. Is there any way you could give me a bit more details? Is there any code/tutorials I could have a look so i can understand how to achieve my goal with your method. Thanks very much! — grumpypanda, Mar 21 '12 at 20:51

score 0 · Answer 3 · answered Mar 21 '12 at 19:44

This is not too simple. I've had a very similar problem, although I was posting the page back to the same url so I used a hidden field to store a list of the id's of the H3's which were open.

You I think will have to use a cookie to do this as you're navigating straight to the new page. The idea is you create a cookie and set a value on it every time you open an H3 and remove it every time you close it. You can use this plugin to do this. Then when you open the other page, the script reads the H3's which should be open out of the cookie and opens them.

Another route would be to use Ajax to post the open/closed H3 information back to the server which would store it in session data and use it to build the HTML of the new page so the right H3's were open.

Hi James, thanks for your reply. I was hoping I could use some javascript to control it. I'm still in the learning process, does it mean I will need to use some php to control the menu with the plugin you suggested. Is there any tutorials/code I could check out to solve my problem? Thanks for your help:) — grumpypanda, Mar 21 '12 at 20:49

Toggle menu issue

3 Answers3