|
|
(2 intermediate revisions not shown) |
Line 1: |
Line 1: |
- | /***
| |
- | Name: Wm. Keith van der Meulen
| |
- | Date: Summer 2013
| |
- | Organization: University of Calgary iGEM Team 2013
| |
| | | |
- | ---Purpose---
| |
- | CSS code to define navigation stylings.
| |
- | -------------
| |
- |
| |
- | Cite:
| |
- | Wm. Keith van der Meulen
| |
- | University of Calgary iGEM 2013
| |
- | https://2013.igem.org/Team:Calgary/StyleSheets/Navigation?action=raw&ctype=text/css
| |
- |
| |
- | ***/
| |
- |
| |
- | /* Start: Style for making drop down header*/
| |
- | .NavMain * {
| |
- | box-sizing: border-box;
| |
- | -moz-box-sizing: border-box;
| |
- | }
| |
- |
| |
- | .NavMain {
| |
- | display: inline-block;
| |
- | background-color: #000000;
| |
- | padding: 0 206px;
| |
- | }
| |
- |
| |
- | .NavMain ul {
| |
- | list-style: none;
| |
- | position: relative;
| |
- | display: inline-table;
| |
- | padding: 0;
| |
- | }
| |
- |
| |
- | .NavMain ul:after {
| |
- | content: "";
| |
- | clear: both;
| |
- | display: block;
| |
- | }
| |
- |
| |
- | .NavMain ul li {
| |
- | float: left;
| |
- | }
| |
- | /* End: Style for making drop down header*/
| |
- |
| |
- | /* Start: Style for making diagonal highlight*/
| |
- | #MainLinks {
| |
- | -webkit-transform: skew(-45deg);
| |
- | -moz-transform: skew(-45deg);
| |
- | -ms-transform: skew(-45deg);
| |
- | -o-transform: skew(-45deg);
| |
- | transform: skew(-45deg);
| |
- | }
| |
- |
| |
- |
| |
- | #MainLinks a, #MainLinks ul {
| |
- | -webkit-transform: skew(45deg);
| |
- | -moz-transform: skew(45deg);
| |
- | -ms-transform: skew(45deg);
| |
- | -o-transform: skew(45deg);
| |
- | transform: skew(45deg);
| |
- | }
| |
- |
| |
- | #MainLinks ul li a {
| |
- | -webkit-transform: skew(0deg);
| |
- | -moz-transform: skew(0deg);
| |
- | -ms-transform: skew(0deg);
| |
- | -o-transform: skew(0deg);
| |
- | transform: skew(0deg);
| |
- | }
| |
- |
| |
- | #MainLinks ul ul {
| |
- | -webkit-transform: skew(0deg);
| |
- | -moz-transform: skew(0deg);
| |
- | -ms-transform: skew(0deg);
| |
- | -o-transform: skew(0deg);
| |
- | transform: skew(0deg);
| |
- | }
| |
- |
| |
- | #MainLinks:hover {
| |
- | background-color: #00FFFF;
| |
- | }
| |
- | /* End: Style for making diagonal highlight*/
| |
- |
| |
- | /* Start: Style for aligning sub-menus with header link*/
| |
- | #MainProjectNav {
| |
- | left: 171px;
| |
- | }
| |
- |
| |
- | #MainTeamNav {
| |
- | left: 85px;
| |
- | }
| |
- |
| |
- | #MainNotebookNav {
| |
- | left: 64px;
| |
- | }
| |
- |
| |
- | #MainOutreachNav {
| |
- | left: 64px;
| |
- | }
| |
- | /* End: Style for aligning sub-menus with header link*/
| |
- |
| |
- | /* Start: Style for link attributes and sub-menu drop down links*/
| |
- | .NavMain ul li a {
| |
- | display: block;
| |
- | width: 159;
| |
- | font: bold 20px "Courier New", Courier, monospace;
| |
- | text-decoration: none;
| |
- | text-align: center;
| |
- | color: #FFFFFF;
| |
- | padding: 10px;
| |
- | background: none;
| |
- | }
| |
- |
| |
- | .NavMain ul li:hover > ul {
| |
- | display: block;
| |
- | background-color: #000000;
| |
- | }
| |
- |
| |
- | .NavMain ul ul {
| |
- | display: none;
| |
- | position: absolute;
| |
- | top: 100%;
| |
- | margin: 0;
| |
- | }
| |
- |
| |
- | .NavMain ul li:hover {
| |
- | background-color: #00FFFF;
| |
- | }
| |
- |
| |
- | .NavMain ul ul li {
| |
- | float: none;
| |
- | position: relative;
| |
- | width: 200px;
| |
- | }
| |
- |
| |
- | .NavMain ul ul li a {
| |
- | width: auto;
| |
- | text-align: left;
| |
- | background-image: none;
| |
- | }
| |
- |
| |
- | .NavMain ul ul li a:hover {
| |
- | background: none;
| |
- | }
| |
- |
| |
- | .NavMain ul ul li:first-child {
| |
- | margin-top: 2px;
| |
- | }
| |
- |
| |
- | .NavMain ul ul ul {
| |
- | position: absolute;
| |
- | left: 100%;
| |
- | top: 0;
| |
- | }
| |
- |
| |
- | .NavMain ul ul ul li {
| |
- | padding: 0;
| |
- | }
| |
- |
| |
- | .NavMain ul ul ul li:first-child {
| |
- | margin-top: 0;
| |
- | }
| |
- | /* End: Style for link attributes*/
| |