Posted By

ryarwood on 01/30/12


Tagged

menu jquery pulldown jnice


Versions (?)

jQuery jNice Example


 / Published in: HTML
 

  1. <style type="text/css">
  2. /* -------------
  3. * Selects
  4. * ------------- */
  5. .jNiceWrapper select {border:none;margin:0;padding:0;}
  6.  
  7. .jNiceSelectWrapper {
  8. width: 179px !important;
  9. height: 30px !important;
  10. left:0px;
  11. top:0px;
  12. z-index:3;
  13. position:absolute;
  14. background: url(http://70.32.85.132/images/elements/pulldown.gif) no-repeat left top;
  15. font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
  16. font-size: 12px;/* Resize Font*/
  17. padding-left: 5px;
  18. }
  19.  
  20. .jNiceWrapper iframe {position:absolute;z-index:1;width:100%;left:0px;top:0px;}
  21.  
  22. .jNiceSelectWrapper .jNiceSelectText {
  23. height: 30px;
  24. line-height: 30px;
  25. padding: 0px 0px 0px 0px;
  26. overflow:hidden;float:none;position:absolute;z-index:100;
  27. }
  28.  
  29. .jNiceSelectWrapper ul {
  30. top: 30px;
  31. background-color: #FFF;
  32. border: solid 1px #CCC;
  33. height: 135px;
  34. position:absolute;
  35. left:0px;
  36. list-style:none;
  37. display: none;
  38. margin:0;
  39. padding:0;
  40. overflow-y:auto;
  41. z-index:100;
  42. width: 184px;
  43. }
  44.  
  45. .jNiceSelectWrapper li, .jNiceSelectWrapper ul {
  46. list-style: none;
  47. background-image: none;
  48. margin: 0px 0px 0px 0px;
  49. padding: 0px 0px 0px 0px;
  50. }
  51.  
  52. .jNiceSelectWrapper ul a {
  53. color:#716965;
  54. background-color: #FFF;
  55. font-size: 12px;
  56. font-family: Arial, Helvetica, sans-serif;
  57. display:block;padding:3px;text-decoration:none;
  58. }
  59.  
  60. .jNiceSelectWrapper ul a:hover { background:#e2e2e2; }
  61. .jNiceSelectWrapper ul a.selected {background: #e2e2e2;}
  62.  
  63. .jNiceFocus { border: dotted 1px #666666; }
  64.  
  65. .jNiceHidden {opacity:0;z-index:-1;position:relative;}
  66. .jNiceWrapper {position:relative;vertical-align:top;}
  67. .jNiceWrapper input {outline:none;moz-outline:none;}
  68. <script type="text/javascript" src="/includes/js/jquery.jNice.js"></script>
  69.  
  70.  
  71. <form action="void.php" method="post" name="communityForm" id="communityForm" class="jNice">
  72. <div style="width: 184px; height: 30px; padding-bottom: 10px;">
  73. <select name="communityPull" id="communityPull" style="width: 184px;">
  74. <option value="http://www.lyoncommunities.com/communities/">Select A Community</option>
  75. <option value="http://www.lyoncommunities.com/communities/welcome/1900-ocean">1900 Ocean</option>
  76. <option value="http://www.lyoncommunities.com/communities/welcome/shadowcreek">ShadowCreek</option>
  77. <option value="http://www.lyoncommunities.com/communities/welcome/st-claire">St. Claire</option>
  78. <option value="http://www.lyoncommunities.com/communities/welcome/stoneridge">Stoneridge</option>
  79. <option value="http://www.lyoncommunities.com/communities/welcome/trabuco-highlands">Trabuco Highlands</option>
  80. <option value="http://www.lyoncommunities.com/communities/welcome/villa-venetia">Villa Venetia</option>
  81. <option value="http://www.lyoncommunities.com/communities/welcome/the-vineyards">The Vineyards</option>
  82. <option value="http://www.lyoncommunities.com/communities/welcome/water-terrace">Water Terrace</option>
  83. </select>
  84. </div>
  85. <div style="width: 184px; height: 30px; padding-bottom: 10px;">
  86. <select name="statePull" id="statePull" style="width: 184px;">
  87. <option value="http://www.lyoncommunities.com/communities/">Select A Region</option>
  88. <option value="http://www.lyoncommunities.com/communities/socal-orangecounty">So. Cal. - Orange County</option>
  89. <option value="http://www.lyoncommunities.com/communities/socal-losangeles/">So. Cal. - Los Angeles</option>
  90. <option value="http://www.lyoncommunities.com/communities/socal-sandiego/">So. Cal. - San Diego</option>
  91. <option value="http://www.lyoncommunities.com/communities/central-california/">Central California - Coastal</option>
  92. <option value="http://www.lyoncommunities.com/communities/nocal-east-bay/">No. Cal. - East Bay</option>
  93. <option value="http://www.lyoncommunities.com/communities/nocal-sacramento/">No. Cal. - Sacramento County</option>
  94. <option value="http://www.lyoncommunities.com/communities/nocal-santa-clara/">No. Cal. - Santa Clara County</option>
  95. <option value="http://www.lyoncommunities.com/communities/nocal-sonoma/">No. Cal. - Sonoma County</option>
  96. <option value="http://www.lyoncommunities.com/communities/colorado/">Colorado</option>
  97. <option value="http://www.lyoncommunities.com/communities/florida/">Florida</option>
  98. <option value="http://www.lyoncommunities.com/communities/georgia/">Georgia</option>
  99. </select>
  100. </div>
  101. </form>

Report this snippet  

You need to login to post a comment.