HomeHome  
  • WelcomeWelcome  
  • Events  
  • PublicationsPublications  
  • FAQFAQ  
  • SearchSearch  
  • MemberlistMemberlist  
  • UsergroupsUsergroups  
  • RegisterRegister  
  • Log inLog in  
  • You are not connected. Please login or register


    menu-deslizante-css-y-jquery

    avatar
    • ***


        Reputation : 2
        Registered on : 2012-05-02
        Posts : 33
      Demo


      Footer Begin :
      Code:
      <script type="text/javascript" src="http://www.marcofbb.com.ar/wp-content/uploads/2010/11/jquery-1.3.2.js"></script>
              <script type="text/javascript">
                  $(function() {
                      $('#navigation a').stop().animate({'marginLeft':'-85px'},1000);
       
                      $('#navigation > li').hover(
                          function () {
                              $('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
                          },
                          function () {
                              $('a',$(this)).stop().animate({'marginLeft':'-85px'},200);
                          }
                      );
                  });
              </script>
              <ul id="navigation">
                  <li class="home"><a href="" title="Home"></a></li>
                  <li class="about"><a href="" title="About"></a></li>
                  <li class="search"><a href="" title="Search"></a></li>
                  <li class="photos"><a href="" title="Photos"></a></li>
                  <li class="rssfeed"><a href="" title="Rss Feed"></a></li>
                  <li class="podcasts"><a href="" title="Podcasts"></a></li>
                  <li class="contact"><a href="" title="Contact"></a></li>
              </ul>

      Css :
      Code:
      ul#navigation {
      position: fixed;
      margin: 0px;
      padding: 0px;
      top: 10px;
      left: 0px;
      list-style: none;
      z-index: 999;
      }
      ul#navigation li {
      width: 100px;
      }
      ul#navigation li a {
      display: block;
      margin-left: -2px;
      width: 100px;
      height: 70px;
      background-color:#CFCFCF;
      background-repeat:no-repeat;
      background-position:center center;
      border:1px solid #AFAFAF;
      -moz-border-radius:0px 10px 10px 0px;
      -webkit-border-bottom-right-radius: 10px;
      -webkit-border-top-right-radius: 10px;
      -khtml-border-bottom-right-radius: 10px;
      -khtml-border-top-right-radius: 10px;
      /*-moz-box-shadow: 0px 4px 3px #000;
      -webkit-box-shadow: 0px 4px 3px #000;
      */
      opacity: 0.6;
      filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
      }
      ul#navigation .home a{
          background-image: url(http://tympanus.net/Tutorials/FixedNavigationTutorial/images/home.png);
      }
      ul#navigation .about a      {
          background-image: url(http://tympanus.net/Tutorials/FixedNavigationTutorial/images/id_card.png);
      }
      ul#navigation .search a      {
          background-image: url(http://tympanus.net/Tutorials/FixedNavigationTutorial/images/search.png);
      }
      ul#navigation .podcasts a      {
          background-image: url(http://tympanus.net/Tutorials/FixedNavigationTutorial/images/ipod.png);
      }
      ul#navigation .rssfeed a  {
          background-image: url(http://tympanus.net/Tutorials/FixedNavigationTutorial/images/rss.png);
      }
      ul#navigation .photos a    {
          background-image: url(http://tympanus.net/Tutorials/FixedNavigationTutorial/images/camera.png);
      }
      ul#navigation .contact a    {
          background-image: url(http://tympanus.net/Tutorials/FixedNavigationTutorial/images/mail.png);
      }

      http://www.marcofbb.com.ar/menu-deslizante-css-y-jquery/

      avatar
      • Veteran staff member

          Reputation : 1
          Registered on : 2012-04-27
          Posts : 61
        100% Working. Thank you for this :).

        avatar
        • Veteran staff member

            Reputation : 7
            Registered on : 2012-06-26
            Posts : 108
          Hello,

          Attention! This topic breaks the rules, because you're not allowed to (write the reasons).

          You have 48 hours to edit this topic or it will be locked and garbaged without any notice.


          YOUR BANNER HERE
          728x90
          DMCA.com Protection Status
          © PunBB | Contact | Report an abuse