-
Posts
-
Is there a way to create in BoldGrid a drop down list of choices that will display when you hover over a button?
Hi Sheri-
Usually this type of design pattern, called a “Select Box,” is part of a form rather than a regular design element you’d add with the Post and Page Builder.
One exception is that you can accomplish this in your menus. Check out our detailed guide on using drop-down menus in WordPress.
Another common way to accomplish this is what’s known as an “Accordion,” an expanding block of text or links when clicked on. There are free plugins on the WordPress repository that you can use to create these, one of the most popular is the Accordion FAQ plugin.
Maybe if I describe my application it’d be more clear what I want. I looked at accordions and those don’t seem to accomplish what I’m looking for. I am a dog agility secretary (a rather small and specialized field) and due to changes because of COVID we now publish course maps for handlers the night before each days trial. There can be anywhere from 4 to 10 maps per day. Each is a pdf file that the handler will probably print before coming to the trial the next day. Instead of putting a list of clickable links on the trial page, like I do for all pre-trial documentation (there are only 6 pre-trial documents) I would like to have a button labeled “maps” that would display a drop down list of clickable links to all the maps. Some handlers are accessing this site on their phones since people travel to these events so I was trying to minimize the amount of scrolling a handler would have to do to get to the maps for the last day of the trial. A menu just didn’t seem appropriate for my needs and neither did an accordion but maybe I just lack the vision to see how what I want to do would fit either a menu or an accordion.
Hi Cheri-
I think what you’re envisioning would probably be best with a simple select component. Right now, there’s not an easy graphical way to do this, but if you wanted to you could add it with some simple HTML in the Text Editor. For example, this code would create a drop-down for your “Saturday Maps” section of the AAGKC page:
<select onchange="if (this.value) window.open(this.value)"> <option value="">Select Map:</option> <option value="/wp-content/uploads/2020/09/Master-Standard.pdf">M/X STD</option> <option value="/wp-content/uploads/2020/09/Master-Jumpers.pdf">M/X JWW</option> <option value="/wp-content/uploads/2020/09/Open-Standard.pdf">Open STD</option> <option value="/wp-content/uploads/2020/09/Open-Jumpers.pdf">Open JWW</option> <option value="/wp-content/uploads/2020/09/Novice-Standard.pdf">Novice STD</option> <option value="/wp-content/uploads/2020/09/Novice-Jumpers.pdf">Novice JWW</option> </select>
You can copy-and-paste this code and simply replace the URL’s with each day’s PDF’s. It will look similar to this (although these links won’t work):
- The topic ‘How to Create a Drop-Down List of Choices that Display on Hover?’ is closed to new replies.
