helpchrisplz
asked on
add click event to go forward and back on nav menu
i have a navigation menu sort of completed: http://jsfiddle.net/ZN2dH/9/
i have done the css and html after some help from a past EE question.
now i would like a little help coding the jquery part.
The menu on my jsfiddle has embedded <ul> tags. i need a way of showing / hiding each level with a way of getting back to previous levels.
so it would work like this:
if the user clicks a page with sub children it would hide the last level of pages and show its child pages. This would keep happening until the user gets down to a sub level where there are no more sub levels and then the child page would link through to its SRC URL.
but the user can click to get back up a level.
This is an example:
http://christophersowerby.com/example.pptx
i have done the css and html after some help from a past EE question.
now i would like a little help coding the jquery part.
The menu on my jsfiddle has embedded <ul> tags. i need a way of showing / hiding each level with a way of getting back to previous levels.
so it would work like this:
if the user clicks a page with sub children it would hide the last level of pages and show its child pages. This would keep happening until the user gets down to a sub level where there are no more sub levels and then the child page would link through to its SRC URL.
but the user can click to get back up a level.
This is an example:
http://christophersowerby.com/example.pptx
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
i will try and incorporate demo 4 or 5 into my fiddle.
No fiddle built, but will have a go adapting your flower...
See what you think of this
http://jsfiddle.net/GaryC123/ZN2dH/12/
Click the petals at 12 o'clock. To go back to the previous menu just double click anywhere.
For each link give a data-child that has the id of the child UL, for each child UL give it this ID and data-parent value equal to the id of the parent UL
Hope that's not too complicated
I stripped out the animation to keep it simple and the two inputs are visible only for my benefit to see the values being set.
http://jsfiddle.net/GaryC123/ZN2dH/12/
Click the petals at 12 o'clock. To go back to the previous menu just double click anywhere.
For each link give a data-child that has the id of the child UL, for each child UL give it this ID and data-parent value equal to the id of the parent UL
Hope that's not too complicated
I stripped out the animation to keep it simple and the two inputs are visible only for my benefit to see the values being set.
Nice one - that does it so it is just a matter of tidying up the UI. I'll have a go at adding the petals in layers to give the impression as per your PowerPoint doc.
ASKER
hi the <UL> tasgs need to be embedded within each other. as this will be used within a CMS navigation loop.
this is how far i have got:
http://jrfox.co.uk/chris/flower.zip
am trying to get the back button to go into the centre of the flower but not sure what the code is doing.
this is how far i have got:
http://jrfox.co.uk/chris/flower.zip
am trying to get the back button to go into the centre of the flower but not sure what the code is doing.
Does this work for you
Double click to go back.
No ID's or anything and the menus are nested.
http://jsfiddle.net/GaryC123/ZN2dH/14/
Double click to go back.
No ID's or anything and the menus are nested.
http://jsfiddle.net/GaryC123/ZN2dH/14/
ASKER
yes thats simple. tidy. the double click part: i will try make that a text link on click and have it in the centre of the flower.
ASKER
i have added the part in the middle to go back.
http://jsfiddle.net/ZN2dH/15/
how can we stop the user from clicking the back button if they are already at the very top level of links?
http://jsfiddle.net/ZN2dH/15/
how can we stop the user from clicking the back button if they are already at the very top level of links?
ASKER
hi just done some color changes.. and stooped the centre bit form layering ontop of the links:
http://jsfiddle.net/ZN2dH/17/
i noticed that if you click "This will go on another line" then go back a lvl (so the top level will show), then click "This will go on another line" (for the second time) it will not go back to the second level.
it just hides all the links
also if you put:
href="https://www.google.co.uk"
on one of the links it doesn't go through to that url but instead just hides the links.
http://jsfiddle.net/ZN2dH/17/
i noticed that if you click "This will go on another line" then go back a lvl (so the top level will show), then click "This will go on another line" (for the second time) it will not go back to the second level.
it just hides all the links
also if you put:
href="https://www.google.co.uk"
on one of the links it doesn't go through to that url but instead just hides the links.
Following 12 O'clock
http://jsfiddle.net/GaryC123/ZN2dH/21/
If no sub menu exists then follow the link.
http://jsfiddle.net/GaryC123/ZN2dH/21/
If no sub menu exists then follow the link.
ASKER
hi can we work with this one now:
http://jsfiddle.net/ZN2dH/23/
i have added you jquery to it but cant follow the link called Google external link.
http://jsfiddle.net/ZN2dH/23/
i have added you jquery to it but cant follow the link called Google external link.
It's working fine, but jsfiddle is blocking the link.
ASKER
ok then. The last bit to make it ready for going live is just this bit:
i noticed that if you click the link called: "This will go on another line"
Then go back a lvl (so the top level will show),
Then click "This will go on another line" (for the second time) it will not go back to the second level.
it just hides all the links.
1 other thing:
the user can click the go back link even if its the top level <ul> this hides all the links and user cant get back inside the links.
i noticed that if you click the link called: "This will go on another line"
Then go back a lvl (so the top level will show),
Then click "This will go on another line" (for the second time) it will not go back to the second level.
it just hides all the links.
1 other thing:
the user can click the go back link even if its the top level <ul> this hides all the links and user cant get back inside the links.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thank you. Thank you. Thank you.
i am very impressed with this!
:)
i am very impressed with this!
:)
Add a fading effect
http://jsfiddle.net/GaryC123/ZN2dH/25/
http://jsfiddle.net/GaryC123/ZN2dH/25/
ASKER
show off! haha
Hide Go Back if at the top level.
http://jsfiddle.net/GaryC123/ZN2dH/26/
http://jsfiddle.net/GaryC123/ZN2dH/26/
ASKER
:)
ASKER
Looks good.
I would add a fadeIn, even if it is fast, to the sub menus, they kinda jump out and the parent menu is still fading.
And decrease the radial on the menu background, or add a shadow to the text to make it stand out.
I would add a fadeIn, even if it is fast, to the sub menus, they kinda jump out and the parent menu is still fading.
And decrease the radial on the menu background, or add a shadow to the text to make it stand out.
ASKER
yep it was hard to get a sunflower to fit the width i needed for both homepage and subpage
ASKER
Hi thanks for the help. I'm now looking for a bit more help if possible?
https://www.experts-exchange.com/questions/28347258/help-make-jquery-sunflower-menu-better.html
Thanks!
https://www.experts-exchange.com/questions/28347258/help-make-jquery-sunflower-menu-better.html
Thanks!
ASKER
do you have a jsfiddle?