Rev 16395 | Details | Compare with Previous | 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> |
||
16395 | obado | 10 | .grid_container{ |
11 | display: grid; |
||
12 | grid-template-columns: auto auto; |
||
15641 | guerimand | 13 | } |
16395 | obado | 14 | .grid_container>span{ |
15 | padding: 2px; |
||
15641 | guerimand | 16 | } |
16410 | obado | 17 | .dropdown.wims_secondary_button:after{ |
18 | border-color: #000 transparent transparent; |
||
19 | top: 0; |
||
20 | } |
||
15641 | guerimand | 21 | |
16395 | obado | 22 | /** |
23 | * Foundation for Sites |
||
16410 | obado | 24 | * Dropdown button |
25 | */ |
||
26 | button.dropdown:after { |
||
27 | display: block; |
||
28 | width: 0; |
||
29 | height: 0; |
||
30 | border-style: solid; |
||
31 | border-width: 0.4em; |
||
32 | content: ''; |
||
33 | border-bottom-width: 0; |
||
34 | border-color: #fefefe transparent transparent; |
||
35 | position: relative; |
||
36 | top: 0.4em; |
||
37 | display: inline-block; |
||
38 | float: right; |
||
39 | margin-left: 1em; |
||
40 | } |
||
41 | |||
42 | /** |
||
43 | * Foundation for Sites |
||
16395 | obado | 44 | * Version 6.7.4 |
45 | * https://get.foundation |
||
46 | * Licensed under MIT Open Source |
||
47 | */ |
||
48 | /* Dropdown styles */ |
||
49 | .dropdown-pane { |
||
50 | position: absolute; |
||
51 | z-index: 10; |
||
15641 | guerimand | 52 | display: none; |
16395 | obado | 53 | width: 300px; |
54 | padding: 1rem; |
||
55 | visibility: hidden; |
||
56 | border: 1px solid #cacaca; |
||
57 | border-radius: 0; |
||
58 | background-color: #fefefe; |
||
59 | font-size: 1rem; |
||
15641 | guerimand | 60 | } |
16395 | obado | 61 | .dropdown-pane.is-opening { |
62 | display: block; } |
||
63 | .dropdown-pane.is-open { |
||
15641 | guerimand | 64 | display: block; |
16395 | obado | 65 | visibility: visible; } |
15641 | guerimand | 66 | |
16395 | obado | 67 | .dropdown-pane.tiny {width: 100px;} |
68 | .dropdown-pane.small {width: 200px;} |
||
69 | .dropdown-pane.large {width: 400px;} |
||
15641 | guerimand | 70 | |
71 | </style> |
||
72 | |||
73 | !endif |
||
74 | |||
75 | !increase js_numberdropdownbutton_ |
||
76 | !let keyid_=!line 1 of $wims_read_parm |
||
77 | !let keyname_=!line 2 of $wims_read_parm |
||
78 | !let nb_=!linecnt $wims_read_parm |
||
16395 | obado | 79 | |
16410 | obado | 80 | !! @See https://get.foundation/sites/docs/dropdown.html for data-options |
81 | <button class="wims_button wims_secondary_button small dropdown" type="button" |
||
82 | data-toggle="dropdown$keyid_"> |
||
16395 | obado | 83 | $keyname_ |
84 | </button> |
||
85 | <div class="dropdown-pane" id="dropdown$keyid_" |
||
86 | data-dropdown data-auto-focus="true" |
||
16410 | obado | 87 | data-position="bottom" data-alignment="right" |
88 | data-close-on-click="true" > |
||
16395 | obado | 89 | <div class="grid_container"> |
90 | !for k_=3 to $nb_ |
||
91 | !let l_=!line $k_ of $wims_read_parm |
||
92 | !let link_=!word 1 of $l_ |
||
93 | !let name_=!word 2 to -1 of $l_ |
||
94 | <span> |
||
15641 | guerimand | 95 | !href $link_ $name_ |
16395 | obado | 96 | </span> |
97 | !next k_ |
||
15641 | guerimand | 98 | </div> |
16395 | obado | 99 | </div> |
15641 | guerimand | 100 |