I have a pure CSS navigation menu with a drop-down section based on some automated menu creation tool and heavily edited.
Previously the drop down was a single column but now, with increased number of pages, it needs to have multiple columns to remain neat looking.
The problem is now the drop-down menu covers my form (where it previously didn't), which is fine, but when moving your mouse over links in the menu the thing closes if you touch any form fields that are behind it.
Menu CSS is probably too long to paste here. Is there a way to stop the drop down from closing when touching elements behind it with the mouse?
Set the z-index of the menu to a high number. Should keep it above other elements.
Related
I have a website that displays content based on items checked in a menu list. If the screen width gets too small the menu is rotated and hidden. Additionally, a burger button is displayed. If the burger button gets activated (checkbox as well), the menu is unhidden and the content is hidden.
Neither the content nor the menu have access to the checkbox behind the burger button, because they are children of a sibling of the burger button.
As a result, if a menu item was checked, the burger button is not unchecked, and the visitor needs to click on the burger button again to close the menu and see the content.
Somehow I need to find a hack to uncheck the burger button, if a different menu item was selected, or if a menu item was clicked.
JavaScript is not required yet and shall never be used.
I hope someone knows a hack to fix this - I am clueless in this case...
Thank you for your numerous comments.
The answer is quite simple: CSS3 can't do what I tried to achieve. There was no trick at all to get this done, not even involving the :target pseudo-class, because CSS can't manipulate and reset the URL anchor, neither can it untick the checkbox. That caused the menu staying visible after selecting the content as mentioned above.
As a result, I have rewritten the whole website (well, not the content to be precise).
There is a theoretically simple solution: Using sibling radio buttons for all controls.
This means:
I have one radio button for the burger menu. It accesses the following (sibling) <div> element with the adjacent sibling combinator (+) and toggles the burger menu on and off. (Which results in a changed visibility property.)
I have multiple radio buttons for the content. Succeeded by their respective content div analogously to (1.).
I have multiple labels all over the place that address these radio buttons by using their for attribute. Fortunately, the for attribute has multiplicity 1:n, so that it was possible to address the content <div>s by both, the <nav>-bar, displayed for high resolution devices, as well as the burger menu, displayed on low resolution devices on click on the burger button which is not visible for high resolution displays.
So as a result, I don't do any menu transformations, but have just duplicated the <label>s for these toggles and display either the <nav> bar or the burger button.
Downsides:
I lost the ability to keep the style of the <label>s for the currently active content changed while this content is displayed, since these <label> elements are not siblings of their corresponding checkbox/radio anymore, but on :hover there is an effect.
It is not possible to have the burger menu displayed leaving the current content displayed as well in the background. Both are and need to be in the same radio button group, which means that the burger menu is displayed instead of other content until a label is clicked in the burger menu.
Why am I even doing this (Benefits):
From my perspective, running scripts on a visitors machine is like highjacking their compute power on their device in their sphere and by forcing them to activate JavaScript or other stuff, exposing them to serious risks that could be avoided. So as a result, I consider the unnecessary use of JavaScript as an unethical act.
With this hiding technique of the content I am able to transfer all the content to the visitor a single time and allow for a perfect experience once the content is loaded.
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
Unfortunately the title I have given is very vague. I honestly wasn't sure how to word it. Anyway, basically I currently have a vertical navbar with a small caret beside the text. Once clicked, the particular button uncollapses and shows it's contents.
As seen in the image above, I'm attempting to have a secondary caret that should be sitting on the right of the button. This caret will follow suit on every other button once I get it working. Anyway, I'm currently using twitter-bootstrap and from what I understand, I could be able to split the button into 2, each having their own function. For example, if one were to click the text and the downwards caret, it should uncollapse the menu (Which it does fine right now). Though, when you click the right facing caret, it should just bring you to another page via an href or something. Currently, clicking either button will collapse and uncollapse the menu.
As you can see, the right facing caret separates itself from the original button but in a weird way. On the far right of the image is an example of the button separation I would like. In the Twitter-Bootstrap example, the "button" text and the caret both do different functions. I'm not entirely sure on how to achieve this via the current button setup I have. I'm quite happy with how the current buttons look visually but I want to be able to add that secondary caret that is justified to the right of the button. As well as have that secondary button separate nicely, similar to that of the Twitter-Bootstrap example.
TL;DR: how do I get a button to split into 2 piece via the current HTML that I have. I would like to keep the styling and I would like each button to have it's own functionality.
(Enlarge image)
http://i.imgur.com/Xm7ILoq.png
Just make two buttons and style them to be close to one another. Use CSS styling to get it done. You can lower the margins on the sides to get them closer, you could use border-radius to get rid of the corners in the middle, etc etc.
Just figure out how you want it to look. And forget about splitting buttons, that is not something you can technically do, or should want. Create 2 buttons and style them.
The site I'm working on uses the modified WordPress TwentyTwelve theme. The standard drop-down menu of that theme has been modified to push the content down when the submenu opens:
Problem: I want to arrange the sub-menus neatly along the entire width of the content area (960px wide), rather than having them drop down under each other. If the number of submenu items is large, I want the submenu to wrap over several lines, but have the items arranged in neat vertical rows.
Here's how I see it. Currently your sub menus are constrained to its parent menu. To achieve what you want, I think you'd need to do quite a lot of restructuring. I would keep your sub menus separate and place them directly underneath your main menu. You can code your sub menu items to take up the 960px width (by hand I know, even though you're using wordpress), and if needs be set the longer sub menu into two lines. Give each sub menu a unique id and set them to display:none in css. Your main menus li's already have unique identifiers so then you can create css rules for the specific li's. Something like this:
#menu-item-58:hover + #submenu1 {display:block;}
#submenu1 {display:none;}
#submenu1:hover{display:block;} //so submenu doesn't disappear when mouse hovers over.
Here is an example where you can see in action, I've used div's but you can change it accordingly: http://jsfiddle.net/H3WB6/
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?