Add navigation menu
authorJeremy Tan <[email protected]>
Sun, 6 Oct 2013 14:00:59 +0000 (22:00 +0800)
committerJeremy Tan <[email protected]>
Sun, 6 Oct 2013 14:00:59 +0000 (22:00 +0800)
testing/MCTXWeb/public_html/control.html
testing/MCTXWeb/public_html/index.html
testing/MCTXWeb/public_html/pintest.html
testing/MCTXWeb/public_html/static/hover.gif [new file with mode: 0644]
testing/MCTXWeb/public_html/static/nav-menu.css

index 71ee445..d410a89 100644 (file)
       <div id="sidebar">
         <div class="widget">
           <div class="title">Navigation menu</div>
-                  
+          <div class="nav-menu">
+          <ul>
+             <li><a href="index.html"><span>Home</span></a></li>
+             <li><a href="control.html"><span>Experiment control</span></a></li>
+             <li><a href="pintest.html"><span>Pin debugging</span></a></li>
+             <li class="last"><a href="#"><span>Help</span></a></li>
+          </ul>
+          </div>
         </div>
         <div class="widget">
           <div class="title">Help</div>
index e1b769e..b0b3de1 100644 (file)
       <div id="sidebar">
         <div class="widget">
           <div class="title">Navigation menu</div>
-                  
+          <div class="nav-menu">
+          <ul>
+             <li><a href="index.html"><span>Home</span></a></li>
+             <li><a href="control.html"><span>Experiment control</span></a></li>
+             <li><a href="pintest.html"><span>Pin debugging</span></a></li>
+             <li class="last"><a href="#"><span>Help</span></a></li>
+          </ul>
+          </div>
         </div>
         <div class="widget">
           <div class="title">Help</div>
             <p>
               To explore how this system works, hover over the elements of the
               system diagram below. Clicking each element will lead to a new
-              page that describes that component of the system.
+              page that briefly describes that component of the system.
+            </p>
+            <p>
+              For the full documentation, see the project wiki at:
+              <a href="https://github.com/szmoore/MCTX3420/wiki">
+                https://github.com/szmoore/MCTX3420/wiki
+              </a>
             </p>
             <p>
               To begin a new experiment, use the left navigation pane.
index bd74562..10310c7 100644 (file)
     
     <div id="content">
       <div id="sidebar">
+        <div class="widget">
+          <div class="title">Navigation menu</div>
+          <div class="nav-menu">
+          <ul>
+             <li><a href="index.html"><span>Home</span></a></li>
+             <li><a href="control.html"><span>Experiment control</span></a></li>
+             <li><a href="pintest.html"><span>Pin debugging</span></a></li>
+             <li class="last"><a href="#"><span>Help</span></a></li>
+          </ul>
+          </div>
+        </div>
         <div class="widget">
           <div class="title">Info</div>
           <p>This test page gives control over the BBB's pins.
diff --git a/testing/MCTXWeb/public_html/static/hover.gif b/testing/MCTXWeb/public_html/static/hover.gif
new file mode 100644 (file)
index 0000000..89f6055
Binary files /dev/null and b/testing/MCTXWeb/public_html/static/hover.gif differ
index e64408d..371da5e 100644 (file)
@@ -1,89 +1,32 @@
-/* 
-    Document   : nav-menu
-    Created on : 21/09/2013, 8:33:30 PM
-    Author     : Jeremy Tan
-    Description:
-        Navigation menu styling.
-        Background colour: #2A2A2A
-        Highlight colour: #f2f2f2
-        Normal text colour: #bbbbbb
-*/
-
-/** Easing **/
 .nav-menu {
-  transition: all 0.2s ease 0s;
+  list-style: none;
+  margin: 0;
+  padding: 0;
 }
 
-/** Main menu list styling **/
 .nav-menu ul {
-  list-style: none outside none;
+  padding: 0;
   margin: 0;
-  padding-left: 0;
-  text-align: right;
 }
 
-/** Menu item styling **/
 .nav-menu li {
-  display: inline-block;
-  position: relative;
+  margin: 0;
+  padding: 0;
+  list-style: none;
 }
 
-/** Link styling **/
 .nav-menu a {
-  background-color: #2A2A2A;
-  border-radius: 2px;
-  border: 1px solid #444444;
-  color: #BBBBBB;
-  display: inline-block;
-  margin: 0.1em;
-  padding: 0.2em 2em;
-  text-decoration: none;
-  transition: all 0.2s ease 0s;
-}
-
-/** Highlight currently hovered-over item **/
-.nav-menu li:hover > a {
-  background-color: #f2f2f2;
+  border-bottom: 1px solid #ccc;
   color: #2a2a2a;
-}
-
-/** Display submenu when hovering over list item **/
-.nav-menu ul li:hover > ul {
   display: block;
+  margin: 0;
+  padding: 8px 12px;
+  text-decoration: none;
+  font-weight: normal;
 }
 
-/** Submenu styling **/
-.nav-menu ul ul {
-  background-color: #2A2A2A;
-  border-radius: 2px;
-  box-shadow: 1px 1px 1px #2A2A2A;
-  display: none;
-  left: 0;
-  padding: 0.25em 0.5em;
-  position: absolute;
-  text-align: left;
-  z-index: 10;
-}
-
-/** Submenu link styling **/
-.nav-menu ul ul a {
-  width: 11em;
-  padding: 0.25em 0.5em;
+.nav-menu a:hover {
+  background: #2580a2 url('hover.gif') left center no-repeat;
+  color: #fff;
+  padding-bottom: 8px;
 }
-
-/**
-  Style of menu:
-  <div class="nav-menu">
-    <ul class="menu">
-      <li><a href="#">Link 1</a></li>
-      <li><a href="#">Link 2</a></li>
-      <li>
-        <a href="#">Link 3</a>
-        <ul class="submenu">
-          <li><a href="#">Sub-link 1</a></li>
-          <li><a href="#">Sub-link 2</a></li>
-        </ul>
-      </li>
-    </ul>
-  </div>
-*/
\ No newline at end of file

UCC git Repository :: git.ucc.asn.au