|
|
(15 intermediate revisions not shown) |
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>
| |
- |
| |
- |
| |
- |
| |
- |
| |
- |
| |
- | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
| |
- | <html>
| |
- | <head>
| |
- | <style type="text/css">
| |
- | body {
| |
- | background: #222;
| |
- | margin-top: 20px;
| |
- | }
| |
- |
| |
- | h3 {
| |
- | color: #eee;
| |
- | font-family: Verdana;
| |
- | }
| |
- |
| |
- | .thumbnails img {
| |
- | height: 80px;
| |
- | border: 4px solid #555;
| |
- | padding: 1px;
| |
- | margin: 0 10px 10px 0;
| |
- | }
| |
- |
| |
- | .thumbnails img:hover {
| |
- | border: 4px solid #00ccff;
| |
- | cursor:pointer;
| |
- | }
| |
- |
| |
- | .preview img {
| |
- | border: 4px solid #444;
| |
- | padding: 1px;
| |
- | height: 500px;
| |
- | }
| |
- | </style>
| |
- | </head>
| |
- | <body>
| |
- | <div>
| |
- | <div class="gallery" align="center">
| |
- |
| |
- | <div class="thumbnails">
| |
- | <img onmouseover="preview.src=img1.src" name="img1" src="https://static.igem.org/mediawiki/2013/7/76/Dr._Ziemba_GCC.JPG" alt=""/>
| |
- | <img onmouseover="preview.src=img2.src" name="img2" src="https://static.igem.org/mediawiki/2013/e/ef/TeresaGCC.jpg" alt=""/>
| |
- | <img onmouseover="preview.src=img3.src" name="img3" src="https://static.igem.org/mediawiki/2013/d/d9/SeanGCC.JPG" alt=""/>
| |
- | <img onmouseover="preview.src=img4.src" name="img4" src="http://bit.ly/2LHyDW" alt=""/>
| |
- | <img onmouseover="preview.src=img5.src" name="img5" src="http://bit.ly/2wyHSR" alt=""/>
| |
- | <img onmouseover="preview.src=img6.src" name="img6" src="http://bit.ly/yRo1i" alt=""/>
| |
- | </div>
| |
- |
| |
- | <div class="preview" align="center">
| |
- | <img name="preview" src="https://static.igem.org/mediawiki/2013/7/76/Dr._Ziemba_GCC.JPG" alt=""/>
| |
- | </div>
| |
- |
| |
- |
| |
- | </div> <!– Close the gallery div –>
| |
- | </body>
| |
- | </html>
| |