While working on WPMimic, a bbPress theme that is now being converted over to WP and bbPress 2.0 (the plugin one). I made a simple pure css dropdown nav. The problem with the css dropdown nav is that it doesn’t work on mobile devices simply because touch screen doesn’t have a hover over function. To solve this problem, I believe the best way to approach this is/was through javascript (jQuery).
The idea is if I am browsing from a normal desktop browsers, to activate the drop down all I would need to do is hover my mouse over. But if I’m on the mobile devices like an iPad or an iPhone, then I’d need to click on the link to activate the drop down. Lets dive in deeper and say, if my desktop browser javascript is disabled, the drop down nav needs to be a pure css nav.
I know what you’re thinking, why don’t I just use the javascript to target the iPhone or iPad and leave the desktop browser as pure css. Well, I didn’t plan on using javascript but now that i’m doing it I might as well make it animate.
There is one draw back that I have yet to find a solution to yet. If you click on the parent link on these touch devices to activate the drop down, two things could happen. One, the browser will activate the click request and take you to the link that you clicked on and also activate the drop down nav as well. Two, activate the drop down nav but not the link. I’ll leave this problem open until I find a proper way to handle this. Alright, lets get to the code.
HTML
You can find the html and css in this post. I did make two small changes to the css and that is replacing.
1
2
3
4
5
6
| // Find these two lines
#nav ul {display: none;}
#nav li:hover ul {display: block; position: absolute; top: 25px; left: 0; background: #fff; width: 175px;}
// Replace with this
#nav ul {display: none; position: absolute; top: 25px; left: 0; background: #fff; width: 175px;} |
Javascript/jQuery
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| $(function (){
// find the mobiles devices user-agent names
var ipad = navigator.platform.indexOf("iPad") != -1;
var iphone = navigator.platform.indexOf("iPhone") != -1;
var ipod = navigator.platform.indexOf("iPod") != -1;
var android = navigator.platform.indexOf("android")>=0;
// if is mobile devices
if (ipad || iphone || ipod || android) {
$("#nav li").children("ul").hide();
$("#nav li a").click(function (){
// if childen ul is hidden, click will show (slideDown)
if( $(this).siblings("ul").is(":hidden")==true){
$("#nav li").children("ul").slideUp(); // hiding all childen ul first
$(this).siblings("ul").slideDown(); // activate this ul
}
else {
$(this).siblings("ul").slideUp();
}
return false; // disable parent link
});
}
else {
$("#nav").children("li").hover(function (){
$(this).children("ul").stop().slideDown();
},function (){
$("#nav").children("li").children("ul").slideUp();
});
}
}); |
Use CSS When Javascript is Disabled
1
2
3
4
5
| <noscript>
<style type="text/css">
#nav li:hover ul {display: block;}
</style>
</noscript> |
I realized that there are a lot of mobiles devices out there, but I honestly don’t care for those devices other than the iOS and Android. Maybe I’ll add windows phone and webOS once I have the device.
DEMO
