Skip to Content
0 Votes

Changes for page Menu Macro

Last modified by Ruud de Jong on 2024/10/24 11:40
From version 8.1
edited by Ruud de Jong
on 2024/10/24 11:40
Change comment: Install extension [org.xwiki.platform:xwiki-platform-menu-ui/16.8.0]
To version 6.1
edited by Ruud de Jong
on 2023/10/10 14:49
Change comment: Install extension [org.xwiki.platform:xwiki-platform-menu-ui/15.8]

Summary

Details

XWiki.JavaScriptExtension[0]
Code
... ... @@ -70,18 +70,6 @@
70 70   $(dropDownHeader).next().addClass('xDropdown-menu');
71 71   });
72 72  
73 - $('.xDropdown-menu').each(function() {
74 - this.addEventListener('keyup', function(event) {
75 - if (event.key === 'Escape') {
76 - // We change the state of the parent xDropdown
77 - this.parentNode.classList.remove('open');
78 - // We set the focus on the toggle button of the section we just collapsed
79 - this.parentNode.querySelector(':scope > .xDropdown-header > .xDropdown-header-toggle').focus();
80 - }
81 - event.stopPropagation();
82 - });
83 - });
84 -
85 85   $('.menu-horizontal .xDropdown').each(function() {
86 86   // In case of horizontal menus, make it so that a class is added on hover, instead of using the :hover pseudo-class
87 87   this.addEventListener("mouseover", function() {
XWiki.StyleSheetExtension[1]
Code
... ... @@ -153,19 +153,19 @@
153 153   margin-top: 0;
154 154   border-top-right-radius: 0;
155 155   border-top-left-radius: 0;
156 - overflow-wrap: break-word;
157 - hyphens: auto;
158 158   li {
159 159   /* Text inside menu */
160 160   color: @dropdown-link-color;
161 - padding: 3px 20px;
162 162   /* Links inside menu */
163 163   a {
164 164   display: block;
162 + padding: 3px 20px;
165 165   clear: both;
166 166   font-weight: normal;
167 167   line-height: @line-height-base;
168 168   color: @dropdown-link-color;
167 + overflow: hidden;
168 + text-overflow: ellipsis; // Displaying ... if the text is too long
169 169   &:hover, &:focus-within {
170 170   /* &:extend(.dropdown-menu>li>a:hover); */
171 171   text-decoration: none;
... ... @@ -194,17 +194,10 @@
194 194   }
195 195   }
196 196   /* When in dropdown we also have a link, reset the duplicated padding */
197 - & > .xDropdown-header > span > a {
197 + & > span > a {
198 198   padding: 0;
199 199   display: inherit;
200 200   }
201 - /* Reposition the toggle when in a dropdown of fixed size
202 - to avoid eating away at the bit of space we have for the text. */
203 - & > .xDropdown-header > .xDropdown-header-toggle {
204 - position: absolute;
205 - right: 0;
206 - top: 0;
207 - }
208 208   }
209 209   /* Separator horizontal inside menu */
210 210   &:empty {