Permalink
Browse files

Idea for a basic navigation menu

  • Loading branch information...
lambdatoast authored and Alexander Noriega committed Feb 19, 2012
1 parent 72759f6 commit e27ee222d9c87e3e57e2af0cfe95ae8acb7f1756
Showing with 164 additions and 12 deletions.
  1. +8 −0 _layouts/default.php
  2. +69 −1 assets/css/main.css
  3. +4 −4 index.php
  4. +69 −1 public_html/assets/css/main.css
  5. +14 −6 public_html/index.php
View
@@ -42,6 +42,14 @@
</div>
</a>
</header>
+ <nav id="main-nav">
+ <ul>
+ <li class="nav-item"><a class="button primary" href="#news"><span>News</span></a></li>
+ <li class="nav-item"><a class="button" href="#whos-who"><span>Who's Who</span></a></li>
+ <li class="nav-item"><a class="button" href="#stuff"><span>Stuff We've Done</span></a></li>
+ <li class="nav-item"><a class="button" href="#helpful-resources"><span>What Helped Us</span></a></li>
+ </ul>
+ </nav>
<section>
{{ content }}
View
@@ -102,13 +102,81 @@ strong {
font-weight: 700;
}
+/** --- Navigation --- */
+
+#main-nav {
+ margin: 0 auto 10px auto;
+ text-align: center;
+ width: 60%;
+}
+
+.nav-item {
+ list-style-type: none;
+ display: inline-block;
+}
+
+/** --- Buttons --- */
+
+.button {
+ display: inline-block;
+ padding: 7px;
+ text-shadow: 1px 1px 0 #FFFFFF;
+ white-space: nowrap;
+ overflow: visible;
+ cursor: pointer;
+ text-decoration: none;
+ border: 1px solid #CACACA;
+ -webkit-border-radius: 2px;
+ -moz-border-radius: 2px;
+ border-radius: 2px;
+ outline: none;
+ position: relative;
+ zoom: 1;
+ line-height: 1.11;
+ *display: inline;
+ *vertical-align: middle;
+}
+
+a.button {
+ -moz-user-select: none;
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+ -webkit-user-select: none;
+ -webkit-touch-callout: none;
+}
+
+a.button.primary, button.primary {
+ font-weight: bold
+}
+
+a.button:hover {
+ color: #FFFFFF;
+ border-color: #388AD4;
+ text-decoration: none;
+ text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
+ background-position: 0 -40px;
+ background-color: #2D7DC5;
+}
+
+a.button:active,
+a.button.active {
+ background-position: 0 -81px;
+ border-color: #347BBA;
+ background-color: #0F5EA2;
+ color: #FFFFFF;
+ text-shadow: none;
+}
+
+a.button:active, button:active {
+ top: 1px
+}
+
/** --- Layout --- */
header {
font-style: italic;
font-family: Calibri, "Segoe UI", Sans-serif;
text-shadow: 1px 1px 0 rgb(255,255,255);
- margin-bottom: 70px;
+ margin-bottom: 50px;
}
header a:hover {
View
@@ -27,7 +27,7 @@
{% for post in site.posts %}
- <section class="main">
+ <section class="main" id="news">
<div class="links content cf">
<h1>{{ post.title }}</h1>
{{ post.content }}
@@ -38,7 +38,7 @@
<section class="main">
<div class="links content cf">
- <h1>Who's Who</h1>
+ <h1 id="whos-who">Who's Who</h1>
<p>
<?php echo count($members); ?> channel members listed.
</p>
@@ -69,7 +69,7 @@
</section>
<section class="main">
<div class="links content cf">
- <h1>Stuff We've Done</h1>
+ <h1 id="stuff">Stuff We've Done</h1>
<ul>
<?php foreach ($links as $link) : ?>
<li><a href="<?php echo $link['href']; ?>"
@@ -80,7 +80,7 @@
</section>
<section class="main">
<div class="links content cf">
- <h1>What Helped Us</h1>
+ <h1 id="helpful-resources">What Helped Us</h1>
<?php for ($i = 0; $i < 3; ++$i) : ?>
<div class="third">
<ul>
@@ -102,13 +102,81 @@ strong {
font-weight: 700;
}
+/** --- Navigation --- */
+
+#main-nav {
+ margin: 0 auto 10px auto;
+ text-align: center;
+ width: 60%;
+}
+
+.nav-item {
+ list-style-type: none;
+ display: inline-block;
+}
+
+/** --- Buttons --- */
+
+.button {
+ display: inline-block;
+ padding: 7px;
+ text-shadow: 1px 1px 0 #FFFFFF;
+ white-space: nowrap;
+ overflow: visible;
+ cursor: pointer;
+ text-decoration: none;
+ border: 1px solid #CACACA;
+ -webkit-border-radius: 2px;
+ -moz-border-radius: 2px;
+ border-radius: 2px;
+ outline: none;
+ position: relative;
+ zoom: 1;
+ line-height: 1.11;
+ *display: inline;
+ *vertical-align: middle;
+}
+
+a.button {
+ -moz-user-select: none;
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+ -webkit-user-select: none;
+ -webkit-touch-callout: none;
+}
+
+a.button.primary, button.primary {
+ font-weight: bold
+}
+
+a.button:hover {
+ color: #FFFFFF;
+ border-color: #388AD4;
+ text-decoration: none;
+ text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
+ background-position: 0 -40px;
+ background-color: #2D7DC5;
+}
+
+a.button:active,
+a.button.active {
+ background-position: 0 -81px;
+ border-color: #347BBA;
+ background-color: #0F5EA2;
+ color: #FFFFFF;
+ text-shadow: none;
+}
+
+a.button:active, button:active {
+ top: 1px
+}
+
/** --- Layout --- */
header {
font-style: italic;
font-family: Calibri, "Segoe UI", Sans-serif;
text-shadow: 1px 1px 0 rgb(255,255,255);
- margin-bottom: 70px;
+ margin-bottom: 50px;
}
header a:hover {
View
@@ -42,6 +42,14 @@
</div>
</a>
</header>
+ <nav id="main-nav">
+ <ul>
+ <li class="nav-item"><a class="button primary" href="#news"><span>News</span></a></li>
+ <li class="nav-item"><a class="button" href="#whos-who"><span>Who's Who</span></a></li>
+ <li class="nav-item"><a class="button" href="#stuff"><span>Stuff We've Done</span></a></li>
+ <li class="nav-item"><a class="button" href="#helpful-resources"><span>What Helped Us</span></a></li>
+ </ul>
+ </nav>
<section>
<?php
$members = json_decode(file_get_contents('members.json'), TRUE);
@@ -69,7 +77,7 @@
- <section class="main">
+ <section class="main" id="news">
<div class="links content cf">
<h1>Bbgchallenge3 Has Begun!</h1>
<p>The genre for <a href='http://github.com/hughfdjackson/bbgchallenge3'>#bbgchallenge3</a> is <strong>Turn Based War Strategy</strong>!</p>
@@ -81,7 +89,7 @@
</section>
- <section class="main">
+ <section class="main" id="news">
<div class="links content cf">
<h1>Bbgchallenge3 Begins!</h1>
<p>As promised, our latest <a href='http://github.com/hughfdjackson/bbgchallenge3'>#bbg competition</a> is coming your way on the 15th of Feb!</p>
@@ -93,7 +101,7 @@
</section>
- <section class="main">
+ <section class="main" id="news">
<div class="links content cf">
<h1>Bbgcomp2 Ends</h1>
<p>Our latest <a href='http://github.com/hughfdjackson/bbgcomp2'>#bbg competition</a> has ended!</p>
@@ -110,7 +118,7 @@
<section class="main">
<div class="links content cf">
- <h1>Who's Who</h1>
+ <h1 id="whos-who">Who's Who</h1>
<p>
<?php echo count($members); ?> channel members listed.
</p>
@@ -141,7 +149,7 @@
</section>
<section class="main">
<div class="links content cf">
- <h1>Stuff We've Done</h1>
+ <h1 id="stuff">Stuff We've Done</h1>
<ul>
<?php foreach ($links as $link) : ?>
<li><a href="<?php echo $link['href']; ?>"
@@ -152,7 +160,7 @@
</section>
<section class="main">
<div class="links content cf">
- <h1>What Helped Us</h1>
+ <h1 id="helpful-resources">What Helped Us</h1>
<?php for ($i = 0; $i < 3; ++$i) : ?>
<div class="third">
<ul>

0 comments on commit e27ee22

Please sign in to comment.