JQuery Dropdown Menu Styling in Drupal
Submitted by David Lohmeyer on October 8, 2010 - 10:14am
DrupalSN posted a nice guide to styling exposed View dropdown menus with a JQuery plugin and some stylish CSS. The guide there worked perfectly except for the step where he hid the submit button. I changed this:
.views-exposed-form label, .jquery_dropdown_page .views-exposed-form .form-submit { display: none; }
to this:
.views-exposed-form label, .views-exposed-widget .form-submit { display: none; }
Also, I wanted a fancy hover effect over the dropdown menu itself, so I added the following style and created a hover version of the background image for the dropdown menu:
div.jquery_dropdown_header:hover { background:url(images/jquery_dropdown-header-hover.png) left top no-repeat; }
Why the module? The module turns your select box into an unordered list which is much easier to style. My only gripe is that it fails to show the "any" option on the exposed dropdown once you navigate away from it (it shows up fine on the initial page load).
Related Posts
Monthly archive
- April 2013 (2)
- February 2013 (1)
- January 2013 (1)
- October 2012 (1)
- August 2012 (2)
- July 2012 (1)
- June 2012 (5)
- May 2012 (3)
- April 2012 (2)
- March 2012 (1)