Merge pull request #42 from jtanx/master
[matches/MCTX3420.git] / testing / MCTXWeb / public_html / static / nav-menu.css
1 /* 
2     Document   : nav-menu
3     Created on : 21/09/2013, 8:33:30 PM
4     Author     : Jeremy Tan
5     Description:
6         Navigation menu styling.
7         Background colour: #2A2A2A
8         Highlight colour: #f2f2f2
9         Normal text colour: #bbbbbb
10 */
11
12 /** Easing **/
13 .nav-menu {
14   transition: all 0.2s ease 0s;
15 }
16
17 /** Main menu list styling **/
18 .nav-menu ul {
19   list-style: none outside none;
20   margin: 0;
21   padding-left: 0;
22   text-align: right;
23 }
24
25 /** Menu item styling **/
26 .nav-menu li {
27   display: inline-block;
28   position: relative;
29 }
30
31 /** Link styling **/
32 .nav-menu a {
33   background-color: #2A2A2A;
34   border-radius: 2px;
35   border: 1px solid #444444;
36   color: #BBBBBB;
37   display: inline-block;
38   margin: 0.1em;
39   padding: 0.2em 2em;
40   text-decoration: none;
41   transition: all 0.2s ease 0s;
42 }
43
44 /** Highlight currently hovered-over item **/
45 .nav-menu li:hover > a {
46   background-color: #f2f2f2;
47   color: #2a2a2a;
48 }
49
50 /** Display submenu when hovering over list item **/
51 .nav-menu ul li:hover > ul {
52   display: block;
53 }
54
55 /** Submenu styling **/
56 .nav-menu ul ul {
57   background-color: #2A2A2A;
58   border-radius: 2px;
59   box-shadow: 1px 1px 1px #2A2A2A;
60   display: none;
61   left: 0;
62   padding: 0.25em 0.5em;
63   position: absolute;
64   text-align: left;
65   z-index: 10;
66 }
67
68 /** Submenu link styling **/
69 .nav-menu ul ul a {
70   width: 11em;
71   padding: 0.25em 0.5em;
72 }
73
74 /**
75   Style of menu:
76   <div class="nav-menu">
77     <ul class="menu">
78       <li><a href="#">Link 1</a></li>
79       <li><a href="#">Link 2</a></li>
80       <li>
81         <a href="#">Link 3</a>
82         <ul class="submenu">
83           <li><a href="#">Sub-link 1</a></li>
84           <li><a href="#">Sub-link 2</a></li>
85         </ul>
86       </li>
87     </ul>
88   </div>
89 */

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