1 Reply Latest reply on Jun 24, 2012 12:32 PM by Nancy OShea

    Help with Menu Effect:Jquery

    JonnyDL Level 1

      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

        • 1. Re: Help with Menu Effect:Jquery
          Nancy OShea Adobe Community Professional & MVP

          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/