Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 128 lines (94 sloc) 7.394 kb
01fdb62 First release.
Tom authored
1 <html>
2
3 <head>
4
5 <title>Responsive Navigation</title>
6 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
7
8 <link rel="stylesheet" type="text/css" href="style.css" />
9 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
10 <script type="text/javascript" charset="utf-8">
11
12 function checkWidth () {
13
14 // Get the height of the div and set it in a variable called mabileNavHeight to access later
15 var mobileNavHeight = $('#mobile').height();
16
17 // Check to see if the browser width is less than 480px wide
18 if ($(window).width() < 481) {
19 $('#site').css({
20 // Change the CSS top value of #site to whatever mobileNavHeight outputs
b5e57ba @iclang Fixed issue with iOS6 compatibility (Issue #8)
iclang authored
21 top: mobileNavHeight + 'px'
01fdb62 First release.
Tom authored
22 });
ccd6a73 @tkenny Change animation to 0
authored
23 // Scroll the window the height of mobileNavHeight [animation set at 0 to hide the navigation immediately]
6c82f3d Update for Android, scrollTop did not work correctly. Please check if it...
jelmuhr authored
24 $('html, body').stop().animate({
25 'scrollTop': $('#site').offset().top
ccd6a73 @tkenny Change animation to 0
authored
26 }, 0, 'swing', function () {
6c82f3d Update for Android, scrollTop did not work correctly. Please check if it...
jelmuhr authored
27 window.location.hash = '#site';
28 });
01fdb62 First release.
Tom authored
29 }
30
31 // Check to see if the browser width is more than 480px wide
32 else if ($(window).width() > 480) {
33 $('#site').css({
34 // Make sure the top value of #site is 0 so we don't see the space for the mobile nav
35 top: 0 + 'px'
36 });
37 // Scroll to the absolute top of the page
6c82f3d Update for Android, scrollTop did not work correctly. Please check if it...
jelmuhr authored
38 $(window).scrollTop(0); //no need for $.animate, on desktop browser it works just fine
01fdb62 First release.
Tom authored
39 }
40 }
41
42 $(document).ready(function(){
43 // Check the window size when page loads
44 checkWidth();
45 });
46
47 </script>
48
49 </head>
50
51 <body>
52
53 <nav id="mobile">
54 <ul class="group">
55 <li><a href="#">Home</a></li>
56 <li><a href="#">Portfolio</a></li>
57 <li><a href="#">Blog</a></li>
58 <li><a href="#">About</a></li>
59 <li><a href="#">Contact</a></li>
60 <li><a href="#">Twitter</a></li>
61 <li><a href="#">Dribbble</a></li>
62 <li><a href="#">A Longer Navigation Item</a></li>
63 </ul>
64 </nav>
65
66 <div id="site">
67
68 <header>
69 <nav id="main">
70 <ul>
71 <li><a href="#">Home</a></li>
72 <li><a href="#">Portfolio</a></li>
73 <li><a href="#">Blog</a></li>
74 <li><a href="#">About</a></li>
75 <li><a href="#">Contact</a></li>
76 <li><a href="#">Twitter</a></li>
77 <li><a href="#">Dribbble</a></li>
78 <li><a href="#">A Longer Navigation Item</a></li>
79 </ul>
80 </nav>
81 </header>
82
83 <div class="container">
84
85 <h1>Pull Down for Navigation Demo</h1>
86
87 <p><a href="http://inspectelement.com/tutorials/pull-down-for-navigation/">See the tutorial here</a></p>
88
89 <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>
90
91 <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>
92
93 <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>
94
95 <style type="text/css">
96 .carbonad { margin-bottom: 20px; width: auto !important; padding: 0 15px 0 0 !important; border: none !important; background: #f7f7f7 !important; height: auto !important; position: relative; }
97 .carbonad-image { margin: 0 15px 0 0 !important; }
98 .carbonad-text, .carbonad-tag { text-align: left !important; float: none !important; width: auto !important; }
99 .carbonad-text { position: relative; top: 15px; padding-right: 15px !important; }
100 .carbonad-tag { position: absolute; bottom: 5px; right: 5px; width: 100px; }
101 </style>
102
103 <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>
104
105 <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>
106
107 <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>
108
109 <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>
110 <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>
111
112 <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>
113
114 <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>
115 <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>
116
117 <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>
118
119 <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>
120
121 </div>
122
123 </div>
124
125 </body>
126
127 </html>
Something went wrong with that request. Please try again.