Team:Glendale CC AZ/css
From 2013.igem.org
(Difference between revisions)
(Blanked the page) |
|||
Line 1: | Line 1: | ||
+ | <html> | ||
+ | <style> | ||
+ | /* Some stylesheet reset */ | ||
+ | ul#cssmenu > ul, | ||
+ | #cssmenu > ul ul { | ||
+ | list-style: none; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | vertical-align: baseline; | ||
+ | line-height: 1; | ||
+ | } | ||
+ | /* The container */ | ||
+ | #cssmenu > ul, | ||
+ | #cssmenu > ul ul { | ||
+ | display: block; | ||
+ | position: relative; | ||
+ | width: 150px; | ||
+ | } | ||
+ | #cssmenu > ul ul { | ||
+ | display: block; | ||
+ | position: relative; | ||
+ | width: 150px; | ||
+ | } | ||
+ | /* The list elements which contain the links */ | ||
+ | #cssmenu > ul li { | ||
+ | display: block; | ||
+ | position: relative; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | } | ||
+ | /* General link styling */ | ||
+ | #cssmenu > ul li a { | ||
+ | /* Layout */ | ||
+ | |||
+ | display: block; | ||
+ | position: relative; | ||
+ | margin: 0; | ||
+ | border-top: 1px dotted #3a3a3a; | ||
+ | border-bottom: 1px dotted #1b1b1b; | ||
+ | padding: 11px 20px; | ||
+ | line-height: 1.5; | ||
+ | /* Typography */ | ||
+ | |||
+ | font-family: 'Yanone Kaffeesatz', Helvetica, Arial, sans-serif; | ||
+ | color: #d8d8d8; | ||
+ | text-decoration: none; | ||
+ | text-transform: uppercase; | ||
+ | text-shadow: 0 1px 1px #000; | ||
+ | font-size: 13px; | ||
+ | font-weight: 300; | ||
+ | /* Background & effects */ | ||
+ | |||
+ | background: #282828; | ||
+ | } | ||
+ | /* Rounded corners for the first link of the menu/submenus */ | ||
+ | #cssmenu > ul li:first-child > a { | ||
+ | border-top-left-radius: 4px; | ||
+ | border-top-right-radius: 4px; | ||
+ | border-top: 0; | ||
+ | } | ||
+ | /* Rounded corners for the last link of the menu/submenus */ | ||
+ | #cssmenu > ul li:last-child > a { | ||
+ | border-bottom-left-radius: 4px; | ||
+ | border-bottom-right-radius: 4px; | ||
+ | border-bottom: 0; | ||
+ | } | ||
+ | /* The hover state of the menu/submenu links */ | ||
+ | #cssmenu > ul li > a:hover, | ||
+ | #cssmenu > ul li:hover > a { | ||
+ | color: #fff; | ||
+ | text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3); | ||
+ | background: #d4b800; | ||
+ | background: -webkit-linear-gradient(bottom, #d4b800, #f6d600); | ||
+ | background: -ms-linear-gradient(bottom, #d4b800, #f6d600); | ||
+ | background: -moz-linear-gradient(bottom, #d4b800, #f6d600); | ||
+ | background: -o-linear-gradient(bottom, #d4b800, #f6d600); | ||
+ | border-color: transparent; | ||
+ | } | ||
+ | /* The arrow indicating a submenu */ | ||
+ | #cssmenu > ul .has-sub > a::after { | ||
+ | content: ''; | ||
+ | position: absolute; | ||
+ | top: 16px; | ||
+ | right: 10px; | ||
+ | width: 0px; | ||
+ | height: 0px; | ||
+ | /* Creating the arrow using borders */ | ||
+ | |||
+ | border: 4px solid transparent; | ||
+ | border-left: 4px solid #d8d8d8; | ||
+ | } | ||
+ | /* The same arrow, but with a darker color, to create the shadow effect */ | ||
+ | #cssmenu > ul .has-sub > a::before { | ||
+ | content: ''; | ||
+ | position: absolute; | ||
+ | top: 17px; | ||
+ | right: 10px; | ||
+ | width: 0px; | ||
+ | height: 0px; | ||
+ | /* Creating the arrow using borders */ | ||
+ | |||
+ | border: 4px solid transparent; | ||
+ | border-left: 4px solid #000; | ||
+ | } | ||
+ | /* Changing the color of the arrow on hover */ | ||
+ | #cssmenu > ul li > a:hover::after, | ||
+ | #cssmenu > ul li:hover > a::after { | ||
+ | border-left: 4px solid #fff; | ||
+ | } | ||
+ | #cssmenu > ul li > a:hover::before, | ||
+ | #cssmenu > ul li:hover > a::before { | ||
+ | border-left: 4px solid rgba(0, 0, 0, 0.3); | ||
+ | } | ||
+ | /* THE SUBMENUS */ | ||
+ | #cssmenu > ul ul { | ||
+ | position: absolute; | ||
+ | left: 150px; | ||
+ | top: -9999px; | ||
+ | padding-left: 5px; | ||
+ | opacity: 0; | ||
+ | /* The fade effect, created using an opacity transition */ | ||
+ | |||
+ | -webkit-transition: opacity 0.3s ease-in; | ||
+ | -moz-transition: opacity 0.3s ease-in; | ||
+ | -o-transition: opacity 0.3s ease-in; | ||
+ | -ms-transition: opacity 0.3s ease-in; | ||
+ | } | ||
+ | #cssmenu > ul ul ul { | ||
+ | left: 150px; | ||
+ | } | ||
+ | /* Showing the submenu when the user is hovering the parent link */ | ||
+ | #cssmenu > ul li:hover > ul { | ||
+ | top: 0px; | ||
+ | opacity: 1; | ||
+ | } | ||
+ | |||
+ | </style> | ||
+ | <html> | ||
+ | |||
+ | <link href="/menu_assets/styles.css" rel="stylesheet" type="text/css"> | ||
+ | |||
+ | <div id='cssmenu'> | ||
+ | <ul> | ||
+ | <li><a href='index.html'><span>Home</span></a></li> | ||
+ | <li class='has-sub'><a href='#'><span>Products</span></a> | ||
+ | <ul> | ||
+ | <li class='has-sub'><a href='#'><span>Product 1</span></a> | ||
+ | <ul> | ||
+ | <li><a href='#'><span>Sub Item</span></a></li> | ||
+ | <li class='last'><a href='#'><span>Sub Item</span></a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class='has-sub'><a href='#'><span>Product 2</span></a> | ||
+ | <ul> | ||
+ | <li><a href='#'><span>Sub Item</span></a></li> | ||
+ | <li class='last'><a href='#'><span>Sub Item</span></a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li><a href='#'><span>About</span></a></li> | ||
+ | <li class='last'><a href='#'><span>Contact</span></a></li> | ||
+ | </ul> | ||
+ | </div> |
Revision as of 18:42, 31 July 2013