Solved

jquery nav menu 360 degree and add submenu

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

Author Comment

by:helpchrisplz
ID: 39774039
0

Featured Post

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
close window in firefox 3 38
Javascript question 8 44
How does GeoJson relates to Leaflet and Mapbox? 4 50
Woo-commerce gallery not working properly 12 42
What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
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)

751 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