Navigation - Bereichsauswahl
authorKai Moritz <kai@juplo.de>
Thu, 13 Jun 2013 00:00:50 +0000 (02:00 +0200)
committerKai Moritz <km@feder-software.de>
Tue, 25 Feb 2014 08:01:44 +0000 (09:01 +0100)
src/main/webapp/css/base.css
src/main/webapp/css/base/navigation.css [new file with mode: 0644]
src/main/webapp/index.jsp

index 0119acd..340f9e6 100644 (file)
@@ -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 (file)
index 0000000..478d568
--- /dev/null
@@ -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;
+}
index 6e555b9..ee2fdbc 100644 (file)
       <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>