Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- <title>Animated Menu</title>
- <meta name="description" content="A test">
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
- <script src="velocity.min.js" type="text/javascript"></script>
- <script src="velocity.ui.min.js" type="text/javascript"></script>
- <script src="main.js"></script>
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
- <link rel="stylesheet" href="main.css">
- </head>
- <body>
- <div class="container-fluid" id="menu">
- <div class="row mini">
- <div class="col-xs-6">test 1</div>
- <div class="col-xs-6">mini</div>
- </div>
- <div class="row mini">
- <div class="col-xs-6">test 2</div>
- <div class="col-xs-6">mini</div>
- </div>
- <div class="row mini">
- <div class="col-xs-6">test 3</div>
- <div class="col-xs-6">mini</div>
- </div>
- <div class="row">
- <div class="col-xs-6">test 4</div>
- <div class="col-xs-6">not mini</div>
- </div>
- <div class="row">
- <div class="col-xs-6">test 5</div>
- <div class="col-xs-6">not mini</div>
- </div>
- <div class="row">
- <div class="col-xs-12">
- <button id="miniButton">Mini</button>
- </div>
- </div>
- </div>
- <div id="content">
- </div>
- </body>
- #content {
- width: 100%;
- background-color: blue;
- }
- body {
- background-color: grey;
- }
- #menu {
- background-color: green;
- box-shadow: 5px 5px 2px #888888;
- }
- "use strict";
- var isMini = false;
- $( document ).ready(function() {
- console.log("ready");
- $("#content").height($(document).outerHeight(true) - $("#menu").outerHeight(true));
- $("#miniButton").click(function() {
- miniMenu();
- });
- window.addEventListener("resize", function() {
- $("#content").height($(document).outerHeight(true) - $("#menu").outerHeight(true));
- }, false);
- });
- function miniMenu() {
- if (isMini) {
- $("#menu div.mini").velocity("fadeIn", { duration: 1000 });
- } else {
- $("#menu div.mini").velocity("fadeOut", { duration: 1000 });
- }
- isMini = !isMini;
- console.log(isMini);
- };
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement