Template:Dropdown: Difference between revisions

← Older edit Newer edit →

VisualWikitext

Revision as of 04:13, 11 April 2025

Template documentation (for the above template, sometimes hidden or invisible)

adds a customizable dropdown menu like this one:

see w:c:dev:DropdownMenu for more information

Visit Template:Dropdown/doc to edit this text! (How does this work?)

@@ Line 1: / Line 1: @@
 <includeonly>
 <div style="position:relative;display:inline-block;">
-   <span style="background:#f2f2f2;padding:8px 12px;border:1px solid #ccc;border-radius:4px;cursor:pointer;user-select:none;display:inline-block;" onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'block' ? 'none' : 'block';">
+   <span style="background:#f9f9f9;padding:6px 10px;border:1px solid #ccc;border-radius:4px;cursor:pointer;display:inline-block;width:100%;box-sizing:border-box;" onclick="var m=this.nextElementSibling;m.style.display=(m.style.display==='block')?'none':'block';">
      {{{1}}} ▼
    </span>
-   <ul style="display:none;position:absolute;background:#fff;border:1px solid #aaa;border-radius:4px;min-width:160px;box-shadow:0 2px 8px rgba(0,0,0,0.2);margin:0;padding:0;list-style:none;z-index:1000;">
+   <ul style="display:none;position:absolute;left:0;top:100%;background:#fff;border:1px solid #aaa;border-radius:4px;width:100%;box-shadow:0 2px 6px rgba(0,0,0,0.15);margin:0;padding:0;list-style:none;z-index:99;">
-     {{#if:{{{2|}}}|<li style="padding:10px 14px;cursor:pointer;">{{{2}}}</li>}}
+     {{#if:{{{2|}}}|<li style="padding:8px 12px;cursor:pointer;">{{{2}}}</li>}}
-     {{#if:{{{3|}}}|<li style="padding:10px 14px;cursor:pointer;">{{{3}}}</li>}}
+     {{#if:{{{3|}}}|<li style="padding:8px 12px;cursor:pointer;">{{{3}}}</li>}}
-     {{#if:{{{4|}}}|<li style="padding:10px 14px;cursor:pointer;">{{{4}}}</li>}}
+     {{#if:{{{4|}}}|<li style="padding:8px 12px;cursor:pointer;">{{{4}}}</li>}}
-     {{#if:{{{5|}}}|<li style="padding:10px 14px;cursor:pointer;">{{{5}}}</li>}}
+     {{#if:{{{5|}}}|<li style="padding:8px 12px;cursor:pointer;">{{{5}}}</li>}}
-     {{#if:{{{6|}}}|<li style="padding:10px 14px;cursor:pointer;">{{{6}}}</li>}}
+     {{#if:{{{6|}}}|<li style="padding:8px 12px;cursor:pointer;">{{{6}}}</li>}}
-     {{#if:{{{7|}}}|<li style="padding:10px 14px;cursor:pointer;">{{{7}}}</li>}}
+     {{#if:{{{7|}}}|<li style="padding:8px 12px;cursor:pointer;">{{{7}}}</li>}}
-     {{#if:{{{8|}}}|<li style="padding:10px 14px;cursor:pointer;">{{{8}}}</li>}}
+     {{#if:{{{8|}}}|<li style="padding:8px 12px;cursor:pointer;">{{{8}}}</li>}}
-     {{#if:{{{9|}}}|<li style="padding:10px 14px;cursor:pointer;">{{{9}}}</li>}}
+     {{#if:{{{9|}}}|<li style="padding:8px 12px;cursor:pointer;">{{{9}}}</li>}}
-     {{#if:{{{10|}}}|<li style="padding:10px 14px;cursor:pointer;">{{{10}}}</li>}}
+     {{#if:{{{10|}}}|<li style="padding:8px 12px;cursor:pointer;">{{{10}}}</li>}}
-    {{#if:{{{11|}}}|<li style="padding:10px 14px;cursor:pointer;">{{{11}}}</li>}}
-    {{#if:{{{12|}}}|<li style="padding:10px 14px;cursor:pointer;">{{{12}}}</li>}}
-    {{#if:{{{13|}}}|<li style="padding:10px 14px;cursor:pointer;">{{{13}}}</li>}}
-    {{#if:{{{14|}}}|<li style="padding:10px 14px;cursor:pointer;">{{{14}}}</li>}}
-    {{#if:{{{15|}}}|<li style="padding:10px 14px;cursor:pointer;">{{{15}}}</li>}}
-    {{#if:{{{16|}}}|<li style="padding:10px 14px;cursor:pointer;">{{{16}}}</li>}}
-    {{#if:{{{17|}}}|<li style="padding:10px 14px;cursor:pointer;">{{{17}}}</li>}}
-    {{#if:{{{18|}}}|<li style="padding:10px 14px;cursor:pointer;">{{{18}}}</li>}}
-    {{#if:{{{19|}}}|<li style="padding:10px 14px;cursor:pointer;">{{{19}}}</li>}}
-    {{#if:{{{20|}}}|<li style="padding:10px 14px;cursor:pointer;">{{{20}}}</li>}}
    </ul>
 </div>