What I would like to have happen is when the drop-down nav menu opens that it would push the content on the page down so that the menu items do not appear over the content. I do not want to have a background behind my menu items which makes the menu text difficult to see when viewed above texted content below.
I do know that some ‘hamburger’ menu styles do push content down when in responsive mode, but I have not been able to figure out how they do it. If I could learn how this is done it would solve a hugh problem I am having with my website design. And, just to be clear, I would like to do this for wide viewports. The responsive part of this I believe I have figured out.
The basic idea of dropdown menus is that they are position:absolute and thus they don’t affect below content and it goes over.
However this can be changed to fit your requirements. Just don’t make it position:absolute when hovered, or…actually there is more than one way to do this.
Well, I’ve finally figured out how to use jsfiddle but the drop-down menu does not work at all. I think my problem is that I added all of the stylesheets incorrectly or something. The page is visibly as it should be, but the nav menu’s behavior is not. The drop down behavior is non-existent.
I have searched the web for info on adding multiple stylesheets and files - I have mutiplule stylesheets and js files as well, but have come up short. All examples are for adding simple one line examples.
The problem with this approach is that doing it on hover provides a less than pleasant experience for the user because of the page jumping up and down on hover.
To see the effect just add these rules at the end of your css for testing.
.menuzord-menu.menuzord-right.menuzord-indented.scrollable {
max-height: none!important;
}
.menuzord-menu ul.dropdown li,
.menuzord-menu > li,.menuzord-menu > li a {float:left}
.menuzord-menu ul.dropdown,
.menuzord-menu ul.dropdown li ul.dropdown,
.menuzord-menu ul.dropdown li ul.dropdown.dropdown-left {
position:relative;
float:left;
clear:left;
left:0;
right:0;
left:0;
top:0;
}
.menuzord-menu ul.dropdown{margin-right:-180px}
If that is the effect you wanted then a better method would be to do this on click so that you get a slide down and slide up effect which doesn’t disappear as soon as you mouse away and makes it easier to choose an item. Of course you would need to replace the hover rules with click rules using JS instead. (I often use the superclick plugin which works well and usually works on the basic menu without much change needed but would probably need a bit of work for the push menu.)
Thank you very much for your informative post. I will indeed do as you suggested and see how that works for me. And, yes, I am as concerned as you about a user’s experience on the site. I am not fond of the hover-and-show effect, but hope to learn how to control that.
Going off topic, if I may - It seems that about 75% of my time over the past two weeks (or so) has been spent fiddling with my site’s navigation. The issue being, of course, how to design the site so it meets ‘modern’ criteria AKA being responive in nature. That said, I am seriously leaning towards a purely ‘graphical’ interface on the home page. So doing will allow me to get back to the main content of my website which has fallen by the wayside. I am truly feeling like the proverbial donkey - damned if I do and damned if I don’t.
Question: When using jsfiddle, is it permissible to add two stylesheets, js files one on top of the other in their respective panes? I added all of my files yesterday, but the hover-dropdown feature did not work as it normally does.
I’m afraid I don’t use jsfiddle (and I don’t much like it for demos) so someone else will have to answer that I use codepen a lot which I find is much better for demos and coding so you might find it easier to use.
I have seen codepen at some point this past week. That said, do you stack files on top of each other when testing? I will spend some time with it and perhaps I can figure this out for myself. It just seems that there should be some form of separation between files, but I am not sure.
I’m not sure what you mean exactly. You would just include the necessary files as you would with a normal site. Just click the gear icon (html,css and js panes) and add your external files as necessary.
