Don't like ads? PRO users don't see any ads ;-)
Public Pastes
Guest

Untitled

By: a guest on May 20th, 2012  |  syntax: None  |  size: 5.08 KB  |  hits: 18  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. How to create this drop down box
  2. <div id="content">CONTENT</div>
  3. <div id="bottom"></div>
  4.        
  5. #content {
  6. width: 400px;
  7. border-left: 10px solid #FA802F;
  8. border-right: 10px solid #FA802F;
  9. text-align: center;
  10. padding: 100px 0px 100px 0px;
  11. display: none;
  12. }
  13.  
  14. #bottom{
  15. width: 420px;
  16. height: 100px;
  17.  
  18. background-color: #FA802F;
  19. -webkit-border-bottom-left-radius: 50px;
  20. -moz-border-bottom-left-radius: 50px;
  21. border-bottom-left-radius: 100px;
  22.  
  23. -webkit-border-bottom-right-radius: 50px;
  24. -moz-border-bottom-right-radius: 50px;
  25. border-bottom-right-radius: 100px;  
  26. }
  27.        
  28. $('#bottom').toggle(
  29.  
  30. function() {
  31.     $('#content').slideDown();
  32. }, function() {
  33.     $('#content').slideUp();
  34. });
  35.        
  36. /* CSS */
  37. #dropDown {
  38.   background: url(menuBottom.png) no-repeat bottom;
  39.   padding-bottom: 40px; /* adjust based on the height of the bottom image */
  40. }
  41. #dropDown ul {
  42.   border-color: orange;
  43.   border-width: 0 5px;      
  44. }
  45.  
  46. <!-- HTML -->
  47. <nav id="dropDown">
  48.   <ul>
  49.     ...
  50.   </ul>
  51. </nav>
  52.        
  53. // When the page has loaded
  54. $(document).ready(function() {
  55.   // Hide the drop-down menu
  56.   $('#dropDown ul').hide();
  57.  
  58.   $('#dropDown').hover(function() {
  59.     // Show on mouse over
  60.     $('#dropDown ul').show();
  61.   }, function() {
  62.     // Hide on mouse out
  63.     $('#dropDown ul').hide();
  64.   });
  65. });
  66.        
  67. <style type='text/css' media='screen'>
  68.     #wrapper   { position:relative; width:800px; height:800px; margin:0 auto; display:block; z-index:1; }
  69.     #docHeader { position:relative; margin:0; width:100%; height:60px; overflow:hidden; background-color:green;
  70.         color:orange; font-size:36px; text-align:center; line-height:60px; vertical-align:middle; z-index:2; }
  71.  
  72.     .nav {
  73.         cursor:pointer;
  74.     }
  75.     .navContent {
  76.         width:172px;
  77.         height:0px;
  78.         overflow:hidden;
  79.         background: transparent url(content.png) repeat-y top left;
  80.     }
  81.     .navContent span {
  82.         display:block;
  83.         margin-left:8px;
  84.         line-height:22px;
  85.         font-size:14px;
  86.         text-align:left;
  87.     }
  88.     .navTitle {
  89.         width:172px;
  90.         height:35px;
  91.         text-align:center;
  92.         line-height:35px;
  93.         vertical-align:middle;
  94.         color:green;
  95.         font-size:24px;
  96.         background: transparent url(bottom.png) no-repeat top left;
  97.     }
  98.  
  99.     #docBody { position:relative; margin:0; width:100%; height:100%; overflow:auto; z-index:2; }
  100.  
  101.     #content { position:absolute; top:0; left:0; width:100%; min-height:600px; background:transparent; overflow:auto; z-index:3; }
  102.  
  103. </style>
  104.        
  105. <script type='text/javascript' src='jquery-1.7.1.min.js'></script>
  106. <script type='text/javascript'>
  107.  
  108.     jQuery( function () {
  109.  
  110.         $('div.nav').on( {
  111.             mouseenter : function () {
  112.                 var $this = $(this);
  113.                 $this.addClass('mouseHasEntered');
  114.                 if ($this.hasClass('mouseHasLeft')) $this.removeClass('mouseHasLeft');
  115.                 setTimeout( function () {
  116.                     if ($this.hasClass('mouseHasEntered')) {
  117.                         var iCount = $this.find('span').length * 24;
  118.                         $this.find('.navContent').animate( { 'height' : iCount+'px' },1000 );
  119.                     }
  120.                 },100);
  121.             },
  122.             mouseleave : function () {
  123.                 var $this = $(this);
  124.                 $this.addClass('mouseHasLeft');
  125.                 if ($this.hasClass('mouseHasEntered')) $this.removeClass('mouseHasEntered');
  126.                 setTimeout( function () {
  127.                     if ($this.hasClass('mouseHasLeft')) {
  128.                         $this.find('.navContent').animate( { 'height' : '0px' },1000 );
  129.                     }
  130.                 },200);
  131.             }
  132.         });
  133.  
  134.     });
  135.  
  136.     $(document).ready( function () {
  137.         setTimeout( function () { /// show the spinning ajax loader gif
  138.             $('#content').load('roundMenu.content.html');
  139.         },2000);
  140.     });
  141.  
  142. </script>
  143.        
  144. <div id='wrapper' >
  145.    <div id='docHeader' >The Header</div>
  146.  
  147.    <div class='nav' style='position:absolute; top:60px; left:0; z-index:5; ' >
  148.     <div class='navContent' >
  149.      <span>Go here</span>
  150.      <span>Go there</span>
  151.     </div>
  152.     <div class='navTitle' >OPTIONS I</div>
  153.    </div>
  154.  
  155.    <div class='nav' style='position:absolute; top:60px; left:209px; z-index:5; ' >
  156.     <div class='navContent' >
  157.      <span>Go here 2</span>
  158.      <span>Go there 2 </span>
  159.      <span>Go ever there </span>
  160.     </div>
  161.     <div class='navTitle' >OPTIONS II</div>
  162.    </div>
  163.  
  164.    <div class='nav' style='position:absolute; top:60px; left:418px; z-index:5; ' >
  165.     <div class='navContent' >
  166.      <span>Go here 3</span>
  167.      <span>Go there 3 </span>
  168.      <span>Go ever there 2</span>
  169.     </div>
  170.     <div class='navTitle' >OPTIONS III</div>
  171.    </div>
  172.  
  173.    <div class='nav' style='position:absolute; top:60px; left:628px; z-index:5; ' >
  174.     <div class='navContent' >
  175.      <span>Go here 4</span>
  176.      <span>Go there 4 </span>
  177.      <span>Go ever there 3</span>
  178.      <span>Why not complicate</span>
  179.     </div>
  180.     <div class='navTitle' >OPTIONS IV</div>
  181.    </div>
  182.  
  183.    <div id='docBody' >
  184.  
  185.     <div id='content' >
  186.      <img src='ajax-Loader.gif' border='0' alt='0' style='position:relative; margin:45% 45%; ' />
  187.     </div>
  188.  
  189.    </div>
  190.  
  191.   </div>
create a new version of this paste RAW Paste Data