I have been following this and I have very minimal knowledge of JavaScript or of jQuery as of yet. I have run into a problem when developing a website with the use of the above tutorial to make a responsive mob navigation.
The Problem: Depending on what size the browser was when launching my html document the sub navigation toggle doesn't (It goes straight to the link instead of opening the sub navigation menu) work if the browser was launched in the range of around 600px's, but works when launched at a smaller screen sized or shrunked down (sometimes). I have been trying to figure out how to fix this problem
My code (Tried keeping it minamil, sorry):
$(document).ready(function() {
//Creating the show/hide function with jQuery Toggle
$("#navToggle a").on ('click', function(event){
event.preventDefault();
$("header > nav").slideToggle("medium");
$("#logo").toggleClass("menuUp menuDown");
});
//Tidying up the Navigation Menu
$(window).resize(function() {
if($( window ).width() >= "600") {
$("header > nav").css("display", "block");
$("header > nav > ul > li > a").siblings().removeAttr("style");
if($("#logo").attr('class') == "menuDown") {
$("#logo").toggleClass("menuUp menuDown");
}
}
else {
$("header > nav").css("display", "none");
//document.getElementById("categories").href = "categories/index.html";
}
});
//Creating the Drop Down Menu for Mobile Devices
$("header > nav > ul > li > a").click(function(e) {
if($( window ).width() <= "600") {
if($(this).siblings().size() > 0 ) {
event.preventDefault();
$(this).siblings().slideToggle("fast")
$(this).children(".toggle").html($(this).children(".toggle").html() == 'close' ? 'expand' : 'close');
}
}
});
});.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1;
}
/* Navigation */
/* Mobile */
header > div#logo {
line-height: 70px;
position: relative;
}
header > .menuDown {
box-shadow: 0 3px 5px rgba(0,0,0,.15);
}
header > .menuUp {
box-shadow: none;
}
header > div#logo > h1 {
font-size: 48px; font-size: 3rem; /* 48px fallback */
font-weight: bold;
text-rendering: optimizeLegibility;
}
header > div#logo > div#navToggle {
background-color: rgba(0,0,0,.15);
position: absolute;
right: 0;
top: 0;
transition: 300ms all ease;
}
header > div#logo > div#navToggle:hover {
background-color: rgba(0,0,0,.1);
}
header > div#logo > div#navToggle > a {
color: rgba(255,255,255,.85);
display: block;
font-size: 0.85em;
font-weight: 600;
padding: 0 2.5rem;
text-decoration: none;
transition: 300ms all ease;
}
header > div#logo > div#navToggle:hover > a {
color: rgba(255,255,255,1);
}
header > nav {
background-color: rgba(0,0,0,0.20);
display: none;
flex: 1;
transform: 300ms all ease;
}
header nav > ul {
list-style-type: none;
}
header nav > ul > li {
border-bottom: 1px dotted rgba(0,0,0,.1);
position: relative;
}
header nav > ul > li:last-of-type {
border-bottom: none;
}
header nav > ul > li > a {
display: block;
color: rgba(0,0,0,.65);
font-weight: 700;
padding: 1.5rem 0;
text-decoration: none;
transition: 250ms all ease;
}
header nav > ul > li > a:visited {
color: rgba(0,0,0,.65);
}
header nav > ul > li > a span.toggle {
background-color: rgba(0,0,0,.05);
border-radius: 3rem;
color: rgba(0,0,0,.25);
font-size: 0.75em;
font-weight: 500;
padding: 2px 8px;
text-transform: lowercase;
}
header nav > ul > li > a span.caret {
display: none;
}
header > nav > ul > li:hover > a {
color: rgb(140, 193, 193);
}
header > nav > ul > li > nav {
background-color: rgb(51,51,51);
border-radius: 1.5em;
box-shadow: 0 2px 8px rgba(0,0,0,.6);
display: none;
overflow: hidden;
position: absolute;
right: 5%;
width: 90%;
z-index: 100;
text-align: left;
}
header > nav > ul > li > nav > ul > li > a {
color: rgba(255,255,255,.85);
transition: 300ms all ease;
font-size: 14px; /* Modify till find correct size */
}
header > nav > ul > li > nav > ul > li > a:visited {
color: rgba(255,255,255,.85);
}
header > nav > ul > li > nav > ul > li:hover > a {
background-color: rgba(0,0,0,.6);
color: rgba(255,255,255,1);
}
@media only screen and (min-width: 48rem) {
/* For tablets @768px: */
header > div#logo > div#navToggle {
display: none;
}
header {
background-color: white;
flex-direction: row;
line-height: 90px;
padding: 0 3rem;
position: fixed;
width: 100%;
display:inline;
}
header > div#logo {
background-color: transparent;
line-height: 90px;
}
header > div#logo > h1 {
color: rgb(140, 193, 193);
}
header > nav {
background-color: transparent;
display: block;
}
header > nav > ul {
display: flex;
flex-flow: row wrap;
justify-content:space-around;
}
header nav > ul > li {
border-bottom: none;
}
header nav > ul > li > a {
padding: 0 1.25rem;
}
header nav > ul > li > a span.toggle {
display: none;
}
header nav > ul > li > a span.caret {
border-bottom: 4px solid transparent;
border-top: 4px solid rgba(0,0,0,.65);
border-right: 4px solid transparent;
border-left: 4px solid transparent;
border-radius: 1px;
content: "";
display: inline-block;
height: 0;
margin: 0 0 0 .25rem;
transition: 250ms all ease;
width: 0;
vertical-align: middle;
}
header nav > ul > li:hover > a span.caret {
border-top-color: rgb(140, 193, 193);
transform: rotate(270deg);
}
header > nav > ul > li:hover > nav {
background-color: rgb(51,51,51);
border-radius: .25em;
box-shadow: 0 2px 8px rgba(0,0,0,.6);
display: block;
line-height: 3em;
right: -50%;
width: 12.25rem; /* 196px */
}
}
@media screen and (min-width: 95.625rem) {
header {
display:flex
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<head>
<meta charset="utf-8">
<meta name="description" content="Daily technology walkthroughs for everyones needs ">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The Daily Tech Walkthroughs</title>
</head>
<header class="clearfix">
<div id="logo" class="menuUp">
<h1><a href="index.html"> The Daily Tech <br> Walkthroughs </a></h1>
<div id="navToggle"><a href="#">Menu</a></div>
</div>
<nav class="clearfix primary-nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="walkthroughs/index.html">Walkthroughs</a></li>
<li id="mobile-version-click">
<a href="categories/index.html"> Categories <span class="toggle">Expand</span><span class="caret"></span></a>
<nav>
<ul>
<li><a href="categories/index.html">All Categories</a></li>
<li><a href="categories/computers/index.html">Computers</a></li>
<li><a href="categories/consoles/index.html">Consoles</a></li>
<li><a href="categories/phones-tablets/index.html">Phones and Tablets</a></li>
<li><a href="categories/gadgets/index.html">Gadgets</a></li>
<li><a href="categories/other-tech/index.html">Other Technology</a></li>
</ul>
</nav>
</li>
<li><a href="create_a_walkthrough.html">Create a Walkthrough</a></li>
<li><a href="help/index.html">Help</a></li>
<li><a href="about.html">About</a></li>
<li id="mobile-version-click">
<a href="users/index.html">User <span class="toggle">Expand</span><span class="caret"></span></a>
<nav>
<ul>
<li><a href="users/index.html">Profile</a></li>
<li><a href="users/settings.html">Settings</a></li>
<li><a href="users/logout.html">Logout</a></li>
</ul>
</nav>
</li>
<li><div class="search"><input type="search" placeholder="search..." /></div></li>
</ul>
</nav>
</header>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire