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
Related
I have a normal megamenu popup (or several, one per menu item) which is shown when the parent div (horizontal menu item) is hovered. It's a normal popup menu div that automatically is left aligned with the menu entry in the horizontal menu above. It has the css style "position: absolute"
Because it's a mega menu, it can get quite wide in situations which I cannot predict, it's dynamic. It could even overflow the viewport to the right and then a horizontal scroll bar appears for the whole page. Once this happens I would rather not align it's left side with the horizontal menu item above like it is now, but push it to the left.
Can I position a div so that once it's right side touches the right side of the viewports it gets pushed to the left from it's initial (not known in pixel) position? Once it's content are wider than the viewport, of course it shall stay on the left and the page shall have horizontal scrollbars as normal.
Is this possible with CSS only?
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
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);
I'm using Foundation's off-canvas menu along with a bottom bar that I've created where the Menu button is located on the bottom right of my fixed bottom bar. However, the off-canvas menu comes out from the top right of my page. Is there a way to have the off canvas menu to slide starting from the bottom right instead?
Thanks!
I've been working on my site: www.zdrctry.com.
I have a couple questions about the top navigation bar (containing Home, Contact Us, Cart, My Account):
How could I move the navigation bar down to the same level as the "Directory Theme" logo. It is similar to the Red Header of website: www.premiumpress.com.
I'd also like to know how to align the navigation links to the right side of the page.
How could I achieve this?
Put your navigation bar inside a div and make the div's width 100%. Now for the CSS for your nav bar element, put text-align: right.
To move the bar down, use absolute positioning and specify how far from the top of the page you want it.