CODEWITHSUNDEEP
javascripthtmlcss
Mr-Kimbles
Mr-Kimbles

Reputation: 83

Making a drop down menu containing radio buttons

So here is the concept I am wanting to achieve: sketch

For those who are unable to view the image, I have a drop-down menu (titled "Presets") containing a list of radio buttons each representing a different preset where upon hovering/selecting on a radio button, the preset corresponding with that radio button is previewed (on hovering over the button) and implemented (on selecting the radio button) on a different div element.

<nav id="topNav">
<ul style="list-style: none;">
<li>
  <a href="#" title="Nav Link 2">presets</a>
  <ul style="list-style: none;">
    <li><input type="radio" class="rb" id="pr1" name="preset" value="1" checked="checked">Preset 1</li>
    <li><input type="radio" class="rb" id="pr2" name="preset" value="2">Preset 2</li>
    <li><input type="radio" class="rb" id="pr3" name="preset" value="3">Preset 3</li>
    <li><input type="radio" class="rb" id="pr4" name="preset" value="4">Preset 4</li>
  </ul>
</li>


      <div id="a"></div>

Here is my attempt at executing this. There are a few things that I am having trouble troubleshooting (so I need troubleshooting for myself before I can troubleshoot my problems):

  1. The menu seems to drop down by default everytime I refresh the page. Is there a way I can have the menu stay compacted upon refreshing?

  2. From my fiddle, you will have noticed on my CSS that I am trying to give my radio buttons hover characteristics (as a way of previewing their presents on the div element) but to no avail. I figure I will need to use scripts for that, right? Specifically, when the mouse cursor hovers over a preset, the div element will momentarily express the details of that preset (in this case, a different color) and when the preset is selected, the div element will change its current color to that of the selected preset.

  3. I plan on expanding on this by having the user select a preset for the div element and send the form to save it on a database. Given the functionalities I want, will I have trouble pulling this off in terms of browser compatibility?

Upvotes: 0

Views: 3634

Answers (1)

Nadir Muzaffar
Nadir Muzaffar

Reputation: 4842

  1. You can set display:none on the ul element you're using as the dropdown.
  2. Most practical approach for this would be to add mouseenter and mouseleave event listeners to each of the li items. On mouseenter you set the preview div's color to the one associated with li element on which the event took place. On mouseleave you would set it back to the original color.
  3. Shouldn't be a problem for most browsers.

Here's a modified version of your fiddle demonstrating the desired behavior.

Upvotes: 1

Related Questions