Added new GUI with refreshing interface.

[matches/MCTX3420.git] / testing / CansWebInterface / static / exp-menu.css

diff --git a/testing/CansWebInterface/static/exp-menu.css b/testing/CansWebInterface/static/exp-menu.css
new file mode 100644 (file)
index 0000000..6d1cbd2
--- /dev/null
+++ b/testing/CansWebInterface/static/exp-menu.css
@@ -0,0 +1,89 @@
+/* 
+    Document   : nav-menu
+    Created on : 21/09/2013, 8:33:30 PM
+    Author     : Jeremy Tan Ammended By James Rosher
+    Description:
+        Navigation menu styling.
+        Background colour: #2A2A2A
+        Highlight colour: #f2f2f2
+        Normal text colour: #bbbbbb
+*/
+
+/** Easing **/
+.exp-menu {
+  transition: all 0.2s ease 0s;
+}
+
+/** Main menu list styling **/
+.exp-menu ul {
+  list-style: none outside none;
+  margin: 0;
+  padding-left: 0;
+  text-align: center;
+}
+
+/** Menu item styling **/
+.exp-menu li {
+  display: inline-block;
+  position: relative;
+}
+
+/** Link styling **/
+.exp-menu a {
+  background-color: #3090C7;
+  border-radius: 2px;
+  border: 1px solid #F0FFFF;
+  color: #FFFFFF;
+  display: inline-block;
+  margin: 0.1em;
+  padding: 0.2em 2em;
+  text-decoration: none;
+  transition: all 0.2s ease 0s;
+}
+
+/** Highlight currently hovered-over item **/
+.exp-menu li:hover > a {
+  background-color: #87AFC7;
+  color: #2a2a2a;
+}
+
+/** Display submenu when hovering over list item **/
+.exp-menu ul li:hover > ul {
+  display: block;
+}
+
+/** Submenu styling **/
+.exp-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: center;
+  z-index: 10;
+}
+
+/** Submenu link styling **/
+.exp-menu ul ul a {
+  width: 11em;
+  padding: 0.25em 0.5em;
+}
+
+/**
+  Style of menu:
+  <div class="exp-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