Treehouse Contest - Responsive Nav

Developer
Tim Ruby
Size
6,007 Kb
Views
42,504
  1. Treehouse Contest - Responsive Nav Previews
  2. Treehouse Contest - Responsive Nav HTML Codes
  3. Treehouse Contest - Responsive Nav CSS Codes
  4. Treehouse Contest - Responsive Nav JS Codes

How do I make an treehouse contest - responsive nav?

Put this together today in my spare time at work for the Team Treehouse Responsive Navigation Contest. There is no such thing as too much practice.. What is a treehouse contest - responsive nav? How do you make a treehouse contest - responsive nav? This script and codes were developed by Tim Ruby on 03 July 2022, Sunday.

Treehouse Contest - Responsive Nav Previews
IQ Test

Treehouse Contest - Responsive Nav - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Treehouse Contest - Responsive Nav</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);
@import url(http://weloveiconfonts.com/api/?family=entypo);
[class*="entypo-"]:before { font-family: 'entypo', sans-serif;
}
.cf:before, .cf:after { content: " "; display: table;
}
.cf:after { clear: both;
}
.cf { *zoom: 1;
}
* { box-sizing: border-box;
}
body { margin: 0; padding: 0; width: 100%; height: 100%; background: #c4e9d9; font-size: 16px; font-family: "Open Sans"; font-weight: 300;
}
a { text-decoration: none;
}
.left { float: left;
}
.right { float: right;
}
.row { width: auto; margin: 0 auto; max-width: 62.5em;
}
h1 { min-width: 320px; text-align: center; color: #3EA377;
}
nav { position: relative; margin: 20px auto 0; padding: 0; max-width: 62.5em; min-width: 20em; background: #FFF4E1; line-height: 3.125em; overflow: visible; border: 1px solid white; border-radius: 6px;
}
@media only screen and (max-width: 62.5em) { nav { margin-top: 0; border: 0; border-radius: 0; }
}
nav:before, nav:after { content: ""; display: table; clear: both;
}
nav ul { margin: 0; padding: 0; display: inline; width: auto; height: auto !important; list-style: none;
}
@media only screen and (max-width: 45em) { nav ul { display: none; }
}
nav ul li { float: right; margin: 0; padding: 0; text-align: center; cursor: pointer;
}
@media only screen and (max-width: 45em) { nav ul li { display: block; width: 100%; text-align: left; border-bottom: 1px solid #ffe1ae; }
}
@media only screen and (max-width: 45em) { nav ul li:hover { background: #ffebc8; }
}
nav ul li > a { padding: 0 20px; line-height: 3.125em; color: #3EA377; font-size: 0.875em; font-weight: 600; width: 100%;
}
nav ul li > a span { margin-right: 4px; color: #307e5c;
}
nav ul li > a:hover span { color: #F09F47;
}
.has-child { position: relative; left: 0;
}
.has-child:after { position: absolute; margin-top: -5px; top: 27px; right: 5px; content: ""; width: 0px; height: 0px; border-style: solid; border-width: 8px 5px 0 5px; border-color: #F09F47 transparent transparent transparent;
}
@media only screen and (max-width: 45em) { .has-child:after { position: absolute; margin-top: -5px; top: 25px; right: 20px; content: ""; width: 0px; height: 0px; border-style: solid; border-width: 10px 5px 0 5px; border-color: #307e5c transparent transparent transparent; }
}
.has-child .dropdown { position: absolute; left: -40px; z-index: 99; display: none; margin-top: 10px; width: 200px; background: #fffbf5; border-radius: 6px;
}
@media only screen and (max-width: 45em) { .has-child .dropdown { position: relative; left: 0; z-index: auto; margin-top: 0; display: block; width: 100%; border-radius: 0; }
}
.has-child .dropdown:after { position: absolute; top: -10px; left: 50%; margin-left: -10px; content: ""; width: 0px; height: 0px; border-style: solid; border-width: 0 10px 10px 10px; border-color: transparent transparent white transparent;
}
@media only screen and (max-width: 45em) { .has-child .dropdown:after { border: 0; }
}
.has-child .dropdown > li { float: left; width: 100%; font-size: 0.875em; font-weight: 600; color: #3EA377; border-bottom: 1px solid #EFEFEF;
}
@media only screen and (max-width: 45em) { .has-child .dropdown > li { padding-left: 20px; background: #fffbf5; border-bottom-color: #ffebc8; }
}
.has-child .dropdown li a { display: block; padding: 10px;
}
.has-child .dropdown li a:hover { color: #296c4f;
}
.logo { float: left; margin: 0; padding: 0 15px; font-size: 1.25em; font-weight: 700; color: #FFF4E1; background: #F09F47; border-right: 1px solid white; border-radius: 6px 0 0 6px;
}
@media only screen and (max-width: 45em) { .logo { width: 100%; border: 0; border-radius: 0; }
}
@media only screen and (max-width: 62.5em) { .logo { border-radius: 0; }
}
#toggle-menu { position: absolute; right: 1em; top: 0; display: none; cursor: pointer; font-size: 1.5em; color: #FFF4E1;
}
@media only screen and (max-width: 45em) { #toggle-menu { display: block; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="container"> <div class="row"> <nav role="navigation"> <span class="entypo-menu" id="toggle-menu"></span> <div class="logo"> <span class="entypo-compass"></span>MyTracks </div> <ul> <li><a href="#">About</a></li> <li class="has-child"><a href="#">Features</a> <ul class="dropdown"> <li><a href="#">Track Route</a></li> <li><a href="#">Organize Event</a></li> <li><a href="#">Gather Statistics</a></li> <li><a href="#">Social Sharing</a></li> </ul> </li> <li><a href="#">Explore</a></li> <li><a href="#">Support</a></li> <li><a href="#">Sign Up</a></li> </ul> </nav> </div> <div class="row"> <h1>&larr; RESIZE ME &rarr;</h1> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Treehouse Contest - Responsive Nav - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);
@import url(http://weloveiconfonts.com/api/?family=entypo);
[class*="entypo-"]:before { font-family: 'entypo', sans-serif;
}
.cf:before, .cf:after { content: " "; display: table;
}
.cf:after { clear: both;
}
.cf { *zoom: 1;
}
* { box-sizing: border-box;
}
body { margin: 0; padding: 0; width: 100%; height: 100%; background: #c4e9d9; font-size: 16px; font-family: "Open Sans"; font-weight: 300;
}
a { text-decoration: none;
}
.left { float: left;
}
.right { float: right;
}
.row { width: auto; margin: 0 auto; max-width: 62.5em;
}
h1 { min-width: 320px; text-align: center; color: #3EA377;
}
nav { position: relative; margin: 20px auto 0; padding: 0; max-width: 62.5em; min-width: 20em; background: #FFF4E1; line-height: 3.125em; overflow: visible; border: 1px solid white; border-radius: 6px;
}
@media only screen and (max-width: 62.5em) { nav { margin-top: 0; border: 0; border-radius: 0; }
}
nav:before, nav:after { content: ""; display: table; clear: both;
}
nav ul { margin: 0; padding: 0; display: inline; width: auto; height: auto !important; list-style: none;
}
@media only screen and (max-width: 45em) { nav ul { display: none; }
}
nav ul li { float: right; margin: 0; padding: 0; text-align: center; cursor: pointer;
}
@media only screen and (max-width: 45em) { nav ul li { display: block; width: 100%; text-align: left; border-bottom: 1px solid #ffe1ae; }
}
@media only screen and (max-width: 45em) { nav ul li:hover { background: #ffebc8; }
}
nav ul li > a { padding: 0 20px; line-height: 3.125em; color: #3EA377; font-size: 0.875em; font-weight: 600; width: 100%;
}
nav ul li > a span { margin-right: 4px; color: #307e5c;
}
nav ul li > a:hover span { color: #F09F47;
}
.has-child { position: relative; left: 0;
}
.has-child:after { position: absolute; margin-top: -5px; top: 27px; right: 5px; content: ""; width: 0px; height: 0px; border-style: solid; border-width: 8px 5px 0 5px; border-color: #F09F47 transparent transparent transparent;
}
@media only screen and (max-width: 45em) { .has-child:after { position: absolute; margin-top: -5px; top: 25px; right: 20px; content: ""; width: 0px; height: 0px; border-style: solid; border-width: 10px 5px 0 5px; border-color: #307e5c transparent transparent transparent; }
}
.has-child .dropdown { position: absolute; left: -40px; z-index: 99; display: none; margin-top: 10px; width: 200px; background: #fffbf5; border-radius: 6px;
}
@media only screen and (max-width: 45em) { .has-child .dropdown { position: relative; left: 0; z-index: auto; margin-top: 0; display: block; width: 100%; border-radius: 0; }
}
.has-child .dropdown:after { position: absolute; top: -10px; left: 50%; margin-left: -10px; content: ""; width: 0px; height: 0px; border-style: solid; border-width: 0 10px 10px 10px; border-color: transparent transparent white transparent;
}
@media only screen and (max-width: 45em) { .has-child .dropdown:after { border: 0; }
}
.has-child .dropdown > li { float: left; width: 100%; font-size: 0.875em; font-weight: 600; color: #3EA377; border-bottom: 1px solid #EFEFEF;
}
@media only screen and (max-width: 45em) { .has-child .dropdown > li { padding-left: 20px; background: #fffbf5; border-bottom-color: #ffebc8; }
}
.has-child .dropdown li a { display: block; padding: 10px;
}
.has-child .dropdown li a:hover { color: #296c4f;
}
.logo { float: left; margin: 0; padding: 0 15px; font-size: 1.25em; font-weight: 700; color: #FFF4E1; background: #F09F47; border-right: 1px solid white; border-radius: 6px 0 0 6px;
}
@media only screen and (max-width: 45em) { .logo { width: 100%; border: 0; border-radius: 0; }
}
@media only screen and (max-width: 62.5em) { .logo { border-radius: 0; }
}
#toggle-menu { position: absolute; right: 1em; top: 0; display: none; cursor: pointer; font-size: 1.5em; color: #FFF4E1;
}
@media only screen and (max-width: 45em) { #toggle-menu { display: block; }
}

Treehouse Contest - Responsive Nav - Script Codes JS Codes

var w = $(window).width(), toggle	= $('#toggle-menu'), menu	= $('nav ul'), hasChild = $('.has-child'), dropdown = $('.dropdown');
$(function() { $(toggle).on('click', function(e) { e.preventDefault(); menu.toggle(); }); $(hasChild).click(function(e) { e.preventDefault(); dropdown.toggle(); });
});
$(window).resize(function(){ if(w > 320 && menu.is(':hidden')) { menu.removeAttr('style');}
});
Treehouse Contest - Responsive Nav - Script Codes
Treehouse Contest - Responsive Nav - Script Codes
Home Page Home
Developer Tim Ruby
Username TimRuby
Uploaded July 03, 2022
Rating 4.5
Size 6,007 Kb
Views 42,504
Do you need developer help for Treehouse Contest - Responsive Nav?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Tim Ruby (TimRuby) Script Codes
Name
CSS Only 3D Bar Graph
Playing with jQuery. Sign Up Drop Down Section.
Animated Service Tiles
SVG Circle Documentation
Flyout Contact Modal
Editable Event Calendar Widget
UI from memory
Revolving Text Landing Page Trial
Rebuilding Treehouse Tracks Page
V-Card WIP
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!