Navigations-Hilfen ergänzt (Breadcrumb und Content-Skip)
authorKai Moritz <kai@juplo.de>
Tue, 1 Oct 2013 21:11:45 +0000 (23:11 +0200)
committerKai Moritz <kai@juplo.de>
Tue, 19 Jan 2016 16:45:35 +0000 (17:45 +0100)
13 files changed:
src/main/webapp/WEB-INF/spring/tiles.xml
src/main/webapp/WEB-INF/templates/html5page.jsp
src/main/webapp/WEB-INF/views/blog.jsp
src/main/webapp/WEB-INF/views/contact.jsp
src/main/webapp/WEB-INF/views/impressum.jsp
src/main/webapp/WEB-INF/views/index.jsp
src/main/webapp/WEB-INF/views/projects.jsp
src/main/webapp/WEB-INF/views/projects/fix-swf.jsp
src/main/webapp/WEB-INF/views/projects/fix-swf/getting-started.jsp
src/main/webapp/WEB-INF/views/projects/fix-swf/overview.jsp
src/main/webapp/WEB-INF/views/projects/typo.jsp
src/main/webapp/css/base/navigation.css
src/main/webapp/css/base/util.css

index ffeaa64..697c3e4 100644 (file)
@@ -6,6 +6,7 @@
 
   <definition name="BASEPAGE" template="/WEB-INF/templates/html5page.jsp">
     <put-attribute name="title" value="TITLE IS MISSING" type="string"/>
+    <put-attribute name="breadcrumb" value="BREADCRUMB IS MISSING" type="string"/>
     <put-attribute name="maincontent" value="/WEB-INF/templates/maincontent.jsp" type="template"/>
     <put-attribute name="contentclass" value="cols_2" type="string"/>
     <put-attribute name="marginalcontent" value="/WEB-INF/templates/marginalcontent.jsp" type="template"/>
index b98eda1..ba52ec5 100644 (file)
       <span id="slogan"><strong>Java</strong> bits from nerds for nerds</span>
       <hr />
     </header>
+    <div id="breadcrumb">
+      <strong class="b">You are here:</strong>
+      <ol class="b">
+        <t:insertAttribute name="breadcrumb"/>
+      </ol>
+      <a class="hide" href="#navigation">Jump to navigation</a>
+    </div>
     <div class="content <t:getAsString name="contentclass"/> cf">
       <section id="content" class="main">
         <h1><t:getAsString name="title"/></h1>
index 803c597..f0ede91 100644 (file)
@@ -4,6 +4,10 @@
 <%@taglib uri="http://tiles.apache.org/tags-tiles" prefix="t" %>
 <t:insertDefinition name="BASEPAGE">
   <t:putAttribute name="title" value="Blog" type="string"/>
+    <t:putAttribute name="breadcrumb">
+    <li class="b"><a class="b" href="/">Home</a></li>
+    <li class="b"><strong class="b">Blog</strong></li>
+  </t:putAttribute>
   <t:putAttribute name="navigation" type="string">
     <h1 class="nav">Navigation</h1>
     <h2 class="nav menu">Section-Menu</h2>
index 0626885..2fc10c1 100644 (file)
@@ -4,5 +4,9 @@
 <%@taglib uri="http://tiles.apache.org/tags-tiles" prefix="t" %>
 <t:insertDefinition name="ONECOLUMN">
   <t:putAttribute name="title" value="Contact" type="string"/>
+  <t:putAttribute name="breadcrumb">
+    <li class="b"><a class="b" href="/">Home</a></li>
+    <li class="b"><strong class="b">Contact</strong></li>
+  </t:putAttribute>
   <t:putAttribute name="marginalcontent" type="string" value=""/>
 </t:insertDefinition>
index 5519596..45946d2 100644 (file)
@@ -4,5 +4,9 @@
 <%@taglib uri="http://tiles.apache.org/tags-tiles" prefix="t" %>
 <t:insertDefinition name="ONECOLUMN">
   <t:putAttribute name="title" value="Impressum" type="string"/>
+  <t:putAttribute name="breadcrumb">
+    <li class="b"><a class="b" href="/">Home</a></li>
+    <li class="b"><strong class="b">Impressum</strong></li>
+  </t:putAttribute>
   <t:putAttribute name="marginalcontent" type="string" value=""/>
 </t:insertDefinition>
index 2759472..9b8f531 100644 (file)
@@ -4,4 +4,7 @@
 <%@taglib uri="http://tiles.apache.org/tags-tiles" prefix="t" %>
 <t:insertDefinition name="ONECOLUMN">
   <t:putAttribute name="title" value="Branding" type="string"/>
+  <t:putAttribute name="breadcrumb">
+    <li class="b"><strong class="b">Home</strong></li>
+  </t:putAttribute>
 </t:insertDefinition>
index c39e5c5..abf7330 100644 (file)
@@ -4,6 +4,10 @@
 <%@taglib uri="http://tiles.apache.org/tags-tiles" prefix="t" %>
 <t:insertDefinition name="BASEPAGE">
   <t:putAttribute name="title" value="Projects" type="string"/>
