Dropline Menu in Wordpress - javascript

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

Related

Need to enforce edge of container on nav dropdown

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.

JavaScript IF function to recognise mobile device

I am currently creating a website where I have a sticky fixed header. The website is built on Bootstrap, however since I don't really like a lot of the Bootstrap headers, I decided to make a simple one myself.
http://quarndoncurtaindesign.besaba.com/
The sticky headers works fine with some minor problems. However on mobile it is a different story. Since obviously the header takes up a lot of room vertically, it takes up too much space on a mobile device.
I decided it would be best to keep the menu in its sticky state however I am using this Javascript to add a "sticky" class on some elements so I can target it in CSS.
$(window).scroll(function() {
if ($(this).scrollTop() > 1){
$('header').addClass("sticky");
$('header h1').addClass("sticky");
$('p#tagline').addClass("sticky");
$('ul').addClass("sticky");
$('a').addClass("sticky");
$('#top').addClass("sticky");
}
else{
$('header').removeClass("sticky");
$('header h1').removeClass("sticky");
$('p#tagline').removeClass("sticky");
$('ul').removeClass("sticky");
$('a').removeClass("sticky");
$('#top').removeClass("sticky");
}
});
Any advice pointing me in the right direction would be greatly appreciated.
It's good practice to use JS like this. By adding the class to the element you can then target the element using CSS.
There are a couple of issues with your approach however.
You only need to apply the 'sticky' class to the header. I don't see any reason why you would need to apply the sticky class to any other elements on the page.
Something like this should do the trick:
header.sticky {
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
body {
padding-top: 100px /* Height of header.*/
/*This will offset the content below the header */
}
Also, I don't think you even need to a JS if statement here as the header will always be sticky.
If you are having problems with the mobile view then you should use media queries to correct the offset of the content below the header
You might get more value out of CSS media-queries than JS code in this case. They will allow you to recognise devices by - amongst other things - their screen size, and to specify different layouts for different setups.
I agree with the first two answers that this is a use-case best suited for CSS and/or CSS media queries.
However, if you would still prefer to detect if the user is on a mobile device with JavaScript, you may be able to use the following (or a variation of the following) code:
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
// some code..
}
^ This code snippet was taken from https://stackoverflow.com/a/3540295/1525109

Mootools Fx.Slide & CSS styles?

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.

Mega dropdown menu with fixed place content

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

Accessibility of JavaScript drop down menu

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.

Categories