Solved

jquery nav menu 360 degree and add submenu

Posted on 2014-01-10
4
412 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
  • 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
 
LVL 1

Author Comment

by:helpchrisplz
ID: 39774039
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

Suggested Solutions

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to dynamically set the form action using jQuery.
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)

777 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