Dropdown List In A Page - Question | JoomShaper
🎃 Halloween Sale is Live! Get 35% OFF on all plans. Sale ends soon! Get Offer

Dropdown List In A Page

H

Hakunamatata67

SP Page Builder 3 months ago

Hello

how can I add a dropdown list in a page I created? Like a menu but INSIDE a page. Navigation addon doesn't have a dropdown option.

Here is an example of what I would like:

0
5 Answers
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 3 months ago #197077

It's beyond support, but ...

Here's a complete example of a dropdown list using HTML and CSS. Hovering over the button displays a list of options.

drop_2025.gif

Custom CSS (must be used in Page Settings > Custom CSS) :

    .dropdown {
      position: relative;
      display: inline-block;
    }

    .dropdown-button {
      padding: 10px 20px;
      font-size: 16px;
      background-color: #3498db;
      color: white;
      border: none;
      cursor: pointer;
      border-radius: 4px;
    }

    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
    }

    .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
    }

    .dropdown-content a:hover {
      background-color: #f1f1f1;
    }

    .dropdown:hover .dropdown-content {
      display: block;
    }

    .dropdown:hover .dropdown-button {
      background-color: #2980b9;
    }

HTML Part - use it inside Raw HTML addon

<h3>Dropdown Menu Example</h3>
<div class="dropdown">
  <button class="dropdown-button">Select Option</button>
  <div class="dropdown-content">
    <a href="/link1">Option 1</a>
    <a href="/link2">Option 2</a>
    <a href="/link3">Option 3</a>
  </div>
</div>
1
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 3 months ago #197076

Hi,

find a Menu module that allows that, and then use it in Module position or in Module addon.

Make research on JED or ask French Joomla Community for suggestions.


In theory even core Menu module or HTML code in Raw HTML addon can be used for that purpose. But it's beyond typical support here.

0
H
Hakunamatata67
Accepted Answer
3 months ago #197155

Paul, I have one more question: is it possible to add this menu in a blog list page?

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 3 months ago #197183

You can use it as module, for example, SPPB module in right or left position.

But then Custom CSS must be added to Template Options > Custom Code > Custom CSS

1
H
Hakunamatata67
Accepted Answer
3 months ago #197079

Wow thank you Paul. I really appreciate it even if my question was beyond Joomshaper field

0