Navigation - Bereichsauswahl

diff --git a/src/main/webapp/css/base.css b/src/main/webapp/css/base.css
index 0119acd..340f9e6 100644 (file)
--- 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/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 (file)
index 0000000..478d568
--- /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 6e555b9..ee2fdbc 100644 (file)
--- a/src/main/webapp/index.jsp
+++ b/src/main/webapp/index.jsp
@@ -15,6 +15,10 @@
       <hr />
     </header>
     <nav id="nav">
       <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>
     </nav>
     <section>
       <h1>Branding</h1>