Permalink
Browse files

First release.

  • Loading branch information...
Tom Tom
Tom authored and Tom committed Feb 25, 2012
0 parents commit 01fdb621e05e176b49b5a1e388cb40818076aaa2
Showing with 291 additions and 0 deletions.
  1. BIN images/down.png
  2. BIN images/pull.png
  3. +123 −0 index.html
  4. +100 −0 reset.css
  5. +68 −0 style.css
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -0,0 +1,123 @@
+<html>
+
+ <head>
+
+ <title>Responsive Navigation</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
+
+ <link rel="stylesheet" type="text/css" href="style.css" />
+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script type="text/javascript" charset="utf-8">
+
+ function checkWidth () {
+
+ // Get the height of the div and set it in a variable called mabileNavHeight to access later
+ var mobileNavHeight = $('#mobile').height();
+
+ // Check to see if the browser width is less than 480px wide
+ if ($(window).width() < 481) {
+ $('#site').css({
+ // Change the CSS top value of #site to whatever mobileNavHeight outputs
+ top: mobileNavHeight + 'px !important'
+ });
+ // Scroll the window the height of mobileNavHeight
+ $(window).scrollTop(mobileNavHeight);
+ }
+
+ // Check to see if the browser width is more than 480px wide
+ else if ($(window).width() > 480) {
+ $('#site').css({
+ // Make sure the top value of #site is 0 so we don't see the space for the mobile nav
+ top: 0 + 'px'
+ });
+ // Scroll to the absolute top of the page
+ $(window).scrollTop(0);
+ }
+ }
+
+ $(document).ready(function(){
+ // Check the window size when page loads
+ checkWidth();
+ });
+
+ </script>
+
+ </head>
+
+ <body>
+
+ <nav id="mobile">
+ <ul class="group">
+ <li><a href="#">Home</a></li>
+ <li><a href="#">Portfolio</a></li>
+ <li><a href="#">Blog</a></li>
+ <li><a href="#">About</a></li>
+ <li><a href="#">Contact</a></li>
+ <li><a href="#">Twitter</a></li>
+ <li><a href="#">Dribbble</a></li>
+ <li><a href="#">A Longer Navigation Item</a></li>
+ </ul>
+ </nav>
+
+ <div id="site">
+
+ <header>
+ <nav id="main">
+ <ul>
+ <li><a href="#">Home</a></li>
+ <li><a href="#">Portfolio</a></li>
+ <li><a href="#">Blog</a></li>
+ <li><a href="#">About</a></li>
+ <li><a href="#">Contact</a></li>
+ <li><a href="#">Twitter</a></li>
+ <li><a href="#">Dribbble</a></li>
+ <li><a href="#">A Longer Navigation Item</a></li>
+ </ul>
+ </nav>
+ </header>
+
+ <div class="container">
+
+ <h1>Pull Down for Navigation Demo</h1>
+
+ <p><a href="http://inspectelement.com/tutorials/pull-down-for-navigation/">See the tutorial here</a></p>
+
+ <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
+
+ <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
+
+ <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
+
+ <style type="text/css">
+ .carbonad { margin-bottom: 20px; width: auto !important; padding: 0 15px 0 0 !important; border: none !important; background: #f7f7f7 !important; height: auto !important; position: relative; }
+ .carbonad-image { margin: 0 15px 0 0 !important; }
+ .carbonad-text, .carbonad-tag { text-align: left !important; float: none !important; width: auto !important; }
+ .carbonad-text { position: relative; top: 15px; padding-right: 15px !important; }
+ .carbonad-tag { position: absolute; bottom: 5px; right: 5px; width: 100px; }
+ </style>
+
+ <div id="carbonads-container"><div class="carbonad"><div id="carbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/12113/carbon_2_1_0_HORIZ"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
+
+ <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
+
+ <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
+
+ <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
+ <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
+
+ <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
+
+ <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
+ <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
+
+ <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
+
+ <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
+
+ </div>
+
+ </div>
+
+ </body>
+
+</html>
100 reset.css
@@ -0,0 +1,100 @@
+/*
+html5doctor.com Reset Stylesheet
+v1.4
+2009-07-27
+Author: Richard Clark - http://richclarkdesign.com
+*/
+
+html, body, div, span, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+abbr, address, cite, code,
+del, dfn, em, img, ins, kbd, q, samp,
+small, strong, sub, sup, var,
+b, i,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, dialog, figure, footer, header,
+hgroup, menu, nav, section, menu,
+time, mark, audio, video {
+ margin:0;
+ padding:0;
+ border:0;
+ outline:0;
+ font-size:100%;
+ vertical-align:baseline;
+ background:transparent;
+}
+body {
+ line-height:1; margin: 0;
+}
+
+article, aside, dialog, figure, footer, header,
+hgroup, nav, section {
+ display:block;
+}
+
+nav ul {
+ list-style:none;
+}
+
+blockquote, q {
+ quotes:none;
+}
+
+blockquote:before, blockquote:after,
+q:before, q:after {
+ content:'';
+ content:none;
+}
+
+a {
+ margin:0;
+ padding:0;
+ border:0;
+ font-size:100%;
+ vertical-align:baseline;
+ background:transparent;
+ outline: 0;
+}
+
+ins {
+ background-color:#ff9;
+ color:#000;
+ text-decoration:none;
+}
+
+mark {
+ background-color:#ff9;
+ color:#000;
+ font-style:italic;
+ font-weight:bold;
+}
+
+del {
+ text-decoration: line-through;
+}
+
+abbr[title], dfn[title] {
+ border-bottom:1px dotted #000;
+ cursor:help;
+}
+
+table {
+ border-collapse:collapse;
+ border-spacing:0;
+}
+
+hr {
+ display:block;
+ height:1px;
+ border:0;
+ border-top:1px solid #cccccc;
+ margin:1em 0;
+ padding:0;
+}
+
+input, select {
+ vertical-align:middle;
+}
+
@@ -0,0 +1,68 @@
+@import "reset.css";
+
+/* Float clearing goodness from Handcrafted CSS book by Dan Cederholm - http://handcraftedcss.com */
+.group:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
+* html .group { height: 1%; }
+*:first-child+html .group { min-height: 1px; }
+
+a { color: #21BBE1; text-decoration: none; font-weight: bold; }
+a:hover { color: #BE3F1C; }
+h1 { font-weight: bold; font-size: 1.25em; }
+h1, p { margin-bottom: 15px; line-height: 20px; }
+
+body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 100%; }
+
+
+
+/* Mobile nav not visible by desktop browsers but only set to visiblity hidden so jQuery can still detect the height of it
+-------------------------------------------------------------------------------------------------------------------------------------- */
+#mobile { visibility: hidden; background: #21BBE1; position: fixed; z-index: 100; width: 100%; }
+#mobile ul { margin: 0; }
+#mobile ul li { width: 50%; float: left; }
+#mobile a { color: #fff; padding: 15px 1.5em; display: block; border-bottom: 1px solid rgba(255, 255, 255, 0.25); text-decoration: none; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
+#mobile li:nth-of-type(2n-1) a { border-right: 1px solid rgba(255, 255, 255, 0.25); }
+/* ----------------------------------------------------------------------------------------------------------------------------------- */
+
+
+header { margin-bottom: 20px; }
+
+/* Main Navigation */
+nav#main { border-bottom: 1px solid #ccc; padding-bottom: 10px; }
+nav#main li { display: inline; margin-right: 5px; padding-right: 10px; border-right: 1px solid #ccc; line-height: 25px; }
+nav#main li:last-of-type { border-right: none; }
+
+#site { position: relative; z-index: 200; background: #fff; padding: 1em 1.5em; max-width: 50em; margin: 0 auto;
+ -webkit-box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.4);
+ -moz-box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.4);
+ box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.4);
+}
+
+
+/*
+Media Query Goodness --------------------------------------------------------------------------------------------------------------------
+-------------------------------------------------------------------------------------------------------------------------------------- */
+@media only screen and (min-width: 320px) and (max-width: 480px) {
+
+ /* Hide the main nav for mobile widths */
+ #main { display: none; }
+
+ /* Make the mobile nav visible for mobile widths */
+ #mobile { visibility: visible; }
+
+}
+
+@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
+
+ /* Add the "Pull Down for Navigation" bar, all controlled via CSS including the text */
+ header:before { width: 100%; display: block; content: "Pull Down for Navigation"; padding: 0.75em 1.5em; margin: -1em -1.5em 1em; color: #878787; text-shadow: 0 1px 1px rgba(255, 255, 255, 1); border-bottom: 1px solid #a6a6a6; background-origin: content-box; text-indent: 22px;
+ background-color: #e3e3e3;
+ background-image: url(images/pull.png), url(images/down.png);
+ background-position: right center, left center;
+ background-repeat: no-repeat;
+ }
+
+}
+
+@media only screen and (min-width: 481px) {
+ #site { top: 0px !important; }
+}

0 comments on commit 01fdb62

Please sign in to comment.