So currently, I have two menu's that work perfectly fine on their own as I expect them to, however, when I try to merge them into one responsive menu I'm coming up with a few oddities that I thought I'd reference the StackOverflow community on. See the code below and two JSFiddle links below to see examples of the navigations:
Desktop: http://jsfiddle.net/ckteb5np/5/
HTML BEGINS
<nav id="sub" class="clearfix">
<div id="lefty"><</div>
<div class="container_element">
<div class="inner_container">
<a href="#"><div class="box">Estimate</div></a>
<a href="#"><div class="box">About</div></a>
<a href="#"><div class="box">Customer Information</div></a>
<a href="#"><div class="box">Financing</div></a>
<a href="#"><div class="box">Careers</div></a>
<a href="#"><div class="box">Locate Us</div></a>
<a href="#"><div class="box">Inspiration</div></a>
<span class="clearfix"></span>
</div>
</div>
<div id="righty">></div>
</nav>
HTML ENDS
DESKTOP CSS BEGINS
.container_element {
max-width:1200px;
margin:0 auto;
text-align:center;
}
.container_element .box {
color: #fff;
font-family:helvetica, sans-serif;
display:block;
float:left;
padding:10px 2%;
}
.container_element .box:hover {
background:#007FEB;
}
nav#sub {
border-bottom:#00325a solid 3px;
/* Old browsers */
background: #004173;
/* FF3.6+ */
background: -moz-linear-gradient(top, #004173 0%, #014f8d 100%);
/* Chrome,Safari4+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #004173), color-stop(100%, #014f8d));
/* Chrome10+,Safari5.1+ */
background: -webkit-linear-gradient(top, #004173 0%, #014f8d 100%);
/* Opera 11.10+ */
background: -o-linear-gradient(top, #004173 0%, #014f8d 100%);
/* IE10+ */
background: -ms-linear-gradient(top, #004173 0%, #014f8d 100%);
/* W3C */
background: linear-gradient(to bottom, #004173 0%, #014f8d 100%);
/* IE6-9 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#004173', endColorstr='#014f8d', GradientType=0);
-webkit-box-shadow: 0 4px 6px 0 #BFBFBF;
box-shadow: 0 4px 6px 0 #BFBFBF;
}
#sub a {
color:#fff;
font-size:10pt;
text-decoration:none;
font-weight:400;
}
#lefty, #righty {
display:none;
}
.clearfix:before, .clearfix:after {
content:" ";
display: table;
}
.clearfix:after {
clear: both;
}
/* * For IE 6/7 only * Include this rule to trigger hasLayout and contain floats. */
.clearfix {
*zoom: 1;
}
DESKTOP CSS ENDS
Mobile: http://jsfiddle.net/6qmg7m4u/1/ REFERENCE HTML ABOVE IN DESKTOP
MOBILE CSS BEGINS
.box {
width:400px;
height:30px;
line-height: 29px;
padding:10px 0 0 0;
color:#fff;
float:left;
text-decoration:none;
text-align:center;
font-family:helvetica, sans-serif;
}
.box:hover {
background:#007FEB;
}
.container_element {
white-space:nowrap;
width:400px;
margin-left: 10px;
overflow-x:hidden;
display:inline-block;
overflow-y:hidden;
}
.inner_container {
width:10000px;
}
#lefty, #righty {
width: 35px;
display: inline-block;
height: 30px;
text-align: center;
color: #fff;
line-height: 50px;
cursor: pointer;
font-size: 24px;
}
#lefty {
float:left;
}
#righty {
float:right;
}
nav#sub {
background: #004173;
background: linear-gradient(to bottom, #004173 0%, #014f8d 100%);
background: -moz-linear-gradient(top, #004173 0%, #014f8d 100%);
background: -ms-linear-gradient(top, #004173 0%, #014f8d 100%);
background: -o-linear-gradient(top, #004173 0%, #014f8d 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #004173), color-stop(100%, #014f8d));
background: -webkit-linear-gradient(top, #004173 0%, #014f8d 100%);
border-bottom: #00325a solid 3px;
box-shadow: 0 4px 6px 0 #BFBFBF;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#004173', endColorstr='#014f8d', GradientType=0);
webkit-box-shadow: 0 4px 6px 0 #BFBFBF;
}
MOBILE CSS ENDS
MOBILE JS BEGINS
$(function () {
var state = 0;
var maxState = 6;
var winWidth = $(window).width();
$(window).resize(function () {
winWidth = $(window).width();
$('.box,.container_element').width(winWidth - 100);
$('.container_element').scrollLeft((winWidth - 100) * state);
}).trigger('resize');
$('#lefty').click(function () {
if (state == 0) {
state = maxState;
} else {
state--;
}
$('.container_element').animate({
scrollLeft: ((winWidth - 100) * state) + 'px'
}, 800);
});
$('#righty').click(function () {
if (state == maxState) {
state = 0;
} else {
state++;
}
$('.container_element').animate({
scrollLeft: ((winWidth - 100) * state) + 'px'
}, 800);
});
});
MOBILE JS ENDS
Thanks for letting me pick your brains! Sometimes a different pov is all you need.
I'm not sure but i think your problem lies in the fact you are using float:left
or float:right
and display:block
for aligning your menu horizontally? Why not use display:inline-block
with your a
and remove the divs inside?
Also: you aren't using css media queries for adjusting to mobile-menu but javascript which shouldn't be needed like that. You could use it to add the animations and scroll-position, but i believe it would be even possible with css-animations too. (albeit some js might still be required unless you use some framework).
I can't seem to find where your problem lies exactly, but removing as much JS as possible and switching from floats to inline blocks might help a lot.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.