+  <t:putAttribute name="breadcrumb">
+    <li class="b"><a class="b" href="/">Home</a></li>
+    <li class="b"><strong class="b">Projects</strong></li>
+  </t:putAttribute>
   <t:putAttribute name="navigation" type="string">
     <h1 class="nav">Navigation</h1>
     <h2 class="nav menu">Section-Menu</h2>
index fff0e39..697aaba 100644 (file)
@@ -4,6 +4,11 @@
 <%@taglib uri="http://tiles.apache.org/tags-tiles" prefix="t" %>
 <t:insertDefinition name="BASEPAGE">
   <t:putAttribute name="title" value="Fix SWF" type="string"/>
+  <t:putAttribute name="breadcrumb">
+    <li class="b"><a class="b" href="/">Home</a></li>
+    <li class="b"><a class="b" href="projects.html">Projects</a></li>
+    <li class="b"><strong class="b">Fix SWF</strong></li>
+  </t:putAttribute>
   <t:putAttribute name="navigation" type="string">
     <h1 class="nav">Navigation</h1>
     <h2 class="nav menu">Section-Menu</h2>
index e29a1c6..65ec88b 100644 (file)
@@ -4,6 +4,12 @@
 <%@taglib uri="http://tiles.apache.org/tags-tiles" prefix="t" %>
 <t:insertDefinition name="BASEPAGE">
   <t:putAttribute name="title" value="Fix SWF - Getting Started" type="string"/>
+  <t:putAttribute name="breadcrumb">
+    <li class="b"><a class="b" href="/">Home</a></li>
+    <li class="b"><a class="b" href="projects.html">Projects</a></li>
+    <li class="b"><a class="b" href="projects/fix-swf.html">Fix SWF</a></li>
+    <li class="b"><strong class="b">Getting Started</strong></li>
+  </t:putAttribute>
   <t:putAttribute name="navigation" type="string">
     <h1 class="nav">Navigation</h1>
     <h2 class="nav menu">Section-Menu</h2>
index 251cb31..f9eaa13 100644 (file)
@@ -4,6 +4,12 @@
 <%@taglib uri="http://tiles.apache.org/tags-tiles" prefix="t" %>
 <t:insertDefinition name="BASEPAGE">
   <t:putAttribute name="title" value="Fix SWF - Overview" type="string"/>
+  <t:putAttribute name="breadcrumb">
+    <li class="b"><a class="b" href="/">Home</a></li>
+    <li class="b"><a class="b" href="projects.html">Projects</a></li>
+    <li class="b"><a class="b" href="projects/fix-swf.html">Fix SWF</a></li>
+    <li class="b"><strong class="b">Overview</strong></li>
+  </t:putAttribute>
   <t:putAttribute name="navigation" type="string">
     <h1 class="nav">Navigation</h1>
     <h2 class="nav menu">Section-Menu</h2>
index a55864c..52437cf 100644 (file)
@@ -4,6 +4,11 @@
 <%@taglib uri="http://tiles.apache.org/tags-tiles" prefix="t" %>
 <t:insertDefinition name="BASEPAGE">
   <t:putAttribute name="title" value="Typo" type="string"/>
+  <t:putAttribute name="breadcrumb">
+    <li class="b"><a class="b" href="/">Home</a></li>
+    <li class="b"><a class="b" href="projects.html">Projects</a></li>
+    <li class="b"><strong class="b">Typography</strong></li>
+  </t:putAttribute>
   <t:putAttribute name="navigation" type="string">
     <h1 class="nav">Navigation</h1>
     <h2 class="nav menu">Section-Menu</h2>
index e56e931..9b1daa3 100644 (file)
   margin-left: -.92em;
 }
 
+#breadcrumb
+{
+  position: absolute;
+  top: 8.4em;
+  left: 13.4em;
+  z-index: 3;
+  font-family: 'BPreplay', Helvetica, Arial, sans-serif;
+  font-weight: bold;
+  color: #0ACF00;
+}
+#breadcrumb > strong.b
+{
+  float: left;
+}
+#breadcrumb > ol.b
+{
+  display: inline;
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+#breadcrumb > ol.b > li.b
+{
+  float: left;
+  margin: 0 .5em 0 0;
+  padding: 0;
+}
+#breadcrumb > ol.b > li.b:before
+{
+  content: '> ';
+  margin-right: .25em;
+}
+#breadcrumb > ol.b > li.b:first-child:before
+{
+  content: '';
+  margin: 0 0 0 1em;
+}
+#breadcrumb > ol.b > li.b > strong.b
+{
+  border-bottom: 1px solid #0ACF00;
+}
+#breadcrumb > ol.b > li.b > a.b
+{
+  color: #0ACF00;
+}
+#breadcrumb > ol.b > li.b > a.b:hover,
+#breadcrumb > ol.b > li.b > a.b:focus,
+#breadcrumb > ol.b > li.b > a.b:active
+{
+  color: #078600;
+}
+
 #nav > h1.nav,
 #nav > h2.nav.menu
 {
index 6ddf6c0..1ab1226 100644 (file)
@@ -12,3 +12,9 @@
   clear:both;
 }
 
+/** Hide helpful content in a way, that it is still accessible to screen-readers */
+.hide{
+  position: absolute;
+  left: -99999999em;
+}
+