I have implemented a navigation that slides out from the right-hand side of my website when the menu button is clicked. However, there seems to be an issue with the transition on the navigation not working properly on iPhones. Here's how I've set it up:
The HTML:
<nav id="main_nav">
<ul class="nav">
<li class="services"><a href="#services" class="anchor-animate"><span>services</span></a></li>
<li class="portfolio"><a href="#portfolio" class="anchor-animate"><span>portfolio</span></a></li>
<li class="contact"><a href="#contact" class="anchor-animate"><span>contact</span></a></li>
</ul>
<div class="social_wrapper">
<ul class="social">
<li class="linkedin"><a href="http://linkedin.com/in/jaredtomeck" target="_blank">Let's Connect on Linkedin</a></li>
<li class="twitter"><a href="http://twitter.com/jaredtomeck" target="_blank">Follow me on Twitter</a></li>
<li class="dribbble"><a href="http://dribbble.com/jaredtomeck" target="_blank">View my shots on Dribbble</a></li>
</ul>
</div>
</nav>
<!-- start #wrapper -->
<div id="wrapper">
<!-- start Header -->
<header id="main_header">
<h1 id="logo"><a href="#home" class="anchor-animate">jtwebfolio</a></h1>
<a href="#main_nav" class="menu-link"></a>
<a href="#" class="close-menu"></a>
</header>
<!-- end Header -->
</div>
<!-- end #wrapper -->
The jQuery:
// Add a class that determines whether the navigation hides or shows when menu-link is clicked
$('.menu-link').click(function(event){
event.preventDefault();
if($('#main_nav').hasClass('open')){
$('#main_nav').removeClass('open');
}else{
$('#main_nav').addClass('open');
}
});
The CSS:
#main_nav {
background: #3B3B3B;
height: 100%;
overflow: hidden;
position: fixed;
right: 0;
top: 0;
width: 7px;
z-index: 99;
-webkit-transition: width 0.4s ease;
-moz-transition: width 0.4s ease;
transition: width 0.4s ease;
}
#main_nav .nav {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
#main_nav .nav li {
height: 33.333333333%;
padding: 0 7px 0 10px;
text-align: center;
}
#main_nav .nav li a {
color: white;
font-family: "Panefresco400wtRegular", sans-serif, sans-serif;
font-weight: normal;
display: block;
font-size: .875em;
height: 100%;
letter-spacing: 3px;
margin: 0 auto;
position: relative;
text-decoration: none;
width: 90%;
}
#main_nav .nav li a span {
display: block;
position: absolute;
top: 52%;
width: 100%;
}
#main_nav .nav li.services {
background: #ff8772;
text-shadow: 0 1px 0 #ba5f4f;
}
#main_nav .nav li.services a {
background: url(../img/navicon_services.svg) no-repeat center 41%;
}
#main_nav .nav li.portfolio {
background: #009491;
text-shadow: 0 1px 0 #005a58;
}
#main_nav .nav li.portfolio a {
background: url(../img/navicon_portfolio.svg) no-repeat center 40%;
}
#main_nav .nav li.contact {
background: #ffc845;
text-shadow: 0 1px 0 #a7832c;
}
#main_nav .nav li.contact a {
background: url(../img/navicon_contact.svg) no-repeat center 43%;
}
#main_nav.open {
width: 50%;
}
#main_nav.open + #wrapper {
width: 100%;
}
#main_nav.open + #wrapper #main_header {
width: 70%;
}
When the menu button is clicked, jQuery adds a class called "open" to the menu and removes the class if the menu has already been clicked. The CSS defines the styles for displaying the navigation when clicked, including CSS3 transitions.
The transition does not seem to work as expected on iPhone devices, although it worked fine on a friend's Nexus 7. If anyone could help me figure out why the menu's transition doesn't work on iPhones, I would greatly appreciate it. I've tried various solutions but haven't had any luck yet.
Thank you in advance!