Skip navigation
JonnyDL
JonnyDL
Currently Being Moderated

Help with Menu Effect:Jquery

Jun 23, 2012 9:55 AM

I'm not sure if this is the correct place for this? I'm creating a menu that I'm looking to animate

What I would like it to do is when I select the anchor, Jquery will rotate the image.

here is one of the menu items:

 

<div class='menu_button'>

  <div class='menu_logo' id='contacts' >

<img src='Images/LogoMenu.png?v=1'/></div><a data-file="contact_us.html?v=1" >Contacts</a>

                                        </div>

 

The jquery will get the attr of the data-file, and then use that to load the page via .load().

 

          $('.menu_button a').on('click', function(){

                    $('.menu_button a').removeClass('selected');

                    $(this).addClass('selected');

                    changePage($(this).attr('data-file'));

 

          })

 

I need to find a way to grab the parent of the anchors divs Id based on the selected anchor so I can use it to rototate the image. I've tried using ancestors, but I'm not familular with there use, so no sucess.

Can anybody give me some help

344 Views   1 Reply   Latest reply: Nancy O., Jun 24, 2012 12:32 PM
 
Replies
  • Nancy O.
    Currently Being Moderated
    1. Nancy O.,
    Jun 24, 2012 12:32 PM   in reply to JonnyDL
    Report

    You can use CSS transitions along with a little jQuery to toggle classes.

    Live demo:

    http://alt-web.com/TEST/CSSTransitions.html

     

    The code:

     

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Transitions</title>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">
</script>

<style type="text/css">
body {
    width: 900px;
    margin:100px auto;
}

ul#menu {
    list-style:none;
    margin:0;
    padding:0;
    }

#menu li a {
    /**list menu styles**/
    list-style:none;
    text-decoration:none;
    text-align:center;
    font-size: 55px;
    font-weight:bold;
    color:#FFF;
    background-color: #900;
    width: auto;
    margin: 5px;
    padding:0 8px; 
    display:block;
    float:left;
    text-shadow: 3px 3px 5px #000;
    /**CSS Transitions**/
    -webkit-transition:all 1s ease-in;
    -moz-transition:all 1s ease-in;    
    -ms-transition:all 1s ease-in;    
    -o-transition:all 1s ease-in;
    transition:all 1s ease-in;        
}

#menu li.active a{
    outline:none;
    background-color: #000; 
    color: #FC0;
/**transform for various browsers**/
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform:rotate(90deg);
/**for IE**/
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}

/**clear floats**/
#menu:after {
    content: ".";
    height:0;
    display:block;
    visibility:hidden;
    clear:left;
}
</style>
</head>
<body>
<ul id="menu">
<li><a href="#">&#9658;</a></li>
<li><a href="#">&#9658;</a></li>
<li><a href="#">&#9658;</a></li>
<li><a href="#">&#9658;</a></li>
</ul>

<!--Toggle classes with jQuery-->
<script type="text/javascript">
$(document).ready(function() {
$("#menu li").click(function() {
    $(this).toggleClass('active').siblings().removeClass('active');
  });
});
</script>

</body>
</html>

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points