Init commit

fpmweb · Mar 29, 2016 · daab931 · daab931
1 parent 0e5dd50
commit daab931
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+*.bat
+*.DS_Store
+*.idea
diff --git a/css/footerMenu.css b/css/footerMenu.css
@@ -0,0 +1,37 @@
+body {
+  height: 900px;
+}
+
+#footerMenu {
+  background: black;
+  width: 100%;
+  height: 0px;
+  position: fixed;
+  z-index: 300;
+  bottom: 0;
+  overflow: none;
+  left: 0;
+  -moz-transition: all 0.4s ease-in-out;
+  -o-transition: all 0.4s ease-in-out;
+  transition: all 0.4s ease-in-out;
+  -webkit-transition: all 0.4s ease-in-out;
+}
+
+#footerMenu.show {
+  height: 65px;
+  -moz-transition: all 0.4s ease-in-out;
+  -o-transition: all 0.4s ease-in-out;
+  transition: all 0.4s ease-in-out;
+  -webkit-transition: all 0.4s ease-in-out;
+}
+
+#footerMenu ul.navigation li {
+  float: left;
+  margin-right: 16px;
+  display: block;
+}
+
+#footerMenu ul.navigation li a:hover {
+    background-color: #555;
+    color: white;
+}
diff --git a/footerMenu.html b/footerMenu.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link type="text/css" rel="stylesheet" media="screen" href="css/footerMenu.css" />
+</head>
+<body>
+
+Scroll Down :)
+
+<div id="footerMenu">
+  <div class="content-wrap">
+    <ul class="navigation">
+      <li><a href="#menu1">menu1</a></li>
+      <li><a href="#menu2">menu2</a></li>
+      <li><a href="#menu3">menu3</a></li>
+      <li><a href="#menu4">menu4</a></li>
+      <li><a href="#menu5">menu5</a></li>
+      <li><a href="#menu6">menu6</a></li>
+    </ul>
+  </div>
+</div>
+
+<script src="https://code.jquery.com/jquery-2.2.2.min.js" integrity="sha256-36cp2Co+/62rEAAYHLmRCPIych47CvdM+uTBJwSzWjI=" crossorigin="anonymous"></script>
+<script type="text/javascript" src="js/footerMenu.js"></script>
+<script>
+	$("body").footerMenu();
+</script>
+
+</body>
+</html>
diff --git a/js/footerMenu.js b/js/footerMenu.js
@@ -0,0 +1,11 @@
+(function( $ ){
+	$.fn.footerMenu = function() {
+		$(window).scroll(function() {
+	    	if ($(document).scrollTop() > 100) {
+	      		$('#footerMenu').addClass("show");
+	    	} else {
+	      		$('#footerMenu').removeClass("show");
+	    	}
+	  	});
+	};
+})( jQuery );