Solved

jquery nav menu 360 degree and add submenu

Posted on 2014-01-10
4
418 Views
Last Modified: 2014-01-11
I have been messing with this jsfiddle:
http://jsfiddle.net/b77Lf/24/

My client is asking for a sun flower that has nav links on the petals of the sun flower.

As 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 a page.

much like this: http://sower.com.au/demo/accordion.html
if you click on the "earth" link when testing the menu you will see what i mean by: showing its child pages until it gets down to the links.

my problem is doing the links as a circle for each sub menu and having the last link shown in the middle of the sun flower so that the user can get back to the parent level:

This is an example:
http://christophersowerby.com/example.pptx

Please can any one give me a hand?

i discovered that my js fiddle is not working in IE9  http://jsfiddle.net/b77Lf/24/
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
  • 3
4 Comments
 
LVL 1

Author Comment

by:helpchrisplz
ID: 39773599
can any one help? please :X
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 39773877
build all gallery, hide all but not current dropdow
on clik display the new one

Check this : http://jsfiddle.net/dXB37/

<div id="navcontain">
<nav>
    <ul class="gallery" id="dropdown0">
        <li class="lvl1" data-sub="dropdown1"><a href="#">Mobile Database Acquisition</a></li>
        <li class="lvl1" data-sub="dropdown2"><a href="#">Mobile Billing Solutions</a></li>
        <li class="lvl1" data-sub="dropdown3"><a href="#">Mobile Advertising</a></li>
        <li class="lvl1" data-sub="dropdown4"><a href="#">Mobile Web</a></li>
        <li class="lvl1" data-sub="dropdown5"><a href="#">Loyalty</a></li>
        <li class="lvl1" data-sub="dropdown6"><a href="#">Creative Design</a></li>        
        <li class="lvl1" data-sub="dropdown7"><a>drop down link</a></li> 
    </ul>
    <ul class="gallery" id="dropdown1" data-parent="dropdown0">
        <li><a href="#">second lvl dd1 links 1</a></li>
        <li><a href="#">second lvl dd1 links 2</a></li>  
        <li><a href="#">second lvl dd1 links 3</a></li>  
        <li><a href="#">second lvl dd1 links 4</a></li>  
    </ul>
    <ul class="gallery" id="dropdown2" data-parent="dropdown0">
        <li><a href="#">second lvl dd2 links 1</a></li>           
        <li><a href="#">second lvl dd2 links 2</a></li>  
        <li><a href="#">second lvl dd2 links 3</a></li>  
        <li><a href="#">second lvl dd2 links 4</a></li>  
    </ul>
    <ul class="gallery" id="dropdown3" data-parent="dropdown0">
        <li><a href="#">second lvl dd3 links 1</a></li>           
        <li><a href="#">second lvl dd3 links 2</a></li>  
        <li><a href="#">second lvl dd3 links 3</a></li>  
        <li><a href="#">second lvl dd3 links 4</a></li>  
    </ul>
    <ul class="gallery" id="dropdown4" data-parent="dropdown0">
        <li><a href="#">second lvl dd4 links 1</a></li>           
        <li><a href="#">second lvl dd4 links 2</a></li>  
        <li><a href="#">second lvl dd4 links 3</a></li>  
        <li><a href="#">second lvl dd4 links 4</a></li>  
    </ul>
    <ul class="gallery" id="dropdown5" data-parent="dropdown0">
        <li><a href="#">second lvl dd5 links 1</a></li>           
        <li><a href="#">second lvl dd5 links 2</a></li>  
        <li><a href="#">second lvl dd5 links 3</a></li>  
        <li><a href="#">second lvl dd5 links 4</a></li>  
    </ul>
    <ul class="gallery" id="dropdown6" data-parent="dropdown0">
        <li><a href="#">second lvl dd6 links 1</a></li>           
        <li><a href="#">second lvl dd6 links 2</a></li>  
        <li><a href="#">second lvl dd6 links 3</a></li>  
        <li><a href="#">second lvl dd6 links 4</a></li>  
    </ul>
    <ul class="gallery" id="dropdown7" data-parent="dropdown0">
        <li><a href="#">second lvl dd7 links 1</a></li>           
        <li><a href="#">second lvl dd7 links 2</a></li>  
        <li><a href="#">second lvl dd7 links 3</a></li>  
        <li><a href="#">second lvl dd7 links 4</a></li>  
    </ul>
    <div class="current"></div>
</nav>
</div>

Open in new window


jQuery(function($) {
    
    $('.gallery').extremes({ diameter: 100 }).not(":eq(0)").hide();

    $(".gallery a").click(function(evt) {
        evt.preventDefault();

        var $gallery = $(this).closest(".gallery");
        
        var textCurrent = $(this).text();
        $(".current").text(textCurrent);
        $(".current").data("parent", $gallery.attr("id"));

        var newDropdownToDisplay = "#" + $(this).parent().data("sub");
        $gallery.hide();
        $(newDropdownToDisplay).show();
        
        
    });

    $(".current").click(function(evt) {
        var $parentGallery = $("#" + $(this).data("parent"));
        $(".gallery:visible").hide();
        $parentGallery.show();
        $(this).fadeOut(function() {
            var w = $(".gallery:visible").width();
            var h = $(".gallery:visible").height();
            $(this).css({
                width:w,
                height:h,
                "margin-top":-h/2,
                "margin-left":-w/2
            }).fadeIn();
        });
    });
    
});

Open in new window

0
 
LVL 1

Author Closing Comment

by:helpchrisplz
ID: 39774014
hi. thanks for your help.

That is really cool what you have done.

i have tried adding a third sub level and its working.
http://jsfiddle.net/dXB37/4/

i have some other questions relating to this menu but i will open another question now as you have helped a lot already and i think that you have dealt with the first question.

i will post the url in the next comment.
0

Featured Post

Instantly Create Instructional Tutorials

Contextual Guidance at the moment of need helps your employees adopt to new software or processes instantly. Boost knowledge retention and employee engagement step-by-step with one easy solution.

Question has a verified solution.

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

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
This article discusses how to create an extensible mechanism for linked drop downs.
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

626 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