From: Kai Moritz <kai@juplo.de>
Date: Thu, 13 Jun 2013 00:00:50 +0000 (+0200)
Subject: Navigation - Bereichsauswahl
X-Git-Tag: thymeroot-2.0.0~192
X-Git-Url: http://juplo.de/gitweb/?a=commitdiff_plain;h=9794828e20767044f1288be7fa11da872f11d2d3;p=website

Navigation - Bereichsauswahl
---

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>