Difference between revisions of "Team:NAIT Edmonton/Trial12"
Line 39: | Line 39: | ||
</div> | </div> | ||
+ | <style type="text/css"> | ||
− | <div class=" | + | .navigation { |
+ | width:600px; | ||
+ | } | ||
+ | .navigation ul{ | ||
+ | /* positioning */ | ||
+ | position:relative; | ||
+ | z-index:1000; | ||
+ | /* remove the dots next to list items: */ | ||
+ | list-style:none; | ||
+ | /* get rid of any default or inherited margins and padding: */ | ||
+ | margin:0; | ||
+ | padding:0; | ||
+ | |||
+ | /* styling: */ | ||
+ | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; | ||
+ | font-weight: normal; | ||
+ | font-size: 15px; | ||
+ | } | ||
+ | |||
+ | /* we're using the direct descendant selectors > to ONLY affect the main menu items */ | ||
+ | .navigation > ul > li { | ||
+ | /* positioning */ | ||
+ | position: relative; | ||
+ | float: left; | ||
+ | /* styling: */ | ||
+ | margin-right: 10px; | ||
+ | } | ||
+ | .navigation > ul > li > a { | ||
+ | /* positioning */ | ||
+ | display:block; | ||
+ | /* styling: */ | ||
+ | background-color: #2c2c2c; /* grey */ | ||
+ | padding:8px 14px; | ||
+ | text-decoration:none; | ||
+ | color:#aaaaaa; | ||
+ | |||
+ | } | ||
+ | .navigation > ul > li > a:hover{ | ||
+ | /* styling: */ | ||
+ | background-color:#666666; /* grey */ | ||
+ | color:#eeeeee; /* light grey */ | ||
+ | |||
+ | .navigation ul ul{ | ||
+ | |||
+ | background-color:#e6056f; /* remove. this is for illustration purposes only */ | ||
+ | width:340px; /* you need a width to accommodate tertiary menus */ | ||
+ | |||
+ | position:absolute; | ||
+ | z-index:100; | ||
+ | |||
+ | height: 0; | ||
+ | overflow: hidden; | ||
+ | |||
+ | -webkit-transition: height 0.3s ease-in; | ||
+ | -moz-transition: height 0.3s ease-in; | ||
+ | -o-transition: height 0.3s ease-in; | ||
+ | -ms-transition: height 0.3s ease-in; | ||
+ | transition: height 0.3s ease-in; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* don't display tertiary box yet */ | ||
+ | .navigation > ul > li:hover ul ul, .navigation > ul > li > a:hover ul ul{ | ||
+ | height:0; | ||
+ | |||
+ | } | ||
+ | /* tertiary drop-down box */ | ||
+ | .navigation ul ul ul{ | ||
+ | left:170px; | ||
+ | width:170px; | ||
+ | } | ||
+ | |||
+ | .navigation > ul > li:hover ul, .navigation > ul > li > a:hover ul, | ||
+ | .navigation ul ul li:hover > ul, .navigation ul ul li a:hover > ul{ | ||
+ | height:220px; /* need a height to accommodate any tertiary menus */ | ||
+ | } | ||
+ | |||
+ | /* drop-down item styles */ | ||
+ | /* if you want different styling for tertiary menus, just copy the 4 rules below and insert an additional ul: for example: ".navigation ul ul li", becomes: ".navigation ul ul ul li" */ | ||
+ | |||
+ | .navigation ul ul li{ | ||
+ | background-color:#eaeaea; /* grey */ | ||
+ | width:170px; | ||
+ | -webkit-transition: background-color 0.3s ease; | ||
+ | -moz-transition: background-color 0.3s ease; | ||
+ | -o-transition: background-color 0.3s ease; | ||
+ | -ms-transition: background-color 0.3s ease; | ||
+ | transition: background-color 0.3s ease; | ||
+ | } | ||
+ | |||
+ | .navigation ul ul li:hover { | ||
+ | background-color:#999; /* grey */ | ||
+ | } | ||
+ | |||
+ | .navigation ul ul li a { | ||
+ | display:block; | ||
+ | text-decoration:none; | ||
+ | margin:0 12px; | ||
+ | padding:5px 0; | ||
+ | color:#4c4c4c; /* grey */ | ||
+ | } | ||
+ | .navigation ul ul li a:hover, .navigation ul ul li:hover > a { | ||
+ | color:#ffffff; /* white */ | ||
+ | } | ||
+ | |||
+ | </style> | ||
+ | |||
+ | |||
+ | <div class="testnav"> | ||
<ul> | <ul> | ||
Revision as of 00:50, 31 July 2015
Achievements
Despite the time constraints, our team achieved a lot this summer and we are proud of what we have accomplished.
read moreiGEM 2015
Learn about the exciting opportunities the iGEM foundation has to offer! The experience was incredible!
read moreContact Us!
Please contact our team if you want more information about our project or have any other questions or concerns.
read more