Home News Contact Us Forum About Us Demos Products F.A.Q.
Shopping Cart
You currently have 0 items in your cart.


Recent Events
  • 18/11/2017 Black Friday is coming

    Don't wait BLACK FRIDAY, use FRIDAY17 coupon code to get 35% discount for all our extensions right now.

  • 05/09/2017 BIG Autumn SALE

    Use AUTUMN17 coupon code to buy our WordPress or Joomla! extensions with 25% discount. Hurry up! The offer is valid till 11 September.


2Checkout.com, Inc. is an authorized retailer of goods and services provided by ARI Soft. 2CheckOut




Follow us on twitter



Welcome, Guest
Please Login or Register.    Lost Password?

scrollbar for submenu
(1 viewing) (1) Guest
Go to bottomPage: 1
TOPIC: scrollbar for submenu
#55878
scrollbar for submenu 2 Years, 2 Months ago Karma: 0
Hi (me again! ),

I want to make the submenu has auto scrollbar as I have lot of menu items. It did work for first level submenu as shown in picture. But level 3 submenu doesn't appear! Please help!!

I used below code

ul.ux-menu a {
padding-left: 10px !important;
padding-right: 5px !important;
}

ul.ux-menu-sub {
z-index: 30000;
min-height:150px;
max-height:390px;
overflow-x:hidden;
overflow-y:auto;
}

The administrator has disabled public write access.
 
#55879
Re: scrollbar for submenu 2 Years, 2 Months ago Karma: 4
Hi again.

Try removing "overflow-x: hidden;"

The code basically says to hide everything overflowing in the x-axis. This hides the sub-sub-menus because they flow out to the right (in the x-axis).
The administrator has disabled public write access.
Mazfer
- Long time CSS/HTML coder
- mazindesigns.com
 
#55881
Re:scrollbar for submenu 2 Years, 2 Months ago Karma: 0
Hi,

I checked what's the reason of the 2nd submenu disappearance when I removed the "overflow-x:hidden;" code. It turns out that the submenu is inside or bound with the first submenu.
The administrator has disabled public write access.
 
#55882
Re:scrollbar for submenu 2 Years, 2 Months ago Karma: 4
Hi again..

it's the overflow code (both overflow-x and overflow-y) that hides the sub items.
The administrator has disabled public write access.
Mazfer
- Long time CSS/HTML coder
- mazindesigns.com
 
#55899
Re:scrollbar for submenu 2 Years, 2 Months ago Karma: 0
Hi,

So I can't use overflow code? Any other code that can make it scroll?
The administrator has disabled public write access.
 
#55912
Re:scrollbar for submenu 2 Years, 2 Months ago Karma: 4
Maybe the admin knows?



Unfortunately I cant think of any code that would make it work without having to rewrite the html structure of the menu.

Currently the menu structure goes like ul > li > ul > li etc..

This means if you overflow something on one ul it hiddes the ul-submenu items.




Here's what happens when using overflow on .ux-menu-sub.

The ul.ux-menu-sub is absolute positioned to a relative positioned li.ux-menu-item-parent.
Because the li-item is positioned relative it acts like a container to the absolute positioned ul.ux-menu-sub.

The absolute positioned ul.ux-menu-sub is moved from the left border to the right with code that calculates the width of its parent item, being li.ux-menu-item-parent, + 1px. If this wasn't happening the ul.ux-menu-sub would be positioned under the li.ux-menu-item-parent. The code mentioned above is the reason to why the ul.ux-menu-sub, appears to the right of its parent item being li.ux-menu-item-parent.

So basically the whole menu is originally structured as a list, with each item below each other. So that is why the "overflow-y: auto;" hides the sub-menu levels but the first level.

edit: clarity
Last Edit: 2015/09/28 11:39 By Mazfer.
The administrator has disabled public write access.
Mazfer
- Long time CSS/HTML coder
- mazindesigns.com
 
Go to topPage: 1