Scribd Logo
Upload

Welcome to Scribd!

  • Example

    Uploaded by

    krishnaoca
    14 views7 pages
    / / Get the height of the div and set it in a variable ca lled mabileNavHeight to access later var mobileNavHeight = $('#mobile').height(). Check to see if the browser width is less than 480px wide. Scroll to the absolute top of the page.

    Original Description:

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    / / Get the height of the div and set it in a variable ca lled mabileNavHeight to access later var mobileNavHeight = $('#mobile').height(). Check to see if the browser width is less than 480px wide. Scroll to the absolute top of the page.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    14 views7 pages

    Example

    Uploaded by

    krishnaoca
    / / Get the height of the div and set it in a variable ca lled mabileNavHeight to access later var mobileNavHeight = $('#mobile').height(). Check to see if the browser width is less than 480px wide. Scroll to the absolute top of the page.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 7

    <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/a jax/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 ca lled 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' }); // Scroll the window the height of mobileNavHeig ht [animation set at 0 to hide the navigation immediately] $('html, body').stop().animate({ 'scrollTop': $('#site').offset().top }, 0, 'swing', function () { window.location.hash = '#site'; }); } // 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 d on't see the space for the mobile nav top: 0 + 'px' }); // Scroll to the absolute top of the page $(window).scrollTop(0); //no need for $.animate, on desktop browser it works just fine } } $(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 senectu s 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 ege stas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> <p>Pellentesque habitant morbi tristique senectu s 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 ege stas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> <p>Pellentesque habitant morbi tristique senectu s 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 ege stas 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; backgr ound: #f7f7f7 !important; height: auto !important; position: relative; } .carbonad-image { margin: 0 15px 0 0 !im portant; }

    .carbonad-text, .carbonad-tag { text-ali gn: left !important; float: none !important; width: auto !important; } .carbonad-text { position: relative; top : 15px; padding-right: 15px !important; } .carbonad-tag { position: absolute; bott om: 5px; right: 5px; width: 100px; } </style> <div id="carbonads-container"><div class="carbonad"> <div id="carbon"></div><script type="text/javascript">var z = document.createEle ment("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engi ne.carbonads.com/z/12113/carbon_2_1_0_HORIZ"; var s = document.getElementsByTagN ame("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div> <p>Pellentesque habitant morbi tristique senectu s 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 ege stas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> <p>Pellentesque habitant morbi tristique senectu s 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 ege stas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> <p>Pellentesque habitant morbi tristique senectu s 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 ege stas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> <p>Pellentesque habitant morbi tristique senectu s 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 ege stas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> <p>Pellentesque habitant morbi tristique senectu s 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 ege stas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> <p>Pellentesque habitant morbi tristique senectu s 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 ege stas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> <p>Pellentesque habitant morbi tristique senectu s 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 ege stas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> <p>Pellentesque habitant morbi tristique senectu s 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 ege stas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> <p>Pellentesque habitant morbi tristique senectu s 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 ege stas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> </div> </div>

    </body> </html> ================================================================================ ====================================== 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; } ================================================================================ ========================================== @import "reset.css"; /* Float clearing goodness from Handcrafted CSS book by Dan Cederholm - http://h andcraftedcss.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: 1 00%; }

    /* Mobile nav not visible by desktop browsers but only set to visiblity hidden s o 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: hid den; } #mobile li:nth-of-type(2n-1) a { border-right: 1px solid rgba(255, 255, 255, 0.2 5); } /* ---------------------------------------------------------------------------------------------------------------------------------- */ 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-ri ght: 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 includ ing the text */ header:before { width: 100%; display: block; content: "Pull Down for Nav igation"; padding: 0.75em 1.5em; margin: -1em -1.5em 1em; color: #878787; text-s hadow: 0 1px 1px rgba(255, 255, 255, 1); border-bottom: 1px solid #a6a6a6; backg round-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; } }

    You might also like