Solved

add click event to go forward and back on nav menu

Posted on 2014-01-12
25
305 Views
Last Modified: 2014-01-24
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
0
Comment
Question by:helpchrisplz
  • 14
  • 8
  • 3
25 Comments
 
LVL 11

Assisted Solution

by:Murfur
Murfur earned 50 total points
Comment Utility
Chris,

I have a similar requirement (without the flower!) and I am using this example as my base:

http://tympanus.net/Development/ResponsiveMultiLevelMenu/index.html
0
 
LVL 1

Author Comment

by:helpchrisplz
Comment Utility
great stuff.

do you have a jsfiddle?
0
 
LVL 1

Author Comment

by:helpchrisplz
Comment Utility
i will try and incorporate demo 4 or 5 into my fiddle.
0
 
LVL 11

Expert Comment

by:Murfur
Comment Utility
No fiddle built, but will have a go adapting your flower...
0
 
LVL 58

Expert Comment

by:Gary
Comment Utility
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.
0
 
LVL 11

Expert Comment

by:Murfur
Comment Utility
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.
0
 
LVL 1

Author Comment

by:helpchrisplz
Comment Utility
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.
0
 
LVL 58

Expert Comment

by:Gary
Comment Utility
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/
0
 
LVL 1

Author Comment

by:helpchrisplz
Comment Utility
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.
0
 
LVL 1

Author Comment

by:helpchrisplz
Comment Utility
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?
0
 
LVL 1

Author Comment

by:helpchrisplz
Comment Utility
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.
0
 
LVL 58

Expert Comment

by:Gary
Comment Utility
Following 12 O'clock
http://jsfiddle.net/GaryC123/ZN2dH/21/

If no sub menu exists then follow the link.
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 1

Author Comment

by:helpchrisplz
Comment Utility
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.
0
 
LVL 58

Expert Comment

by:Gary
Comment Utility
It's working fine, but jsfiddle is blocking the link.
0
 
LVL 1

Author Comment

by:helpchrisplz
Comment Utility
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.
0
 
LVL 58

Accepted Solution

by:
Gary earned 450 total points
Comment Utility
Think this finishes it off

http://jsfiddle.net/GaryC123/ZN2dH/24/
0
 
LVL 1

Author Closing Comment

by:helpchrisplz
Comment Utility
Thank you. Thank you. Thank you.

i am very impressed with this!

:)
0
 
LVL 58

Expert Comment

by:Gary
Comment Utility
0
 
LVL 1

Author Comment

by:helpchrisplz
Comment Utility
show off! haha
0
 
LVL 58

Expert Comment

by:Gary
Comment Utility
Hide Go Back if at the top level.
http://jsfiddle.net/GaryC123/ZN2dH/26/
0
 
LVL 1

Author Comment

by:helpchrisplz
Comment Utility
:)
0
 
LVL 1

Author Comment

by:helpchrisplz
Comment Utility
check it out!

http://www.theenglishnotebook.co.uk/

username: client
pass: letmein
0
 
LVL 58

Expert Comment

by:Gary
Comment Utility
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.
0
 
LVL 1

Author Comment

by:helpchrisplz
Comment Utility
yep it was hard to get a sunflower to fit the width i needed for both homepage and subpage
0
 
LVL 1

Author Comment

by:helpchrisplz
Comment Utility
Hi thanks for the help. I'm now looking for a bit more help if possible?

http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/Q_28347258.html


Thanks!
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

I have answered several questions lately that were solved utilizing the power of jQuery's AJAX functions, so I thought I would write an article demonstrating the ease of use. Why should I use jQuery as opposed to regular JavaScript? Now I know…
PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now