In a recent project that I did, one of the tasks was to display a select box (combo box) that shows items from a WordPress custom menu and styled to match the website’s overall look and that it looks the same in all major browsers.
Screenshots of output:
Populating list box with custom menu items
I used Dropdown Menus plugin for this. This plugin adds a widget from which custom menu can be selected.
Styling the select box
I followed the instructions on SelectBoxIt’s homepage and put together a HTML file having the styled select box. If you are interested, it can be downloaded from here: Styled Select Box using jQuery static HTML page (127)
The next thing was to get this running in WordPress.
Here is the code I added to child theme’s functions.php:
I had to make a few changes (as compared the one in static HTML page) in jquery.selectBoxIt.css.
These are some of the things to note in jquery.selectBoxIt.css:
- .selectboxit – Set the height to that of list box’s (in closed state) height. Set the background to your desired image of the list box in closed state.
- .selectboxit, .selectboxit-options – Set the width to that of the list box’s closed state background image.
- ul.selectboxit-options – Set the background of the dropdown here. Set “list-style-image” to “none” to get rid of bullet images (if coming from child theme’s style.css) for the list items in IE 7.
- .selectboxit-options li a – This selector and a few others won’t be present by default. I have added them. This particular one is needed because we want the hover to work for the full width of list item and not just the hyperlinked list item text.
- .selectboxit-options li a:hover – Set background and text color of list items on hover.
Hope this has been helpful and will save some time and research for anyone that is looking to do the same. Let me know if you have any questions.