Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

add click event to go forward and back on nav menu

Posted on 2014-01-12
25
309 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
ID: 39776430
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
ID: 39777311
great stuff.

do you have a jsfiddle?
0
 
LVL 1

Author Comment

by:helpchrisplz
ID: 39777319
i will try and incorporate demo 4 or 5 into my fiddle.
0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 11

Expert Comment

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

Expert Comment

by:Gary
ID: 39777780
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
ID: 39777791
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
ID: 39777874
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
ID: 39778074
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
ID: 39778563
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
ID: 39778671
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
ID: 39779277
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
ID: 39779518
Following 12 O'clock
http://jsfiddle.net/GaryC123/ZN2dH/21/

If no sub menu exists then follow the link.
0
 
LVL 1

Author Comment

by:helpchrisplz
ID: 39779546
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
ID: 39779622
It's working fine, but jsfiddle is blocking the link.
0
 
LVL 1

Author Comment

by:helpchrisplz
ID: 39779659
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
ID: 39779705
Think this finishes it off

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

Author Closing Comment

by:helpchrisplz
ID: 39779722
Thank you. Thank you. Thank you.

i am very impressed with this!

:)
0
 
LVL 58

Expert Comment

by:Gary
ID: 39779745
0
 
LVL 1

Author Comment

by:helpchrisplz
ID: 39779754
show off! haha
0
 
LVL 58

Expert Comment

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

Author Comment

by:helpchrisplz
ID: 39779822
:)
0
 
LVL 1

Author Comment

by:helpchrisplz
ID: 39783280
check it out!

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

username: client
pass: letmein
0
 
LVL 58

Expert Comment

by:Gary
ID: 39783299
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
ID: 39783406
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
ID: 39806194
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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
jQuery delay animation 3 37
How to populate a dynamically created text input from ajax return 18 63
jquery datepciker end date add 6 days 6 58
jQuery force form POST 7 45
Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
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…

856 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