From 9794828e20767044f1288be7fa11da872f11d2d3 Mon Sep 17 00:00:00 2001
From: Kai Moritz <kai@juplo.de>
Date: Thu, 13 Jun 2013 02:00:50 +0200
Subject: [PATCH] Navigation - Bereichsauswahl

---
 src/main/webapp/css/base.css            |  1 +
 src/main/webapp/css/base/navigation.css | 51 +++++++++++++++++++++++++
 src/main/webapp/index.jsp               |  4 ++
 3 files changed, 56 insertions(+)
 create mode 100644 src/main/webapp/css/base/navigation.css

diff --git a/src/main/webapp/css/base.css b/src/main/webapp/css/base.css
index 0119acd8..340f9e6c 100644
--- a/src/main/webapp/css/base.css
+++ b/src/main/webapp/css/base.css
@@ -15,3 +15,4 @@
 @import 'base/fonts.css';
 @import 'base/typo.css';
 @import 'base/head.css';
+@import 'base/navigation.css';
diff --git a/src/main/webapp/css/base/navigation.css b/src/main/webapp/css/base/navigation.css
new file mode 100644
index 00000000..478d5684
--- /dev/null
+++ b/src/main/webapp/css/base/navigation.css
@@ -0,0 +1,51 @@
+#nav
+{
+  margin: 0 0 -1em 0;
+}
+#menu
+{
+  position: relative;
+  width: 200%;
+  top: -7em;
+  right: 100%;
+  text-align: right;
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+#menu > li.m
+{
+  display: inline-block;
+  padding: 0 0 0 4em;
+}
+#menu > li.m > .m
+{
+  font-family: 'BPreplay', Helvetica, Arial, sans-serif;
+  font-weight: bold;
+  font-size: 250%; /** 40px */
+  color: #0ACF00;
+}
+#menu > li.m > a.m
+{
+  border-color: #0ACF00;
+}
+#menu > li.m > a.m:hover
+{
+  border-color: #078600;
+}
+#menu > li.m > a.m:hover,
+#menu > li.m > strong.m
+{
+  border-style: solid;
+}
+#menu > li.m > a.m:hover
+{
+  color: #078600;
+}
+#menu > li.m > a.m:hover:before,
+#menu > li.m > a.m.selected:before,
+#menu > li.m > strong.m:before
+{
+  content: '> ';
+  margin-left: -.92em;
+}
diff --git a/src/main/webapp/index.jsp b/src/main/webapp/index.jsp
index 6e555b9f..ee2fdbc8 100644
--- a/src/main/webapp/index.jsp
+++ b/src/main/webapp/index.jsp
@@ -15,6 +15,10 @@
       <hr />
     </header>
     <nav id="nav">
+      <ul id="menu">
+        <li class="m blog"><a href="#blogs" class="m">Blog</a></li>
+        <li class="m projects"><a href="#projects" class="m">Projects</a></li>
+      </ul>
     </nav>
     <section>
       <h1>Branding</h1>
-- 
2.20.1