Blogspot Vision: CSS3 Garage Door Horizontal Menu

Saturday, March 12, 2011

CSS3 Garage Door Horizontal Menu

CSS Code Snippet
This section code should be inserted before the closing head tag.

/* Modernizer Enabled */
.csstransitions #garagedoor li {
 -webkit-transition: background-position 0.6s ease;
 -moz-transition: background-position 0.6s ease;
 -o-transition-property: background-position 0.6s ease;
}
.csstransitions #garagedoor li:hover {
 background-position: 0 -100px !important;
}

#garagedoor li#shutter1 {
 background: url(http://www.blogspotvision.info/css/garage-door-menu/images/shutter-africanplains.jpg) 0 0 no-repeat; 
}
#garagedoor li#shutter2 {
 background: url(http://www.blogspotvision.info/css/garage-door-menu/images/shutter-reptiles.jpg) 0 0 no-repeat; 
}
#garagedoor li#shutter3 {
 background: url(http://www.blogspotvision.info/css/garage-door-menu/images/shutter-aviary.jpg) 0 0 no-repeat; 
}
#garagedoor li#shutter4 {
 background: url(http://www.blogspotvision.info/css/garage-door-menu/images/shutter-arcticzone.jpg) 0 0 no-repeat; 
}
#garagedoor a {
   width: 200px;
   height: 100px;
   display: block;
   background: url(http://www.blogspotvision.info/css/garage-door-menu/images/window.png) no-repeat bottom center;
   text-indent: -9999px;
}
</style>

HTML Code Snippet
This section code should be inserted where you want the output to appear.

<ul id='garagedoor'> 
  <li id='shutter1'><a href='#1'>Link 1</a></li> 
  <li id='shutter2'><a href='#2'>Link 2</a></li> 
  <li id='shutter3'><a href='#3'>Link 3</a></li> 
  <li id='shutter4'><a href='#4'>Link 4</a></li> 
 </ul> 
  
 <script> 
 
  var jQueryScriptOutputted = false;
  
  function initJQuery() {
      
      if (typeof(jQuery) == 'undefined') {
      
          if (!jQueryScriptOutputted) {
              jQueryScriptOutputted = true;
              
              // Primitive way of loading scripts (no library yet)
              document.write("<scr" + "ipt src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js\"></scr" + "ipt>");
          }
          setTimeout("initJQuery()", 50);
          
      } else {
       
       // jQuery way of loading scripts
       $.getScript('js/jquery.backgroundPosition.js', function() {
        
        // Just for demo
        $("h2").text('This Browser is using a jQuery fallback for this effect.');
        
        $("html").removeClass("csstransitions");
           
              // Set CSS in Firefox (Required to use the backgroundPosition js)
     $('#shutter1').css({backgroundPosition: '0px 0px'});
     $('#shutter2').css({backgroundPosition: '0px 0px'});
     $('#shutter3').css({backgroundPosition: '0px 0px'});
     $('#shutter4').css({backgroundPosition: '0px 0px'});
  
     // Animate the Shutter  
     $("#garagedoor a").hover(function() { 
           $(this).parent().stop().animate({backgroundPosition: '(0px -100px)'}, 500);
         }, function() {
           $(this).parent().stop().animate({backgroundPosition: '(0px 0px)'}, 500);
     });
     
       });
  
      }
              
  }
  
  if (!Modernizr.csstransitions) {
   initJQuery();
  }
 </script>

JavaScript Code Snippet
This section code should be inserted before the closing head tag.

1 comment:

AnonymousApril 05, 2013
The type of garage door that you will choose will also determine the security that you can get. In some cases, you may find your automatic garage doors open upon going home at the end of the day because the transmitter or other parts fail to function correctly.

Roll Down Gates Queens
ReplyDelete
Replies

Add comment