Remove Scroll Buttons from Menus
Environment
Product Version | 2019.3.1023 | |
Product | Progress® Kendo UI® Menu for jQuery | Progress® Kendo UI® ContextMenu for jQuery |
Description
In my Kendo UI Menu, I'd like to have it scrollable without the scroll buttons visible. How can I get this behavior?
Solution
In order to hide the scroll buttons, add a new class to the Kendo UI ContextMenu and use CSS to hide the elements.
<ul id="menu" class="noScrollButtons" style="width:400px">
<li>
<!--content-->
</li>
</ul>
Using the important
selector with the specific class will make the scrollbars hidden only to the applied menus.
.noScrollButtons ~ span.k-menu-scroll-button.k-scroll-down,
.noScrollButtons ~ span.k-menu-scroll-button.k-scroll-up,
.noScrollButtons ~ span.k-menu-scroll-button.k-scroll-left,
.noScrollButtons ~ span.k-menu-scroll-button.k-scroll-right {
display: none !important;
}
Example
<h4>Horizontal</h4>
<ul id="horizontalMenu" class="noScrollButtons" style="width:400px">
<li>
Mens
<ul>
<li>Jackets and Coats</li>
<li>Jeans</li>
<li>Knitwear</li>
<li>Shirts</li>
<li>Belts</li>
<li>Socks</li>
<li>Fan Zone</li>
</ul>
</li>
<li>
Ladies
<ul>
<li>Jackets and Coats</li>
<li>Jeans</li>
<li>Knitwear</li>
<li>Shirts</li>
<li>Belts</li>
<li>Socks</li>
<li>Fan Zone</li>
</ul>
</li>
<li>
Kids
<ul>
<li>Jackets and Coats</li>
<li>Jeans</li>
<li>Knitwear</li>
<li>Shirts</li>
<li>Belts</li>
<li>Socks</li>
<li>Fan Zone</li>
</ul>
</li>
<li>Sports</li>
<li>Brands</li>
<li>Accessories</li>
<li>Promotions</li>
</ul>
<h4 style="padding-top:2em; margin-top:30px">Vertical</h4>
<ul id="verticalMenu" class="noScrollButtons" style="width:100px; height:150px;">
<li>
Mens
<ul>
<li>Jackets and Coats</li>
<li>Jeans</li>
<li>Knitwear</li>
<li>Shirts</li>
<li>Belts</li>
<li>Socks</li>
<li>Fan Zone</li>
</ul>
</li>
<li>
Ladies
<ul>
<li>Jackets and Coats</li>
<li>Jeans</li>
<li>Knitwear</li>
<li>Shirts</li>
<li>Belts</li>
<li>Socks</li>
<li>Fan Zone</li>
</ul>
</li>
<li>
Kids
<ul>
<li>Jackets and Coats</li>
<li>Jeans</li>
<li>Knitwear</li>
<li>Shirts</li>
<li>Belts</li>
<li>Socks</li>
<li>Fan Zone</li>
</ul>
</li>
<li>Sports</li>
<li>Brands</li>
<li>News</li>
<li>About us</li>
</ul>
<h4>Focus</h4>
<ul class="keyboard-legend">
<li>
<span class="button-preview">
<span class="key-button leftAlign">Alt</span>
+
<span class="key-button">W</span>
</span>
<span class="button-descr">
focuses vertical menu (clicking on it or tabbing also work)
</span>
</li>
<li>
<span class="button-preview">
<span class="key-button leftAlign">Alt</span>
+
<span class="key-button">Q</span>
</span>
<span class="button-descr">
focuses the horizontal menu (clicking on it or tabbing also work)
</span>
</li>
</ul>
<script>
$(document.body).keydown(function(e) {
if (e.altKey && e.keyCode == 87) {
$("#verticalMenu").focus();
} else if (e.altKey && e.keyCode == 81) {
$("#horizontalMenu").focus();
}
});
$(document).ready(function() {
$("#horizontalMenu").kendoMenu({
scrollable: true
});
$("#verticalMenu").kendoMenu({
scrollable: true,
orientation: "vertical"
});
});
</script>
<style>
.noScrollButtons ~ span.k-menu-scroll-button.k-scroll-down,
.noScrollButtons ~ span.k-menu-scroll-button.k-scroll-up,
.noScrollButtons ~ span.k-menu-scroll-button.k-scroll-left,
.noScrollButtons ~ span.k-menu-scroll-button.k-scroll-right {
display: none !important;
}
</style>