I am playing around with Mootools' Fx.Slide effects for some drop down menus. I've used them before with no issues, but for some reason now it seems as soon as I set up a new Fx.Slide on an element, it messes up my CSS styles. Here's an uploaded example...
Before applying Fx.Slide
After applying Fx.Slide
You can see the difference in my drop down menu styles. All my styles are applied first via this style sheet, and the line that seems to mess it up my styles is line #19 in this menu.js script (here is a paste of the same thing, with line numbers.).
The difference between the two examples above is only line #19 in menu.js, which you can see I've commented out in the first example...
subNav[index] = new Fx.Slide(subNav[index], {duration: 200});
Again, the weird thing is that I have used Fx.Slide on other websites (like the drop down menus on this site), and it never seemed to mess up any of my styles. Any advice?
It's because of how your styles are set up.
Fx.Slide adds a div around your ul. Therefore, your ul stops receiving its styles from #header #nav > ul > li > ul because it's no longer a direct descendant of #header #nav > ul > li.
Related
So I'm a bit flummoxed about formatting this nav (Contact dropdown) to not overflow outside the container:
http://782.2b6.myftpupload.com/
I'm sure it's because I've used position:relative a bit to move the nav around and make it stay inside the orange stripe. There'd be a lot of code to post in regard to what's going on with the nav as I'm just customizing a theme. Hoping someone can help me pinpoint what container I can target and what to code for forcing the "Contact" dropdown to come down flush against the website container, therefore showing a little below "Blog" as well rather than just busting out to the right. Help please!
Screenshot of .sub-menu popping out of container
I was able to achieve this by adding:
.sub-menu {
right: 0;
}
Although doing so will apply this to each item with the .sub-menu class. If possible, add a new class name to that element to add the CSS above.
Right, the big problem here is that I have a fix html format that WP generates from the wp_list_pages('title_li='); function. It's a pile of nested lists. Now I wish to style that as a dropline menu with hover functionality.
http://hedag.openskin.org/?page_id=286 You can see what I've managed up to now there, I'm using z-index to try and overlay the current subnav with the one from the hovered subnav. Now I've read up on the z-index and I don't think it's possible to get it working using only css because the seperate "children" lists are in different stacking contexts.
So now my attempt is to remove it using jquery when you hover over another one of the main navigation elements. Would any of you be kind enough to either
tell me what's wrong with my z-index/css stuff and fix it that way (preferred, it'd be pretty cool) or
2. fix my jquery code so it'd work, I'm loading it in the <head> tag.
Current jQuery code:
<script>
jQuery(document).ready(function($) {
$('ul#nav>li').hover( function () {
if ($(window).width() > 767) {
$('ul#nav>li.current_page_item .children').hide();
$('ul#nav>li.current_page_ancestor .children').hide();
}
});
});
jQuery(document).ready(function($) {
$('ul#nav>li').mouseleave( function () {
if ($(window).width() > 767) {
$('ul#nav>li.current_page_item .children').show();
$('ul#nav>li.current_page_ancestor .children').show();
}
});
});
</script>
Using jQuery the menu now works as intended, it'd still be interesting to find a purely css solution to this as I'm fairly sure nested lists are a pretty standard navigation scheme and droplines are often the best option. One other thing that might be interesting to solve is getting the sub-nav to be left or right aligned with the parent ul and not the parent li.
The tricky thing about the CSS z-index property is that it's only applied to elements with a position specified in your stylesheet: either relative, absolute or fixed.
Looking at the source code on the page you linked, you should be able to style this with a pure-CSS solution. You only really need to use JavaScript if you want to support old versions of Internet Explorer.
ul li{ /* your top-level list */}
ul li ul{ display:hidden; position:relative; }
ul li:hover ul{ display:block; }
ul li.over ul{ /* if you want to support old versions of IE */ }
For accessibility, you can use left:-9999px in place of display:hidden. There's a detailed writeup of this technique here: http://www.htmldog.com/articles/suckerfish/dropdowns/ and at the bottom of the page you'll find an example of a horizontal nav menu, if that's what your final design calls for.
If you want to use
jquery.dropy
I've fiddled around with some mega menus, but I can't get them to use a fixed position for the drop down content. All of them shows the content like this:
http://www.sohtanaka.com/web-design/examples/mega-dropdowns/
But I want it to show up like this (no need for the fancy effects though):
simplifiedsafety.com/
I think I got it fixed, with the code HerrSerker posted
Working code for others:
http://jsfiddle.net/aT3nQ/embedded/result/
This doesn't use js or jQuery though.
Drop the position:relative on th li, add position:relative to the ul and give position:absolute;left:0 to the .sub
I have implemented my own drop down menu and wanted to clarify the accessibility implication of my solution:
http://jsfiddle.net/tpHcv/5/
The piece of code i am interested in for now is:
$('#sub-nav > li ul').each(function(index){
var $this = $(this),
index = index + 1;
$this
.clone()
.appendTo('#main-nav > li:eq(' + index + ')');
});
'sub-nav' is hiddden from everyone via CSS to start. Then it is appended to the relevant 'main-nav' li. Will this approach prevent people using assistive technology from getting to the sub menu items?
Please don't aks why i have done it this way. Suffice to say i have no access to the original markup of the project so cannot just append the sub-menu to the markup in the way that i would like.
For greater accessibility, consider adding keyboard support. When a link has the focus (via tab or whatever), make sure its subnav is visible. Similarly, when a subnav link has focus, make sure it is visible. Some of that you can do with css via :focus.
It's unfortunate you don't have access to the markup. Is there a reason you need to clone the <ul>, or is it ok to just move the original element? Do your dom manipulation with script, but do the show/hide with css via the :hover pseudo-class.
This gets you part of the way there: http://jsfiddle.net/tpHcv/9/ You'll still need some JavaScript to manage tabs and focus on the sub-items.
#main-nav li > ul
{
display: none;
}
#main-nav > li a:focus + ul,
#main-nav > li:hover > ul
{
display:block;
}
Will your #main-nav links go anywhere or are they just for triggering the sub navigation? If they don't go anywhere, to support browsers with JavaScript disabled, consider hiding #main-nav initially with css, and then show it with JavaScript. This way it isn't displayed unless the links will actually do something.
When I visit some sites and take mouse pointer over some menu item, another sub menu items comes up in another panel adjacent to main menu item. Thus giving an effect like onmouseover. But when I see the source code (like View source option in IE) there is no onmouseover / onmouseout event defined in the menu item list element.
For example, in the website http://www.seoconsultants.com/ - take mouse pointer over SEO Search on the left panel or in the website http://www.znetindia.com take mouse pointer Email option on top menubar
How to get such effect using css and javascript.
Without JS, just with CSS. Take a look at the source code: http://www.seoconsultants.com/css/seo.css
/* Begin CSS Popout Menus at Left */
#menuleft ul li{position:relative;}
#menuleft li ul{position:absolute;left:180px;top:0;display:none;padding:0;}
div#menuleft ul li:hover ul{display:block;}
Basically you say: "When the mouse is hovering over a parent list element, the child list should be visible."
This is done through the use of the :hover CSS attribute attached to the CSS rule of the parent node.
Consider the following HTML code:
<div class="parent">
<span class="label">Always on!</span>
<span class="hiddenLabel">Show on Mouse</span>
</div>
You achieve the effect you mention with the following css code:
.parent .hiddenLabel {
visibility: hidden;
}
.parent:hover .hiddenLabel {
visibility: visible;
}
This basically tells the browser that when a mouse hover event occurs on the "parent" node, the nodes with the CSS class of "hiddenLabel" will appear to the user and disappear when the mouse moves off the node.
This is the best practice for achieving this effect because of the load time and processing required for the javascript to start running on the page is longer than CSS being loaded.
Here is a great write-up on pseudo selectors and what each of them do: http://css-tricks.com/pseudo-class-selectors/
Take a look at jQuery and some plugins. See this site for a list of jQuery dropdown plugins. http://www.1stwebdesigner.com/resources/38-jquery-and-css-drop-down-multi-level-menu-solutions/