Merge pull request #4831 from jonataswalker/add-examples-header-nav

Add navigation header to examples page

config/examples/example.html

@@ -20,6 +20,12 @@
     <header class="navbar" role="navigation">
       <div class="container" id="navbar-inner-container">
         <a class="navbar-brand" href="./"><img src="./resources/logo-70x70.png">&nbsp;OpenLayers 3 Examples</a>
+        <ul class="nav navbar-nav pull-right">
+          <li><a href="../doc">Docs</a></li>
+          <li><a class="active" href="index.html">Examples</a></li>
+          <li><a href="../apidoc">API</a></li>
+          <li><a href="https://github.com/openlayers/ol3">Code</a></li>
+        </ul>
       </div>
     </header>
 

examples/index.html

@@ -187,10 +187,16 @@
     <header class="navbar navbar-fixed-top" role="navigation">
       <div class="container">
         <a class="navbar-brand" href="./"><img src="./resources/logo-70x70.png">&nbsp;OpenLayers 3 Examples</a>
-        <form class="navbar-form navbar-left" role="search">
+        <form class="navbar-form navbar-left search-form" role="search">
           <input name="q" type="text" id="keywords" class="search-query" placeholder="Search" autofocus>
           <span id="count"></span>
         </form>
+        <ul class="nav navbar-nav pull-right">
+          <li><a href="../doc">Docs</a></li>
+          <li><a class="active" href="index.html">Examples</a></li>
+          <li><a href="../apidoc">API</a></li>
+          <li><a href="https://github.com/openlayers/ol3">Code</a></li>
+        </ul>
       </div>
     </header>
 

examples/resources/common.js

@@ -74,7 +74,7 @@
 
   select.className = 'input-medium';
 
-  form.className = 'navbar-form pull-right';
+  form.className = 'navbar-form pull-right version-form';
   form.appendChild(select);
 
   container.appendChild(form);

examples/resources/layout.css

@@ -26,6 +26,19 @@ body {
   margin-right: 5px;
   display: inline-block;
 }
+.nav>li>a:hover, .nav>li>a:focus, .nav>li>a.active {
+  background-color: #268591;
+}
+.navbar-nav>li>a {
+  color: white;
+}
+.search-form, .version-form {
+  position: absolute;
+  left: 450px;
+}
+.version-form {
+  top: 5px;
+}
 
 #title {
   margin-top: 0;