• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 421
  • Last Modified:

jquery nav menu 360 degree and add submenu

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
helpchrisplz
Asked:
helpchrisplz
  • 3
1 Solution
 
helpchrisplzAuthor Commented:
can any one help? please :X
0
 
leakim971PluritechnicianCommented:
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
 
helpchrisplzAuthor Commented:
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

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now