Good evening community,
I have a problem related to a vertical menu that is scrollable when there are more items in the menu than the page can take vertically. If I scroll down to an item that is not displayed on the screen when I'm at the top of the menu and I click this item to get to the respective page, the page will get loaded but the menu jumps back to the top, so that the item i just clicked is not displayed on the screen again. But I want that the part of the menu with the item is shown when the new page is loaded and not the top of the menu.
I'm developing my site with python and django and using bootstrap for frontend, if that helps with my problem.
I will add some pictures to visualize my problem. Sadly i can't post pictures directly yet.
Starting Position 1 <- This is the top of the menu with the page 'Einführung' loaded
Scrolled Position 2 <- This is the scrolled position and I want to click the 'Print-Funktion'-link
Top Position 3 <- This is the menu after I clicked on the link (top position)
Scrolled Position 4 <- This is the menu when I scroll down after I clicked on the link
I numbered the pictures for easier reference. Currently the menu is in the state of the 3rd picture after I clicked on the link but I want the menu to be in the state of the 4th picture.
Edit1:
I forgot to add how I made the menu scrollable. I used the malihu-custom-scrollbar-plugin. The Plugin
Thank you in advance for your answers!
I've found a solution which is not perfect, because it will always jump to the top for some milliseconds after clicking on a link and then to the desired position.
I've used this when the page is loading
$(selector).mCustomScrollbar("scrollTo",position);
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 !
In the pic I have attached, when I click on any item in the left side nav menu, the page in the right loads but the menu remains fixed and does not load.
How can I make a menu like this?
Can I do it using div? or Do I need to use
enter image description here
I'm trying to create a mega menu using a guide I've found by Valeriu Timbuc here: https://designmodo.com/create-css3-mega-menu/
I've found out while playing around with it that when a menu item is selected to show the menu div (menu 1), then when you select another menu (menu 2) to show it's menu div, if you move your mouse below the selected menu div (menu 2 - as you would when you're trying to select an item from the newly selected div), the selected menu jumps back to your first selected menu item (menu 1).
This only happens for menu items going right to left - it does not happen for items going from left to right. on the web demo it looks like it happens going both ways, on my personal test it only occurs going right to left
To reproduce the behaviour, perform the following on the demo page here: https://designmodo.com/demo/css3megamenu/
hover on the "Earnings" menu item
hover on any menu items to it's left - say "Top Rated" or "What's New", (for this example, we will use the "What's New" link as this has items in the drop down menu)
as soon as the "What's New" items are displayed, move your mouse down to select an item from the "What's New" drop down menu
the screen jumps back to the "Earnings" menu.
Doing the same thing but in the opposite direction from left to right, that is, having the "What's New" menu item selected first, then hovering on the "Earnings" menu item will show the correct behaviour where moving the mouse will not jump back to the previously selected menu item.
To view what is happening in action, please have a look at the video here: https://imgur.com/a/3Jg4w0b
This mega menu is perfect for what I need to do apart from this medium issue. Any help regarding this would be appreciated.
After going through multiple mega menu solutions, I've figured out what seems to be causing this issue.
When defining menu items in the menu dropdown section, the CSS for the display should be set to "None" (instead of "Block" shown in the demo) to prevent the div from being accessible at all.
Even though the div seems hidden as the visibility and overflow is set to "Hidden", it looks like the div area still exists which is why hovering below the menu item still acts as if the previous drop down menu item has been selected as that drop down still has a div showing on screen.
On the hover CSS, the display should be set to "Block" which will only draw the element while you hover on the link.
In my JSP page There is a menu with 14 options in the left side and menu description at the right side. I have created hyperlink in the same page on the menu click. Menu description has lengthy stuff. And the size of the page is much more than the menu. My problem is when I click on any menu item at left excluding first menu item the page scrolls down and menu disappears. Is there can be any way to make the left side (menu) unscrollable, and fixed in the position. Only The right side of the page will scroll. Thanks.
There are several ways:
make left div position:fixed
make height of right div fix and give overflow:auto
I currently have a site with a menu in a frame on the left and the content in a frame on the on the right. I want to move the menu frame to the top of the page (horizontal instead of vertical), but I want the menu to move up off the visible page when scrolling on a large content page, as though the menu was part of the content.
Note: I do not want to render the menu on the content page as all the current links target specific frames/windows and I would like to not have to render the menu on every request.
If you're asking whether it's possible to scroll a frame off the page, it is. Just use an IFrame. http://www.w3.org/TR/html4/present/frames.html
Just be aware that if you had lengthy dropdowns in your vertical frames, they may get truncated in a horizontal "menu" in an iframe of limited height.