added js conditionals: check browser width, switch dropdown to on cli…

…ck for small screens
tessalt · Aug 29, 2012 · 1f9bbcf · 1f9bbcf
1 parent 19e673d
commit 1f9bbcf
Show file tree

Hide file tree

Showing 3 changed files with 133 additions and 16 deletions.
diff --git a/index.html b/index.html
@@ -1,9 +1,12 @@
+<!DOCTYPE html>
 <html>
 <head>
 	<title>Dropdowns</title>
 	<link rel="stylesheet" type="text/css" href="style.css">
 </head>
 <body>
+<div class="container">
+
 <a class="toggleMenu" href="#">Menu</a>
 <ul class="nav">
 	<li class="parent grandparent">
@@ -93,7 +96,98 @@
 			</li>
 		</ul>
 	</li>
+	<li class="parent grandparent">
+		<a href="#">Caninae</a>
+		<ul>
+			<li class="parent">
+				<a href="#">Canini</a>
+				<ul>
+					<li><a href="#">Canis</a></li>
+					<li><a href="#">Cuon</a></li>
+					<li><a href="#">Lyacon</a></li>
+					<li><a href="#">Atelocynus</a></li>
+					<li><a href="#">Cerdocyon</a></li>
+					<li><a href="#">Lycalopex</a></li>
+					<li><a href="#">Chrysocyon</a></li>
+					<li><a href="#">Speothos</a></li>
+				</ul>
+			</li>
+			<li>
+				<a href="#">Vulpini</a>
+				<ul>
+					<li><a href="#">Vulpes</a></li>
+					<li><a href="#">Urocyon</a></li>
+				</ul>
+			</li>
+		</ul>
+	</li>
+	<li class="parent grandparent">
+		<a href="#">Felidae</a>
+		<ul>
+			<li class="parent">
+				<a href="#">Panterinae</a>
+				<ul>
+					<li><a href="#">Panthera</a></li>
+					<li><a href="#">Uncia</a></li>
+					<li><a href="#">Neofelis</a></li>
+				</ul>
+			</li>
+			<li>
+				<a href="#">Felinae</a>
+				<ul>
+					<li><a href="#">Pardofelis</a></li>
+					<li><a href="#">Catopuma</a></li>
+					<li><a href="#">Letalurus</a></li>
+					<li><a href="#">Caracal</a></li>
+					<li><a href="#">Profelis</a></li>
+					<li><a href="#">Leopardus</a></li>
+					<li><a href="#">Lynx</a></li>
+					<li><a href="#">Puma</a></li>
+					<li><a href="#">Acinonyx</a></li>
+					<li><a href="#">Prionailurus</a></li>
+					<li><a href="#">Otocolobus</a></li>
+					<li><a href="#">Felis</a></li>
+				</ul>
+			</li>
+		</ul>
+	</li>
+	<li class="parent grandparent">
+		<a href="#">Ursidae</a>
+		<ul>
+			<li class="parent">
+				<a href="#">Ailuropodinae</a>
+				<ul>
+					<li><a href="#">Ailuractos</a></li>
+					<li><a href="#">Ailuropda</a></li>
+				</ul>
+			</li>
+			<li class="parent">
+				<a href="#">Tremactinae</a>
+				<ul>
+					<li><a href="#">Tremarctos</a></li>
+					<li><a href="#">Arctodos</a></li>
+					<li><a href="#">Arctotherium</a></li>
+					<li><a href="#">Pilonarctos</a></li>
+				</ul>
+			</li>
+			<li class="parent">
+				<a href="#">Ursinae</a>
+				<ul>
+					<li><a href="#">Agriotherium</a></li>
+					<li><a href="#">Helarctos</a></li>
+					<li><a href="#">Indarctos</a></li>
+					<li><a href="#">Melursus</a></li>
+					<li><a href="#">Ursavus</a></li>
+					<li><a href="#">Ursus</a></li>
+				</ul>
+			</li>
+		</ul>
+	</li>
+	<li><a href="#">Longer words</a></li>
+	<li><a href="#">Lorem Ipsum</a></li>
+	<li><a href="#">Stretchy Stretchy</a></li>
 </ul>
+</div>
 
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
 <script type="text/javascript" src="script.js"></script>

diff --git a/script.js b/script.js
@@ -1,16 +1,15 @@
 $(function() {
-	if ($(window).width() < 600) {
+	if ($(window).width() < 768) {
+		$(".toggleMenu").css("display", "inline-block");
 		$(".nav").hide();
-		$(".toggleMenu").click(function(e) {
+		$(".toggleMenu").click(function() {
 			$(".nav").toggle();
-			e.preventDefault();
 		});
-		$(".parent > a, .subParent > a").click(function(e){
-			$(this).parent().toggleClass("hover");
-			e.preventDefault();
-		})
+		$(".nav .parent a").click(function(){
+			$(this).parent("li").toggleClass("hover");
+		});
 	} else {
-		$(".parent, .subParent").hover(function(){
+		$(".nav .parent").hover(function() {
 			$(this).addClass("hover");
 		}, function() {
 			$(this).removeClass("hover");

diff --git a/style.css b/style.css
@@ -1,23 +1,30 @@
 body, nav, ul, li, a  {margin: 0; padding: 0;}
 body {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
 a {text-decoration: none;}
+.container {
+    width: 90%;
+    max-width: 980px;
+    margin: 10px auto;
+}
 .toggleMenu {
     display:  none;
+    background: #666;
+    padding: 10px 15px;
+    color: #fff;
 }
 .nav {
     list-style: none;
+     *zoom: 1;
+     background:#002a5c;
 }
 .nav:before,
 .nav:after {
-    content: " "; /* 1 */
-    display: table; /* 2 */
+    content: " "; 
+    display: table; 
 }
 .nav:after {
     clear: both;
 }
-.nav {
-    *zoom: 1;
-}
 .nav ul {
     list-style: none;
 }
@@ -31,13 +38,13 @@ a {text-decoration: none;}
     float: left;
 }
 .nav > li > a {
-    display: inline-block;
+    display: block;
 }
 .nav > li > ul {
     position: absolute;
     left: -9999px;
 }
-.nav > .parent:hover > ul {
+.nav > .parent.hover > ul {
     left: 0;
 }
 .nav li li ul {
@@ -47,15 +54,32 @@ a {text-decoration: none;}
 .nav li .parent {
     position:relative;
 }
-.nav li .parent:hover ul {
+.nav li .parent.hover ul {
     left: 100%;
     top: 0;
 }
 .nav li li a {
     display: block;
     background: #00418f;
+    position: relative;
+    z-index:100;
 }
 
 .nav li li li a {
     background:#0059c2;
+    z-index:200;
+}
+
+@media screen and (max-width: 768px) {
+    .nav > li {
+        float: none;
+    }
+    .nav ul {
+        display: block;
+        width: 100%;
+    }
+   .nav > .parent.hover > ul , .nav li .parent.hover ul {
+        position: static;
+    }
+
 }