Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

add click event to go forward and back on nav menu

Posted on 2014-01-12
25
Medium Priority
?
316 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
[X]
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
  • 14
  • 8
  • 3
25 Comments
 
LVL 11

Assisted Solution

by:Murfur
Murfur earned 200 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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
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 1800 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

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
This article discusses how to implement server side field validation and display customized error messages to the client.
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…
Suggested Courses

722 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