Need to apply animation for menu

OGSan
OGSan used Ask the Experts™
on
I'm tasked with creating a page that will display a circular menu that requires a bit of animation...and I'm not sure how best to do this.
I've attached four images below that show how the menu should work:
When a quadrant of the menu is selected (e.g., Recruitment)...
...the other three quadrants fade away;
Selected quadrant moves to the associated corner;
Corresponding links (for Recruitment) appear for selection.
full_menuRecruitment selectedSelected quadrant moves out of the waysub-menu links appear for selectionNote that each quadrant, when selected, will "move" to its appropriate corner (they won't all move to the same spot illustrated above).
Apologies in advance, but I'm just an old ASP programmer, but I'm willing to learn the new stuff...as long as it's explained to me.  This is for internal, company use only, where we've standardized on IE8 (but there are some "renegade" FF users out there).
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Top Expert 2015
Commented:
Well, that sounded like fun so I took a shot at it using jquery. Tested in IE8 and IE8 compatibility mode. I'm still learning jquery, so a jquery expert may be able to streamline it some more.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <style type="text/css">
    * {margin:0 auto;padding:0}
    body {text-align:center}
    #menuContainer {position:relative;width:400px;height:400px;border:1px solid red;background-color:transparent}
    div.quadrant {position:absolute;width:100px;height:100px;overflow:hidden;color:Blue}
    div.one {left:100px;top:100px;background:url(Tools/images/roundMenu.jpg) top left no-repeat;line-height:130px}
    div.two {left:200px;top:100px;background:url(Tools/images/roundMenu.jpg) top right no-repeat;line-height:130px}
    div.three {left:100px;top:200px;background:url(Tools/images/roundMenu.jpg) bottom left no-repeat;line-height:70px}
    div.four {left:200px;top:200px;background:url(Tools/images/roundMenu.jpg) bottom right no-repeat;line-height:70px}
    ul.subMenu {position:absolute;top:100px;left:100px;width:200px;height:200px;list-style:none;display:none}
    ul.one
    </style>
    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $('div.one').click(function(){
            if($(this).position().left == 100){
                $('div.two, div.three, div.four').fadeOut('slow');
                $(this).animate({
                    left: 0,
                    top: 0
                }, 'slow', function(){
                    $('ul.one').fadeIn().css('display','block');
                });
            }else{
                $('div.two, div.three, div.four').fadeIn('slow');
                $('ul.one').css('display','none');
                $(this).animate({
                    left: 100,
                    top: 100
                }, 'slow');
            }
        });
        $('div.two').click(function(){
            if($(this).position().left == 200){
                $('div.one, div.three, div.four').fadeOut('slow');
                $(this).animate({
                    left: 300,
                    top: 0
                }, 'slow', function(){
                    $('ul.two').fadeIn().css('display','block');
                });
            }else{
                $('div.one, div.three, div.four').fadeIn('slow');
                $('ul.two').css('display','none');
                $(this).animate({
                    left: 200,
                    top: 100
                }, 'slow');
            }
        });
        $('div.three').click(function(){
            if($(this).position().left == 100){
                $('div.one, div.two, div.four').fadeOut('slow');
                $(this).animate({
                    left: 0,
                    top: 300
                }, 'slow', function(){
                    $('ul.three').fadeIn().css('display','block');
                });
            }else{
                $('div.one, div.two, div.four').fadeIn('slow');
                $('ul.three').css('display','none');
                $(this).animate({
                    left: 100,
                    top: 200
                }, 'slow');
            }
        });
        $('div.four').click(function(){
            if($(this).position().left == 200){
                $('div.one, div.two, div.three').fadeOut('slow');
                $(this).animate({
                    left: 300,
                    top: 300
                }, 'slow', function(){
                    $('ul.four').fadeIn().css('display','block');
                });
            }else{
                $('div.one, div.two, div.three').fadeIn('slow');
                $('ul.four').css('display','none');
                $(this).animate({
                    left: 200,
                    top: 200
                }, 'slow');
            }
        });
    });
    </script>
</head>
<body>
<div id="menuContainer">
    <div class="quadrant one">Menu One</div>
    <div class="quadrant two">Menu Two</div>
    <div class="quadrant three">Menu Three</div>
    <div class="quadrant four">Menu Four</div>
    <ul class="subMenu one">
        <li><a href="#">Menu 1, Item 1</a></li>
        <li><a href="#">Menu 1, Item 2</a></li>
        <li><a href="#">Menu 1, Item 3</a></li>
        <li><a href="#">Menu 1, Item 4</a></li>
        <li><a href="#">Menu 1, Item 5</a></li>
    </ul>
    <ul class="subMenu two">
        <li><a href="#">Menu 2, Item 1</a></li>
        <li><a href="#">Menu 2, Item 2</a></li>
        <li><a href="#">Menu 2, Item 3</a></li>
        <li><a href="#">Menu 2, Item 4</a></li>
        <li><a href="#">Menu 2, Item 5</a></li>
    </ul>
    <ul class="subMenu three">
        <li><a href="#">Menu 3, Item 1</a></li>
        <li><a href="#">Menu 3, Item 2</a></li>
        <li><a href="#">Menu 3, Item 3</a></li>
        <li><a href="#">Menu 3, Item 4</a></li>
        <li><a href="#">Menu 3, Item 5</a></li>
    </ul>
    <ul class="subMenu four">
        <li><a href="#">Menu 4, Item 1</a></li>
        <li><a href="#">Menu 4, Item 2</a></li>
        <li><a href="#">Menu 4, Item 3</a></li>
        <li><a href="#">Menu 4, Item 4</a></li>
        <li><a href="#">Menu 4, Item 5</a></li>
    </ul>
</div>
</body>
</html>

Open in new window

Round Menu background

Author

Commented:
Wow, tommyboy, that is amazing work!  I don't see how anyone could make this any smoother.  This gives me a new "toy" to play with!  Thank you for getting me off to a flying start on this project.  I'm so jazzed!
Jeff (aka OGSan)
Top Expert 2015

Commented:
No problem, it was good practice for me. Thanks for the points.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial