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 |