Reputation: 628
I have 2 separate menus in different places on a page like this:
<div class="TopNav">
<ul>
<li><a href="">one</a></li>
<li><a href="">two</a></li>
<li><a href="">three</a></li>
</ul>
</div>
<div class="LowerNav">
<ul>
<li><a href="">Item 1</a></li>
<li><a href="">Item 2</a></li>
<li><a href="">Item 3</a></li>
</ul>
</div>
Is there a way a can combine both of the navigations in a full width style toggle drop down when the device width is less the 768?
so they will turn into:
<div class="BothNav">
<ul>
<li><a href="">one</a></li>
<li><a href="">two</a></li>
<li><a href="">three</a></li>
<li><a href="">Item 1</a></li>
<li><a href="">Item 2</a></li>
<li><a href="">Item 3</a></li>
</ul>
</div>
Upvotes: 2
Views: 2520
Reputation: 205987
Simply LIVE DEMO:
var $LowerNavLI = $('.LowerNav li'),
$TopNav = $('.TopNav');
function navResize(){
var mob = window.innerWidth<768;
$LowerNavLI.appendTo((mob?".TopNav":".LowerNav")+' ul');
$TopNav[mob?"addClass":"removeClass"]('BothNav');
}
navResize();
$(window).resize(navResize);
...which is a brutality of:
var $LowerNavLI = $('.LowerNav li');
function navResize(){
var winW = window.innerWidth;
var appended = false;
if(winW < 768 && !appended ){
appended = true;
$LowerNavLI.appendTo('.TopNav ul');
$('.TopNav').addClass('BothNav');
}else{
appended = false;
$LowerNavLI.appendTo('.LowerNav ul');
$('.TopNav').removeClass('BothNav');
}
}
navResize();
$(window).resize(function(){
navResize();
});
Upvotes: 5
Reputation: 56
You could go about a few ways here, you could just make 3 navigations one top, one bottom and one mobile and just hide the ones who should not be visible.
for example:
<div class="TopNav hideOnPhone">
<ul>...</ul>
</div>
<div class="LowerNav hideOnPhone">
<ul>...</ul>
</div>
<div class="mobileNav hideOnDesktop">
<ul>...</ul>
</div>
@media screen and (max-width: 767px) {
.hideOnPhone {
display:none;
}
}
@media screen and (min-width: 768px) {
.hideOnDesktop{
display:none;
}
}
Or if you prefere to do it serverside use a php script like mobile_detect http://code.google.com/p/php-mobile-detect/
Example with php:
<?php
include 'Mobile_Detect.php';
$detect = new Mobile_Detect();
if ($detect->isMobile()) { ?>
<div class="TopNav">
<ul>...</ul>
</div>
<div class="LowerNav">
<ul>...</ul>
</div>
<?php } else { ?>
<div class="mobileNav">
<ul>...</ul>
</div>
<?php } ?>
There already have been posted two answers using jQuery which are exactly what your looking for I guess. :)
Upvotes: 1