Rev 16395 | Go to most recent revision | Details | Last modification | View Log | RSS feed
| Rev | Author | Line No. | Line |
|---|---|---|---|
| 15641 | guerimand | 1 | !! put a dropdown button with list of link in a menu |
| 2 | !! wims_read_parm is : |
||
| 3 | !! line 1 name of the button |
||
| 4 | !! line 2 id of the button |
||
| 5 | !! each other line is an item of the dropdown button with format word1 link ; word2 linkname |
||
| 6 | |||
| 7 | !if $js_numberdropdownbutton_=$empty |
||
| 8 | !let js_numberdropdownbutton_=0 |
||
| 9 | <style> |
||
| 10 | a, .dropbtn { |
||
| 11 | display: inline-block; |
||
| 12 | color: black; |
||
| 13 | text-align: center; |
||
| 14 | text-decoration: none; |
||
| 15 | } |
||
| 16 | |||
| 17 | a:hover, .dropdown:hover .dropbtn { |
||
| 18 | background-color: #f9f9f9; |
||
| 19 | } |
||
| 20 | |||
| 21 | .dropdown-content { |
||
| 22 | display: none; |
||
| 23 | position: absolute; |
||
| 24 | background-color: #f9f9f9; |
||
| 25 | } |
||
| 26 | |||
| 27 | .dropdown-content a { |
||
| 28 | color: black; |
||
| 29 | padding: 12px 16px; |
||
| 30 | text-decoration: none; |
||
| 31 | display: block; |
||
| 32 | text-align: left; |
||
| 33 | } |
||
| 34 | |||
| 35 | .dropdown-content a:hover {background-color: #f1f1f1} |
||
| 36 | |||
| 37 | .show {display:block;} |
||
| 38 | </style> |
||
| 39 | <script> |
||
| 40 | /* When the user clicks on the button, toggle between hiding and showing the dropdown content */ |
||
| 41 | function myFunction(test) { |
||
| 42 | var dropdowns = document.getElementsByClassName("dropdown-content"); |
||
| 43 | for (var d = 0; d < dropdowns.length; d++) { |
||
| 44 | var openDropdown = dropdowns[d]; |
||
| 45 | if (openDropdown.classList.contains('show')) { |
||
| 46 | openDropdown.classList.remove('show'); |
||
| 47 | } |
||
| 48 | } |
||
| 49 | document.getElementById(test).classList.toggle("show"); |
||
| 50 | } |
||
| 51 | |||
| 52 | // Close the dropdown if the user clicks outside of it |
||
| 53 | window.onclick = function(e) { |
||
| 54 | if (!e.target.matches('.dropbtn')) { |
||
| 55 | var dropdowns = document.getElementsByClassName("dropdown-content"); |
||
| 56 | for (var d = 0; d < dropdowns.length; d++) { |
||
| 57 | var openDropdown = dropdowns[d]; |
||
| 58 | if (openDropdown.classList.contains('show')) { |
||
| 59 | openDropdown.classList.remove('show'); |
||
| 60 | } |
||
| 61 | } |
||
| 62 | } |
||
| 63 | } |
||
| 64 | </script> |
||
| 65 | !endif |
||
| 66 | |||
| 67 | !increase js_numberdropdownbutton_ |
||
| 68 | !let keyid_=!line 1 of $wims_read_parm |
||
| 69 | !let keyname_=!line 2 of $wims_read_parm |
||
| 70 | !let nb_=!linecnt $wims_read_parm |
||
| 71 | <button class="dropdown"> |
||
| 72 | <a href="javascript:void(0)" class="dropbtn" onclick='myFunction("$keyid_")'>$keyname_</a> |
||
| 73 | <div class="dropdown-content" id="$keyid_"> |
||
| 74 | !for k_=3 to $nb_ |
||
| 75 | !let l_=!line $k_ of $wims_read_parm |
||
| 76 | !let link_=!word 1 of $l_ |
||
| 77 | !let name_=!word 2 to -1 of $l_ |
||
| 78 | !href $link_ $name_ |
||
| 79 | !next k_ |
||
| 80 | </div> |
||
| 81 | </button> |
||
| 82 |