I am trying to make a menu with many items, sub items. I want to display scroll bar along with the items if they are increased. I want to do same with sub menus and so on.
Here is the example about what i am doing.
The problem is, It is displaying horizontal scroll bar, if sub menu again have some items as child. I want to show only vertical scroll bar. and want to pop out sub menues.
Link of css i am using.
You can specify separate horizontal and vertical overflow behaviors:
overflow-x: hidden;
overflow-y: scroll;
Your CSS reference material should have told you that. This will of course make a complete mess of any submenus that try to pop out along the x-axis.
Scrollbars in a menu will also make your users hate you and possibly win you a place in the User Interface Hall of Shame or a post on http://thedailywtf.com/. If you're thinking about doing something like this in the real world, don't do it. Think of a less irritating way to organize your navigation.
Related
This is my first time on SlackOverflow, i hope that you can help me.
I'm trying to achieve something tricky regarding my skill on development and specifically on Bootstrap.
I've created a template with dual Navbar (top and left).
The left one is a fixed navside where there is 3 kind of experience : Expanded, Not Expanded, Not visible.
As you can see, my Expanded NavSide is working perfectly with Scrollbar and Dropdown inside the nav
Expanded SideBar with Dropdown
The not visible experience is also working perfectly.
Not Visible SideBar
When i'm working with my not expanded SideBar, everything is perfect if i don't have too many item menus. If i have too much items i can't scroll on the Sidebar because i've only activated my css for expanded js.
Not Expanded SideBar without Scroll
Where is the issue ? I want to keep the same experience for the not Expanded version with Dropdown displayed on the right of my navside. But if i put the overflow-y scroll on my navbar, the dropdown on the right side is not displayed anymore (but the scroll is working well).
Not Expanded Sidebar with scroll but no Dropdown
Any idea if what i'm trying to achieve is possible ?
I can share my code if needed :)
Many thanks !
Introduction to clearify the task
I have a Navbar on the left side of my page. It has two levels for Items. When it's displayed in a small device, only the icons of the first level are shown. If you hover over it a dropdown of sub-items wil be shown on the right side of the bar. So far so good.
When the user uses a normal device the first-level-items should be displayed as dropdown-headers and the sub-items should expand under their parent-items on click. So I planned to set the sub-items-container under the main-items with height: 0px; and exband it with javascript-onclick and a css transition.
But as you can see the sub-items are hovering over the main item.
Question
How can i ensure that the subitemlist is between the main-items and not over it?
Additionally the solution shouldn't destroy the responsivness.
Note: I really want to make my own navbar, so using Bootstrap is not an option. Also i'm sorry if the code is not the best, it's the first try.
Code
I have put the whole thing in a jsfiddle
you cant put it in sidebaritem you have to put it below it
I got one really annoying bug, that I couldn't find an answer for. I have a menu slider that has a drop-down menu attached to each item. The slider itself is custom made, but the drop-downs functionality is provided by UI-Bootstrap.
Here is a simple fiddle, that I've made to get more about the problem:
https://jsfiddle.net/Lus92rqm/7/
If you can see in the CSS tab, I've added some comments about where I think the problem comes from and a possible solution that I ran into. So basically, all the thing is not working because of the overflow: hidden style attached to the .menu-slider-wrapper. I needed it though, because I want to hide all the items that are not in the visible area - the 570px width of this container.
I also tried to add position: fixed to the .dropdown-menu class and thought it was working perfectly, until I tried to scroll the page down... The shown menu is scrolling with the page which is not the behavior I'm searching for.
One more thing is that I definitely need a position: relative attached to .menu-slider class, because in that way I can move the slider from left to right and opposite - changing the left property of it.
Sooo, anyone with any ideas how I can manage to workout this thing?
Thanks! :)
You need to use dropdown-append-to-body, see the example on the docs page.
I have a page I'm working on that encompasses a vertical drop-down menu. However, when the menu drops down, it pushes the text below it downwards and off the page. This is expected, but this enables the scroll bar on the side of the page. I was wondering it there was a way to get rid of this. In other words, it shouldn't just not scroll, but never even offer the option to scroll.
Thanks!
If you want no scrollbar to appear and no scrolling whatsoever to occur, in the CSS for the div in which you contain said dropdown use
overflow: hidden;
This will cut off any 'additional content' though; see an example here
Use overflow: hidden; on the element you want to hide the scrollbar on.
I have this menu that when I hover on certain items, it dropsdown a list of new items. Sometimes this list is bigger than the browser window, so user need to scroll the page down to be able to see the whole list. The problem is that when the mouse reacher the scrollbar naturaly the menu lose it's hover function. I need to fix that asap, any suggestions?
Thanks.
Instead of doing hover on the menu item, maybe you should do an onclick event. This would allow the menu to appear on click and then when the user clicks the menu again it could make the sub-menu hide. This would allow you to scroll down the page and still have the sub-menu showing.
BTW, this assumes you cannot break the menu down into sub-menus like Nathan MacInnes mentioned.
Well if the user has to move the mouse off of the menu, it naturally should close. Maybe you should try making the menu shorter, or try making the menu itself scroll?