« 18 septembrie 2007
26 septembrie 2007 »

Menu orizontal cu CSS si jQuery 1.2.1

Pentru cei care lucreaza cu jQuery voi prezenta un meniu orizontal care poate fi extins usor folosind imagini sau stiluri sofisticate. Testat in IE 7.0, Firefox 2.0.0.6, Opera 9.22, Safari 3.0.3. Rezultatul il puteti vedea aici.

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="../jquery-1.2.1.pack.js"></script>
  4. <style href="text/css">
  5. body {
  6.         font-family: "Trebuchet MS";
  7.         font-size: 12px;
  8. }
  9. .item_level_one, .item_level_two {
  10.         float: left;
  11.         border: 1px solid red;
  12.         padding: 5px;
  13.         cursor: hand;
  14.         cursor: pointer;
  15. }
  16. .subitem {
  17.         float: left;
  18.         display: none;
  19.         padding: 1px;
  20.         cursor: hand;
  21.         cursor: pointer;
  22. }
  23. </style>
  24. </head>
  25.  
  26. <body>
  27.  
  28. <div>
  29.         <div style="clear: both; height: 20px">
  30.                 <div id="tab1" class="item_level_one">Item one</div>
  31.                 <div id="tab2" class="item_level_one">Item two</div>
  32.                 <div id="tab3" class="item_level_one">Item three</div>
  33.         </div>
  34.         <div style="height: 20px; clear: both">
  35.                 <div id="subtab1" class="subitem">
  36.                         <div class="item_level_two">SubItem one-one</div>
  37.                         <div class="item_level_two">SubItem one-two</div>
  38.                         <div class="item_level_two">SubItem one-three</div>
  39.                 </div>
  40.                 <div id="subtab2" class="subitem">
  41.                         <div class="item_level_two">SubItem two-one</div>
  42.                         <div class="item_level_two">SubItem two-two</div>
  43.                         <div class="item_level_two">SubItem two-three</div>
  44.                 </div>
  45.                 <div id="subtab3" class="subitem">
  46.                         <div class="item_level_two">SubItem three-one</div>
  47.                         <div class="item_level_two">SubItem three-two</div>
  48.                         <div class="item_level_two">SubItem three-three</div>
  49.                 </div>
  50.         </div>
  51. </div>
  52.  
  53. <script type="text/javascript">
  54. //<![CDATA[
  55. $(‘div.item_level_one’).hover(
  56.         function() {
  57.                 $(this).css("background-color", "#ff0000");
  58.                 $(‘div.item_level_one’).each(function(obj) {
  59.                         $(‘#sub’ + this.id).hide();
  60.                 });
  61.                 $(‘#sub’ + this.id).show();
  62.         },
  63.         function() {
  64.                 $(this).css("background-color", "#ffffff");
  65.         }
  66. );
  67. $(‘div.item_level_two’).hover(
  68.         function() {
  69.                 $(this).css("background-color", "#ffff00");
  70.         },
  71.         function() {
  72.                 $(this).css("background-color", "#ffffff");
  73.         }
  74. );
  75. //]]>
  76. </script>
  77.  
  78. </body>
  79. </html>

This entry was posted on Thursday, September 20th, 2007 at 9:15 pm and is filed under Jquery. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Leave a Reply