I created a vertical menu on the left. The menu has an option - position: fixed.
The problem is, I don't know how to prevent the rest of the page from overlapping under the Menu. I want the code to understand that part of the menu is taken and can only use the rest of the page.
I thought about splitting the menu into "inner-l" (left side) and the rest of the sections in "inner-r" (right). I put the specified width% in inner-l and the same in inner-r. However, it doesn't work. The issue still exists. :/
Related
I have a web page with two panels. The left panel takes up the majority of of the width and displays user posts. The right panel is a navigation menu so I want it to remain fixed and never roll off the screen.
When there are too many posts to fit on one screen, a scroll bar appears on the right of the screen (NOT the panel), and the user scrolls down. This is all good, except that the navigation menu scrolls off the screen.
Both panels are within a common div. I tried setting its position to relative, then making the nav panel position fixed, with a right offset of 0. This kept the nav panel on the screen, but on the far right (ie. not within the containing div).
How do I go about keeping the nav panel fixed on the screen, but floated to the right of it's containing div?
Thanks a million!
EDIT: For and example of what I mean, look at Facebook. You'll see that the posts column can extend on forever, but the right hand column (with the advertisements) stays on the screen...
You could use the Twitter Bootstrap Affix JS plugin:
http://twitter.github.io/bootstrap/javascript.html#affix
I have some dropdown menus that are display:none and only show upon click (using jquery). However, there are divs that have been placed in positions that lie "underneath" the dropdown menu. They have to be underneath considering the dropdown must go overtop everything when it it shows up. However, is there anything I can do to "click through" these dropdown divs?
I know that there is "pointer-events:none" But this would seem to disable all clicking on the dropdown menu, which I cannot have.
I've seen 100s of websites with dropdown menus that cover entire sections of their website. However, when not in use, these menus don't block divs that are positioned "underneath" so what's the solution here?
Is it something I need to fix with the positioning of my dropdown menus?
Any and all help is appreciated. It took me forever to even discover the problem. I was so stumped as to why my divs weren't clickable! Then I did "clear:both" and it moved down and finally realized the hidden divs were in the way.
It seems like you're using opacity: 0 on these dropdown divs, which keeps them in place, and block the mouse events from firing on the elements underneath.
You should be hiding them differently, with either of the following:
Use visibility: hidden or display: none (if you want to also hide it from screen readers)
Absolutely position them off the visible viewport, by using a huge negative offset (e.g. -999em).
This will ascertain that they're still readable by screen readers.
Alternatively, you can toggle pointer-events:none together with its visibility, but old IE does not support pointer-events.
http://tinyurl.com/cc4qkee
You can see a cart in the right top corner.If menu isn't fixed it works fine, but if it's fixed and you put a lot of products in the cart you cant scroll down to see the rest of the cart.
I don't know javascript well, but I used a javascript method in another project http://tinyurl.com/bljpxm4 and the cart still doesn't work properly.
Any ideas on how to get the cart working properly and have fixed menu ? :)
Can you change the style of your cart popup? Maybe just make it a summary of number of items, total, etc. You could also try removing the images, and that would give you a lot more space.
Another idea would be modify your mouseover and mouseout jquery functions to change the style of the #top element to remove the fixed position when you are showing the menu. You would also have to remove the 30px padding from #header. This might get a little tricky. You would probably have to use position: absolute, get the current scroll bar position, set top to that, and monitor the scroll bar position to move #top up in case someone scrolls up. On mouseout, you would set everything back to how it was.
A third idea would be to set the height of the cart drop down, and use overflow:auto to give you scroll bars in the cart area.
I have a dynamic sub-menu that gets programmatically constructed in the code behind. Whenever a large amount of items are added, the scroll arrow appears to allow scrolling of the sub-menu, but when it does appear, it also seems to truncate the menu text because the sub-menu width is not correctly sized to accommodate the text.
The problem is not the scrolling itself; that is working the way I want it to. The problem is that the menu width is shortened and this is truncating the menu text when the scrolling arrows are presented for large menus.
This problem seems to be in IE7, because it is working fine in IE6, the width of the menu is of the appropriate size to fit the text. Has anyone experienced this before and how did you fixed it?
you can wrap the menu in a div and set overflow:scroll on that, but that applies to the entire menu, not the drop-down part. You can't change the drop down part on the standard menu, but it you use the CSS Adapters (http://www.asp.net/cssadapters/) you can change the size and scroll capabilities of the drop-down parts. However, this gives the standard scrolling - you see a scroll bar around the section and you have to scroll manually, it's really not a very nice experience. What you probably want is something that gives an arrow at the top/bottom to allow scrolling as you hover over it, to bring the items into view; this cannot be done without rewriting the menu control. If you need this functionality you might be best to look at a third party menu control, or even one of the ajax frameworks which might have something. jQuery...
I recently installed a drop down menu on my main menu bar and noticed something. The H1 header directly below it moves on the page when I activate the drop down menu. It's like the drop down menu pushes the text out of the way because it is in the way. The header or text moves back when the drop down menu is released. This also happens on other pages with text below. What is causing this and how can I correct it?
It's impossible to say with 100% certainty without seeing your markup, but I'd guess the nested list (ul) in your menu doesn't have it's position set to absolute. Setting it to absolute takes it out of the flow of the page so it appears above other content rather than forcing any content below it down. Show your markup and I can say for certain.