Last active
December 5, 2016 16:14
-
-
Save mattpetters/bc7d2ea066db7ad30471e541d8adbd05 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html class="no-js" lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Modern Navigation 2</title> | |
| <link rel="stylesheet" href="css/foundation.css" /> | |
| <link rel="stylesheet" href="css/custom.css" /> | |
| <link href='http://fonts.googleapis.com/css?family=Raleway:800' rel='stylesheet' type='text/css'> | |
| <script src="js/vendor/modernizr.js"></script> | |
| <script src="js/vendor/jquery.js"></script> | |
| <script src="js/script.js"></script> | |
| <script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.core.js"></script> | |
| <script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.slide.js"></script> | |
| </head> | |
| <body> | |
| <div id="container"> | |
| <div id="nav"> | |
| <ul> | |
| <li id="email"><a href="#mail-iface">Email</a></li> | |
| <li id="settings"><a href="#settings-iface">Settings</a></li> | |
| <li id="video"><a href="#video-iface">Video</a></li> | |
| <li id="search"><a href="#search-iface">Search</a></li> | |
| </ul> | |
| </div> | |
| <section id="mail-iface"> | |
| <div class="large-12 contents"> | |
| <img src="images/icon-email-large.png" /> | |
| <span class="labels" id="label-mail">My Mail Interface</span> | |
| </div> | |
| </section> | |
| <section id="settings-iface"> | |
| <div class="large-12 contents"> | |
| <img src="images/icon-cog-large.png" /> | |
| <span class="labels" id="label-settings">My Settings Interface</span> | |
| </div> | |
| </section> | |
| <section id="video-iface"> | |
| <div class="large-12 contents"> | |
| <img src="images/icon-video-large.png" /> | |
| <span class="labels" id="label-video">My Video Interface</span> | |
| </div> | |
| </section> | |
| <section id="search-iface"> | |
| <div class="large-12 contents"> | |
| <img src="images/icon-search-large.png" /> | |
| <span class="labels" id="label-search">My Search Interface</span> | |
| </div> | |
| </section> | |
| </div> | |
| <script src="js/foundation.min.js"></script> | |
| <script> | |
| $(document).foundation(); | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(document).ready(function() { | |
| $(function() { | |
| $('a[href*=#]:not([href=#])').click(function() { | |
| if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { | |
| var target = $(this.hash); | |
| target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); | |
| if (target.length) { | |
| $('html,body').animate({ | |
| scrollTop: target.offset().top | |
| }, 1000); | |
| return false; | |
| } | |
| } | |
| }); | |
| }); | |
| var emailOffset = $("#mail-iface").offset().top; | |
| var settingsOffset = $("#settings-iface").offset().top; | |
| var videoOffset = $("#video-iface").offset().top; | |
| var searchOffset = $("#search-iface").offset().top; | |
| var $w = $(window).scroll(function() { | |
| if ($w.scrollTop() >= emailOffset) { | |
| $("#email").css("background", "url(images/icon-email-active.png) no-repeat"); | |
| inactiveLinks("email"); | |
| } | |
| if ($w.scrollTop() >= settingsOffset) { | |
| $("#settings").css("background", "url(images/icon-cog-active.png) no-repeat"); | |
| inactiveLinks("settings"); | |
| } | |
| if ($w.scrollTop() >= videoOffset) { | |
| $("#video").css("background", "url(images/icon-video-active.png) no-repeat"); | |
| inactiveLinks("video"); | |
| } | |
| if ($w.scrollTop() >= searchOffset) { | |
| $("#search").css("background", "url(images/icon-search-active.png) no-repeat"); | |
| inactiveLinks("search"); | |
| } | |
| }); | |
| }); | |
| function inactiveLinks(exclude) { | |
| if (exclude != "email") | |
| $("#email").css("background", "url(images/icon-email-inactive.png) no-repeat"); | |
| if (exclude != "settings") | |
| $("#settings").css("background", "url(images/icon-cog-inactive.png) no-repeat"); | |
| if (exclude != "video") | |
| $("#video").css("background", "url(images/icon-video-inactive.png) no-repeat"); | |
| if (exclude != "search") | |
| $("#search").css("background", "url(images/icon-search-inactive.png) no-repeat"); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| html, body { | |
| height:100%; | |
| } | |
| section { | |
| height:100vh; | |
| position:relative; | |
| text-align:center; | |
| } | |
| .contents { | |
| width:50%; | |
| height:50%; | |
| overflow:auto; | |
| margin:auto; | |
| position:absolute; | |
| top:0;left:0;bottom:0;right:0; | |
| } | |
| #nav { | |
| z-index:2; | |
| position:fixed; | |
| height:50%; | |
| margin: auto auto auto 50px; | |
| top:0;left:0;bottom:0;right:0; | |
| } | |
| #mail-iface { background-color:#6d9117; } | |
| #settings-iface { background-color:#175391; } | |
| #video-iface { background-color:#701791; } | |
| #search-iface { background-color:#976919; } | |
| span.labels { | |
| font-family:'Raleway'; | |
| font-weight:800; | |
| text-transform:uppercase; | |
| font-size:1.7em; | |
| display:block; | |
| margin-top:20px; | |
| } | |
| #nav ul { | |
| list-style-type:none; | |
| } | |
| #nav ul li { | |
| margin-bottom:60px; | |
| min-height:44px; | |
| } | |
| #nav ul li a { | |
| color:#fff; | |
| display:block; | |
| padding-top:50px; | |
| font-size:.9em; | |
| } | |
| #nav ul li#email { | |
| background:url(../images/icon-email-active.png) no-repeat; | |
| width:43px; | |
| height:44px; | |
| } | |
| #nav ul li#settings { | |
| background:url(../images/icon-cog-inactive.png) no-repeat; | |
| width:43px; | |
| height:44px; | |
| } | |
| #nav ul li#settings a { | |
| margin-left:-5px; | |
| } | |
| #nav ul li#video { | |
| background:url(../images/icon-video-inactive.png) no-repeat; | |
| width:48px; | |
| height:44px; | |
| } | |
| #nav ul li#video a { | |
| margin-left: 5px; | |
| } | |
| #nav ul li#search { | |
| background:url(../images/icon-search-inactive.png) no-repeat; | |
| width:43px; | |
| height:44px; | |
| } | |
| span#label-mail { color:#9bca2c; } | |
| span#label-settings { color:#3b83ce; } | |
| span#label-video { color:#a63ace; } | |
| span#label-search { color:#cd9940; } | |
| @media only screen and (max-width: 40.063em) { | |
| #nav { | |
| height: auto; | |
| margin-top:40px; | |
| margin-left:10px; | |
| } | |
| #nav ul li { | |
| width:24% !important; | |
| display:inline; | |
| float:left; | |
| } | |
| #nav ul li a { | |
| font-size:.85em; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment