Solved

jquery nav menu 360 degree and add submenu

Posted on 2014-01-10
4
408 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

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Suggested Solutions

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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)

758 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now