Permalink
Browse files

Second Commit

Polished the LESS and CSS files, changed the index.html to incorporate
link to Article, added README.md.

Almost polished and ready to be seen by the world.
  • Loading branch information...
Saddam Azad
Saddam Azad committed Jul 1, 2012
1 parent ab77400 commit d5d994e67c8a7e24f47b1efa8588d6644e13f379
View
@@ -0,0 +1,4 @@
+
+js/.DS_Store
+
+.DS_Store
View
@@ -0,0 +1,15 @@
+Building a Responsive, Mobile-First Navigation Menu
+==================================================
+
+Here lies the source code for the [Building a Responsive, Mobile-First Navigation Menu](http://azadcreative.com/2012/06/responsive-mobile-first-navigation-menu/)
+
+Browse the [Live Demonstration](http://bit.ly/respnav) using your mobile, tablet and desktop browsers. Fork away and if you find any bugs, please report to Saddam Azad, saddam -dot- azad -at- me -dot- com.
+
+
+Credits:
+--------
+
+* [320 and Up](http://stuffandnonsense.co.uk/projects/320andup/) by Andy Clarke.
+* [HTML5 Boilerplate Mobile](http://html5boilerplate.com/mobile/)
+* [Bootstrap](http://twitter.github.com/bootstrap/) by Twitter.
+* [Overthrow.js](https://github.com/filamentgroup/Overthrow/) by Filament Group
View
@@ -23,6 +23,20 @@ body {
overflow: auto;
max-width: 1300px;
}
+a:link,
+a:visited {
+ color: #666;
+ text-decoration: underline;
+}
+a:hover,
+a:active {
+ color: #a67b45;
+ text-decoration: none;
+ outline: none;
+}
+a:active {
+ color: #ff6000;
+}
/* Le Header */
header {
padding: 20px 0;
@@ -35,11 +49,11 @@ header {
header h1#branding a {
font-family: "Euphoria Script", cursive;
font-weight: normal;
- text-decoration: none;
}
header h1#branding a:link,
header h1#branding a:visited {
color: #000;
+ text-decoration: none;
}
header h1#branding a:hover,
header h1#branding a:active {
@@ -52,7 +66,6 @@ header h2#tagline {
font-weight: normal;
text-transform: uppercase;
color: #444;
- font-family: Lato, sans-serif;
}
header nav {
background-color: #f8f8f8;
@@ -67,7 +80,7 @@ header nav {
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
- font-family: Lato, sans-serif;
+ font-family: "Lato", Helvetica, Arial, sans-serif;
font-size: 1.5em;
}
header ul#menu {
View
@@ -25,7 +25,6 @@ header {
}
header h1#branding {
font-size: 4em;
- z-index: 1000;
margin: 10px 0 0 0;
}
header h2#tagline {
View
@@ -1,6 +1,5 @@
header h1#branding {
font-size: 4em;
- z-index: 1000;
margin: 40px 0 0 0;
}
header h2#tagline {
View
@@ -14,6 +14,26 @@ body {
overflow: auto;
max-width: 1300px;
}
+
+a {
+
+ &:link,
+ &:visited {
+ color: #666;
+ text-decoration: underline;
+ }
+
+ &:hover,
+ &:active {
+ color: #a67b45;
+ text-decoration: none;
+ outline: none;
+ }
+ &:active {
+ color: #ff6000;
+ }
+
+}
/* Le Header */
@@ -24,11 +44,11 @@ header {
h1#branding a {
font-family: "Euphoria Script", cursive;
font-weight: normal;
- text-decoration: none;
&:link,
&:visited {
color: #000;
+ text-decoration: none;
}
&:hover,
@@ -44,14 +64,13 @@ header {
font-weight: normal;
text-transform: uppercase;
color: #444;
- font-family: Lato, sans-serif;
}
/* The common properties in the NAV element */
nav {
#gradient .vertical(#fff, #ededed);
.box-shadow(0 1px 3px rgba(0, 0, 0, 0.3));
- font-family: Lato, sans-serif;
+ font-family: "Lato", Helvetica, Arial, sans-serif;
font-size: 1.5em;
}
View
@@ -17,7 +17,6 @@ header {
h1#branding {
font-size: 4em;
- z-index: 1000;
margin: 10px 0 0 0;
}
View
@@ -2,7 +2,6 @@ header {
h1#branding {
font-size: 4em;
- z-index: 1000;
margin: 40px 0 0 0;
}
View
@@ -54,12 +54,13 @@ nav .btn-navbar.active .icon-bar {
margin-top: 3px;
}
-/* The unordered list with the menu */
+/* Using the touch scrolling on capable devices. */
.overthrow-enabled .overthrow {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
+/* The unordered list with the menu */
ul#menu {
background: #000;
display: none;
@@ -70,20 +71,13 @@ ul#menu {
width: 100%;
font-size: 15px !important;
-// overflow: auto;
-// -webkit-overflow-scrolling: touch;
-
overflow-x: hidden;
-ms-overflow-x: hidden;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
- & > * {
- -webkit-transform: translateZ(0px);
- }
-
li {
display: block;
height: 40px;
View
@@ -10,7 +10,8 @@ header {
}
h2#tagline {
- font-size: 1.9em;
+ font-size: 2em;
+ line-height: 1.5em;
margin: 40px 0 0 0;
}
}
View
@@ -2,7 +2,6 @@ header {
h1#branding {
font-size: 4em;
- z-index: 1000;
margin: 40px 0 0 0;
}
View
@@ -65,11 +65,12 @@ nav .btn-navbar.active .icon-bar {
.btn-navbar .icon-bar + .icon-bar {
margin-top: 3px;
}
-/* The unordered list with the menu */
+/* Using the touch scrolling on capable devices. */
.overthrow-enabled .overthrow {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
+/* The unordered list with the menu */
ul#menu {
background: #000;
display: none;
@@ -84,9 +85,6 @@ ul#menu {
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
-ul#menu > * {
- -webkit-transform: translatez(0px);
-}
ul#menu li {
display: block;
height: 40px;
View
@@ -6,7 +6,8 @@ header h1#branding {
z-index: 1000;
}
header h2#tagline {
- font-size: 1.9em;
+ font-size: 2em;
+ line-height: 1.5em;
margin: 40px 0 0 0;
}
section.content p {
View
@@ -1,6 +1,5 @@
header h1#branding {
font-size: 4em;
- z-index: 1000;
margin: 40px 0 0 0;
}
header h2#tagline {
View
@@ -15,9 +15,10 @@
Hello, Curious Stranger.
- The code borrowed from frameworks such as 320-and-Up, Bootstrap and Mobile Boilerplate are mostly under very permissive Open Source licenses.
+ Some of the code presented here is borrowed from frameworks such as 320-and-Up, Bootstrap and Mobile Boilerplate.
- The code written by me is - wait for it - Public Domain. Copy, hack, sell wholesale and do whatever pleases you. A little credit would be appreciated but not mandatory.
+ The code written by me is - wait for it - Public Domain. Copy, hack, sell wholesale and do whatever pleases you.
+ A little credit would be appreciated but not mandatory.
May be the source be with you.
@@ -53,10 +54,10 @@
<link rel="stylesheet" href="css/desktop.css" media="screen">
<![endif]-->
- <!-- JavaScript -->
<!--[if (lt IE 9) & (!IEMobile)]>
<script src="js/selectivizr-1.0.3.min.js"></script>
<![endif]-->
+
<script src="js/modernizr-2.5.3.min.js"></script>
<meta http-equiv="cleartype" content="on">
@@ -210,7 +211,7 @@ <h2 id="tagline">A beautifully crafted responsive navigation menu</h2>
<section class="content clearfix">
- <p>You are currently browsing the demo. Please read the full tutorial here: <a href="#">Building a Responsive Navigation Menu</a>.</p>
+ <p>You are currently browsing the demo. Please read the full tutorial here: <a href="http://azadcreative.com/2012/06/responsive-mobile-first-navigation-menu/" target="_blank">Building a Responsive, Mobile-First Navigation Menu</a>.</p>
<p>This tutorial demonstrates how to build a responsive navigation menu using bits and pieces borrowed from 320 and Up, the Bootstrap Framework and HTML5 Boilerplate Mobile. The hands-on tutorial is designed for web developers of beginner and intermediate levels.</p>
@@ -227,7 +228,7 @@ <h2 id="tagline">A beautifully crafted responsive navigation menu</h2>
<li><a href="http://stuffandnonsense.co.uk/projects/320andup/">320 and Up</a> by Andy Clarke.</li>
<li><a href="http://html5boilerplate.com/mobile/">HTML5 Boilerplate Mobile</a>.</li>
<li><a href="http://twitter.github.com/bootstrap/">Bootstrap</a> from Twitter.</li>
- <li><a href="http://">Overthrow</a> by Filament.</li>
+ <li><a href="https://github.com/filamentgroup/Overthrow/">Overthrow</a> by Filament.</li>
</ul>
<p>The aforementioned are licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache License, Version 2.0</a></p>
</footer>
@@ -243,6 +244,19 @@ <h2 id="tagline">A beautifully crafted responsive navigation menu</h2>
<script src="js/helper.js"></script>
<script src="js/script.js"></script>
+<script type="text/javascript">
+
+ var _gaq = _gaq || [];
+ _gaq.push(['_setAccount', 'UA-12457821-1']);
+ _gaq.push(['_trackPageview']);
+
+ (function() {
+ var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+ })();
+
+</script>
</body>
</html>

0 comments on commit d5d994e

Please sign in to comment.