(27 intermediate revisions by 2 users not shown) | |||
Line 4: | Line 4: | ||
<head> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> | <head> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> | ||
+ | |||
Line 31: | Line 32: | ||
left: 1020px; | left: 1020px; | ||
z-index: 10; | z-index: 10; | ||
− | |||
background-color: #f2f2f2; | background-color: #f2f2f2; | ||
text-align: left; | text-align: left; | ||
Line 74: | Line 74: | ||
− | a. | + | a.menu_controller { |
− | background-color: #9b004e; | + | background-color: #9b004e; |
− | + | color: white; | |
− | height: | + | height: 19px; |
− | + | display: block; | |
− | + | text-align: center; | |
− | + | float: left; | |
− | + | padding: 10px 0px; | |
− | + | ||
} | } | ||
− | + | a.menu_controller:hover { | |
− | a. | + | |
text-decoration: none; | text-decoration: none; | ||
background-color: #f2f2f2; | background-color: #f2f2f2; | ||
} | } | ||
− | . | + | .current_menu { width: 160px;} |
+ | |||
+ | .menu_navigation { width:30px;} | ||
/********************************* CONTENT OF THE PAGE ********************************/ | /********************************* CONTENT OF THE PAGE ********************************/ | ||
Line 385: | Line 385: | ||
} | } | ||
+ | |||
+ | |||
+ | |||
+ | ul.main_menu_list { | ||
+ | list-style: none; | ||
+ | margin-left: 0px; | ||
+ | } | ||
+ | |||
+ | |||
+ | a.main_menu_item { | ||
+ | |||
+ | display: block; | ||
+ | background-color: #f2f2f2; | ||
+ | padding: 10px 15px; | ||
+ | border-bottom: 2px solid #d3d3d3; | ||
+ | color: #333333; | ||
+ | float: left; | ||
+ | } | ||
+ | |||
+ | |||
+ | a.main_menu_item:hover { | ||
+ | text-decoration: none; | ||
+ | color: white; | ||
+ | background-color: #9b004e; | ||
+ | } | ||
+ | |||
+ | a.main_menu_item.title { | ||
+ | width: 65%; | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | a.main_menu_item.title.full { | ||
+ | width: 86%; | ||
+ | } | ||
+ | |||
+ | a.main_menu_item.collapse_control { | ||
+ | width:6.8%; | ||
+ | border-left: 2px solid #d3d3d3; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | a.main_menu_item.collapse_control::before { content: "▼"; } | ||
+ | |||
+ | |||
+ | ul.submenu { | ||
+ | display: none; | ||
+ | list-style: none; | ||
+ | margin-left: 0px; | ||
+ | clear:both; | ||
+ | } | ||
+ | |||
+ | ul.submenu li { | ||
+ | margin-bottom: 0px; | ||
+ | } | ||
+ | |||
+ | ul.submenu li a{ | ||
+ | display: block; | ||
+ | border-bottom: 1px solid #d3d3d3; | ||
+ | padding: 5px 0px 5px 15px; | ||
+ | } | ||
+ | |||
+ | ul.submenu li a:hover { | ||
+ | background-color: #9b004e; | ||
+ | text-decoration: none; | ||
+ | color:white; | ||
+ | } | ||
+ | |||
+ | |||
+ | ol.hubmenu_list { | ||
+ | padding-bottom: 15px; | ||
+ | } | ||
</style> | </style> | ||
Line 395: | Line 468: | ||
− | <a class=" | + | <a class="menu_controller menu_navigation hubmenus" id="switch_between_menus"> ◀ </a> |
− | <a id="current_hub_menu" class="current_menu" href=""> </a> | + | <a id="current_hub_menu" class="menu_controller current_menu" href=""> </a> |
− | <a class=" | + | <a class="menu_controller menu_navigation"> ▶ </a> |
<div class="clear"></div> | <div class="clear"></div> | ||
− | <ol id="hubmenu_list"> | + | <ol id="hubmenu_list" class="hubmenu_list"> </ol> |
− | + | <ul id="main_menu_list" class="main_menu_list"> </ul> | |
− | + | ||
− | </ | + | |
</div> | </div> | ||
Line 437: | Line 508: | ||
<div class="oneColumn"> | <div class="oneColumn"> | ||
+ | |||
+ | <img src="https://static.igem.org/mediawiki/2016/1/1a/Registry_icons_sharp_plasmids_Plasmids.svg"> | ||
+ | |||
<h3> Example</h3> | <h3> Example</h3> | ||
<p>Lorem ipsum dolor sit amet, ex natum iracundia mnesarchum quo, vix te eirmod alienum voluptatibus. Vero aperiri sea eu, duo an putent fierent explicari, minimum principes constituam vel ad. Porro persius philosophia duo ea, luptatum insolens vim cu. Id nec falli theophrastus.</p> | <p>Lorem ipsum dolor sit amet, ex natum iracundia mnesarchum quo, vix te eirmod alienum voluptatibus. Vero aperiri sea eu, duo an putent fierent explicari, minimum principes constituam vel ad. Porro persius philosophia duo ea, luptatum insolens vim cu. Id nec falli theophrastus.</p> | ||
Line 467: | Line 541: | ||
<a href=""> Default link color </a> | <a href=""> Default link color </a> | ||
+ | |||
+ | <script>(function(e,t,o,n){var s,c,i;e.SMCX=e.SMCX||[],t.getElementById(n)||(s=t.getElementsByTagName(o),c=s[s.length-1],i=t.createElement(o),i.type="text/javascript",i.async=!0,i.id=n,i.src=["https:"===location.protocol?"https://":"http://","widget.surveymonkey.com/collect/website/js/Y1ojI96L2Yiy6omJUQl1VezvJOLGmzhKEBqV3Q235djLaTyLbBNzl9zuNLeHKlnx.js"].join(""),c.parentNode.insertBefore(i,c))})(window,document,"script","smcx-sdk");</script><a style="font: 12px Helvetica, sans-serif; color: #999; text-decoration: none;" href=https://www.surveymonkey.com/mp/customer-satisfaction-surveys/> Create your own user feedback survey </a> | ||
</div> | </div> |
Latest revision as of 19:17, 28 July 2016
loading...
Example
Lorem ipsum dolor sit amet, ex natum iracundia mnesarchum quo, vix te eirmod alienum voluptatibus. Vero aperiri sea eu, duo an putent fierent explicari, minimum principes constituam vel ad. Porro persius philosophia duo ea, luptatum insolens vim cu. Id nec falli theophrastus.
Lorem ipsum dolor sit amet, ex natum iracundia mnesarchum quo, vix te eirmod alienum voluptatibus.Lorem ipsum dolor sit amet, ex natum iracundia mnesarchum quo, vix te eirmod alienum voluptatibus. Vero aperiri sea eu, duo an putent fierent explicari, minimum principes constituam vel ad. Porro persius philosophia duo ea, luptatum insolens vim cu. Id nec falli theophrastus.
text
Buttons
There are three colors available and the size of the button adjusts to the text.
Highlight and border decoration
Example List
Example List
Example text
Lorem ipsum dolor sit amet, ex natum iracundia mnesarchum quo, vix te eirmod alienum voluptatibus.
Example text
Lorem ipsum dolor sit amet, ex natum iracundia mnesarchum quo, vix te eirmod alienum voluptatibus.
Example text
Lorem ipsum dolor sit amet, ex natum iracundia mnesarchum quo, vix te eirmod alienum voluptatibus.
Example text
Lorem ipsum dolor sit amet, ex natum iracundia mnesarchum quo, vix te eirmod alienum voluptatibus.
Example text
Lorem ipsum dolor sit amet, ex natum iracundia mnesarchum quo, vix te eirmod alienum voluptatibus.
Example text
Lorem ipsum dolor sit amet, ex natum iracundia mnesarchum quo, vix te eirmod alienum voluptatibus.
Alert message
Example text
Lorem ipsum dolor sit amet, ex natum iracundia mnesarchum quo, vix te eirmod alienum voluptatibus.
News items
Title of the item
Lorem ipsum dolor sit amet, ex natum iracundia mnesarchum quo, vix te eirmod alienum voluptatibus. Vero aperiri sea eu, duo an putent fierent explicari, minimum principes constituam vel ad. Porro persius philosophia duo ea, luptatum insolens vim cu. Id nec falli theophrastus.
Lorem ipsum dolor sit amet, ex natum iracundia mnesarchum quo, vix te eirmod alienum voluptatibus. Vero aperiri sea eu, duo an putent fierent explicari, minimum principes constituam vel ad. Porro persius philosophia duo ea, luptatum insolens vim cu. Id nec falli theophrastus. Lorem ipsum dolor sit amet, ex natum iracundia mnesarchum quo, vix te eirmod alienum voluptatibus. Vero aperiri sea eu, duo an putent fierent explicari, minimum principes constituam vel ad. Porro persius philosophia duo ea, luptatum insolens vim cu. Id nec falli theophrastus.
Title of the item
Lorem ipsum dolor sit amet, ex natum iracundia mnesarchum quo, vix te eirmod alienum voluptatibus. Vero aperiri sea eu, duo an putent fierent explicari, minimum principes constituam vel ad. Porro persius philosophia duo ea, luptatum insolens vim cu. Id nec falli theophrastus.