Team:Evry/Template:Menu
From 2014.igem.org
(Difference between revisions)
Line 1: | Line 1: | ||
<html> | <html> | ||
<head> | <head> | ||
- | <script src="workbook/html/js/config.js"></script> | + | body { |
+ | margin:0; | ||
+ | padding:0; | ||
+ | border:0; /* This removes the border around the viewport in old versions of IE */ | ||
+ | width:100%; | ||
+ | background:#fff; | ||
+ | min-width:600px; /* Minimum width of layout - remove line if not required */ | ||
+ | /* The min-width property does not work in old versions of Internet Explorer */ | ||
+ | font-size:90%; | ||
+ | } | ||
+ | a { | ||
+ | color:#369; | ||
+ | } | ||
+ | a:hover { | ||
+ | color:#fff; | ||
+ | background:#369; | ||
+ | text-decoration:none; | ||
+ | } | ||
+ | h1, h2, h3 { | ||
+ | margin:.8em 0 .2em 0; | ||
+ | padding:0; | ||
+ | } | ||
+ | p { | ||
+ | margin:.4em 0 .8em 0; | ||
+ | padding:0; | ||
+ | } | ||
+ | img { | ||
+ | margin:10px 0 5px; | ||
+ | } | ||
+ | #ads img { | ||
+ | display:block; | ||
+ | padding-top:10px; | ||
+ | } | ||
+ | |||
+ | /* Header styles */ | ||
+ | #header { | ||
+ | clear:both; | ||
+ | float:left; | ||
+ | width:100%; | ||
+ | } | ||
+ | #header { | ||
+ | border-bottom:1px solid #000; | ||
+ | } | ||
+ | #header p, | ||
+ | #header h1, | ||
+ | #header h2 { | ||
+ | padding:.4em 15px 0 15px; | ||
+ | margin:0; | ||
+ | } | ||
+ | #header ul { | ||
+ | clear:left; | ||
+ | float:left; | ||
+ | width:100%; | ||
+ | list-style:none; | ||
+ | margin:10px 0 0 0; | ||
+ | padding:0; | ||
+ | } | ||
+ | #header ul li { | ||
+ | display:inline; | ||
+ | list-style:none; | ||
+ | margin:0; | ||
+ | padding:0; | ||
+ | } | ||
+ | #header ul li a { | ||
+ | display:block; | ||
+ | float:left; | ||
+ | margin:0 0 0 1px; | ||
+ | padding:3px 10px; | ||
+ | text-align:center; | ||
+ | background:#eee; | ||
+ | color:#000; | ||
+ | text-decoration:none; | ||
+ | position:relative; | ||
+ | left:15px; | ||
+ | line-height:1.3em; | ||
+ | } | ||
+ | #header ul li a:hover { | ||
+ | background:#369; | ||
+ | color:#fff; | ||
+ | } | ||
+ | #header ul li a.active, | ||
+ | #header ul li a.active:hover { | ||
+ | color:#fff; | ||
+ | background:#000; | ||
+ | font-weight:bold; | ||
+ | } | ||
+ | #header ul li a span { | ||
+ | display:block; | ||
+ | } | ||
+ | /* 'widths' sub menu */ | ||
+ | #layoutdims { | ||
+ | clear:both; | ||
+ | background:#eee; | ||
+ | border-top:4px solid #000; | ||
+ | margin:0; | ||
+ | padding:6px 15px !important; | ||
+ | text-align:right; | ||
+ | } | ||
+ | /* column container */ | ||
+ | .colmask { | ||
+ | position:relative; /* This fixes the IE7 overflow hidden bug */ | ||
+ | clear:both; | ||
+ | float:left; | ||
+ | width:100%; /* width of whole page */ | ||
+ | overflow:hidden; /* This chops off any overhanging divs */ | ||
+ | } | ||
+ | /* common column settings */ | ||
+ | .colright, | ||
+ | .colmid, | ||
+ | .colleft { | ||
+ | float:left; | ||
+ | width:100%; | ||
+ | position:relative; | ||
+ | } | ||
+ | .col1, | ||
+ | .col2, | ||
+ | .col3 { | ||
+ | float:left; | ||
+ | position:relative; | ||
+ | padding:0 0 1em 0; | ||
+ | overflow:hidden; | ||
+ | } | ||
+ | /* 2 Column (left menu) settings */ | ||
+ | .leftmenu { | ||
+ | background:#fff; /* right column background colour */ | ||
+ | } | ||
+ | .leftmenu .colleft { | ||
+ | right:75%; /* right column width */ | ||
+ | background:#f4f4f4; /* left column background colour */ | ||
+ | } | ||
+ | .leftmenu .col1 { | ||
+ | width:71%; /* right column content width */ | ||
+ | left:102%; /* 100% plus left column left padding */ | ||
+ | } | ||
+ | .leftmenu .col2 { | ||
+ | width:21%; /* left column content width (column width minus left and right padding) */ | ||
+ | left:6%; /* (right column left and right padding) plus (left column left padding) */ | ||
+ | } | ||
+ | /* Footer styles */ | ||
+ | #footer { | ||
+ | clear:both; | ||
+ | float:left; | ||
+ | width:100%; | ||
+ | border-top:1px solid #000; | ||
+ | } | ||
+ | #footer p { | ||
+ | padding:10px; | ||
+ | margin:0; | ||
+ | } | ||
+ | </style> | ||
+ | <script src="workbook/html/js/config.js"></script> | ||
<script src="workbook/html/js/skel.min.js"></script> | <script src="workbook/html/js/skel.min.js"></script> | ||
Line 35: | Line 185: | ||
<style> | <style> | ||
+ | |||
+ | /* Initial body */ | ||
+ | body { | ||
+ | left: 0; | ||
+ | margin: 0; | ||
+ | overflow: hidden; | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | /* Initial menu */ | ||
+ | .menu { | ||
+ | background: #04084E; | ||
+ | left: 10px; /* start off behind the scenes */ | ||
+ | height: 25%; | ||
+ | position: fixed; | ||
+ | width: 285px; | ||
+ | } | ||
/* Menu accordéon */ | /* Menu accordéon */ | ||
Line 92: | Line 259: | ||
#menu-accordeon li:hover li { | #menu-accordeon li:hover li { | ||
max-height: 15em; | max-height: 15em; | ||
+ | } | ||
+ | /* Fin menu accordeon */ | ||
+ | |||
+ | |||
+ | /* Basic styling */ | ||
+ | |||
+ | .jumbotron { | ||
+ | |||
+ | |||
+ | /* background-image: url('/home/wdigan/Desktop/igem/wiki/imagewiki/BernardEvry.JPG'); */ | ||
+ | background: rgb(240,249,255); /* Old browsers */ | ||
+ | background: -moz-linear-gradient(left, rgba(240,249,255,1) 0%, rgba(203,235,255,1) 47%, rgba(161,219,255,1) 100%); /* FF3.6+ */ | ||
+ | background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(240,249,255,1)), color-stop(47%,rgba(203,235,255,1)), color-stop(100%,rgba(161,219,255,1))); /* Chrome,Safari4+ */ | ||
+ | background: -webkit-linear-gradient(left, rgba(240,249,255,1) 0%,rgba(203,235,255,1) 47%,rgba(161,219,255,1) 100%); /* Chrome10+,Safari5.1+ */ | ||
+ | background: -o-linear-gradient(left, rgba(240,249,255,1) 0%,rgba(203,235,255,1) 47%,rgba(161,219,255,1) 100%); /* Opera 11.10+ */ | ||
+ | background: -ms-linear-gradient(left, rgba(240,249,255,1) 0%,rgba(203,235,255,1) 47%,rgba(161,219,255,1) 100%); /* IE10+ */ | ||
+ | background: linear-gradient(to right, rgba(240,249,255,1) 0%,rgba(203,235,255,1) 47%,rgba(161,219,255,1) 100%); /* W3C */ | ||
+ | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f9ff', endColorstr='#a1dbff',GradientType=1 ); /* IE6-9 */ | ||
+ | height: 100%; | ||
+ | -webkit-background-size: cover; | ||
+ | -moz-background-size: cover; | ||
+ | -o-background-size: cover; | ||
+ | background-size: cover; | ||
+ | } | ||
+ | |||
+ | .menu ul { | ||
+ | border-top: 4px solid #636366; | ||
+ | list-style: none; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | } | ||
+ | |||
+ | .menu li { | ||
+ | border-bottom: 1px solid #636366; | ||
+ | font-family: 'Open Sans', sans-serif; | ||
+ | line-height: 20px; | ||
+ | padding-bottom: 3px; | ||
+ | padding-left: 20px; | ||
+ | padding-top: 3px; | ||
+ | } | ||
+ | |||
+ | /*icon tab*/ | ||
+ | .menu a { | ||
+ | color: white; | ||
+ | font-size: 15px; | ||
+ | text-decoration: none; | ||
+ | text-transform: uppercase; | ||
+ | } | ||
+ | |||
+ | .icon-close { | ||
+ | cursor: pointer; | ||
+ | padding-left:5px; | ||
+ | padding-top: 5px; | ||
+ | } | ||
+ | |||
+ | /*contents tab*/ | ||
+ | .icon-menu { | ||
+ | color: black; | ||
+ | cursor: pointer; | ||
+ | font-family: 'Open Sans', sans-serif; | ||
+ | font-size: 25px; | ||
+ | padding-bottom: 25px; | ||
+ | padding-left: 25px; | ||
+ | padding-top: 25px; | ||
+ | text-decoration: none; | ||
+ | text-transform: uppercase; | ||
+ | } | ||
+ | |||
+ | .icon-menu i { | ||
+ | margin-right: 5px; | ||
} | } | ||
</style> | </style> |
Revision as of 16:43, 23 August 2014
body { margin:0; padding:0; border:0; /* This removes the border around the viewport in old versions of IE */ width:100%; background:#fff; min-width:600px; /* Minimum width of layout - remove line if not required */ /* The min-width property does not work in old versions of Internet Explorer */ font-size:90%; } a { color:#369; } a:hover { color:#fff; background:#369; text-decoration:none; } h1, h2, h3 { margin:.8em 0 .2em 0; padding:0; } p { margin:.4em 0 .8em 0; padding:0; } img { margin:10px 0 5px; } #ads img { display:block; padding-top:10px; } /* Header styles */ #header { clear:both; float:left; width:100%; } #header { border-bottom:1px solid #000; } #header p, #header h1, #header h2 { padding:.4em 15px 0 15px; margin:0; } #header ul { clear:left; float:left; width:100%; list-style:none; margin:10px 0 0 0; padding:0; } #header ul li { display:inline; list-style:none; margin:0; padding:0; } #header ul li a { display:block; float:left; margin:0 0 0 1px; padding:3px 10px; text-align:center; background:#eee; color:#000; text-decoration:none; position:relative; left:15px; line-height:1.3em; } #header ul li a:hover { background:#369; color:#fff; } #header ul li a.active, #header ul li a.active:hover { color:#fff; background:#000; font-weight:bold; } #header ul li a span { display:block; } /* 'widths' sub menu */ #layoutdims { clear:both; background:#eee; border-top:4px solid #000; margin:0; padding:6px 15px !important; text-align:right; } /* column container */ .colmask { position:relative; /* This fixes the IE7 overflow hidden bug */ clear:both; float:left; width:100%; /* width of whole page */ overflow:hidden; /* This chops off any overhanging divs */ } /* common column settings */ .colright, .colmid, .colleft { float:left; width:100%; position:relative; } .col1, .col2, .col3 { float:left; position:relative; padding:0 0 1em 0; overflow:hidden; } /* 2 Column (left menu) settings */ .leftmenu { background:#fff; /* right column background colour */ } .leftmenu .colleft { right:75%; /* right column width */ background:#f4f4f4; /* left column background colour */ } .leftmenu .col1 { width:71%; /* right column content width */ left:102%; /* 100% plus left column left padding */ } .leftmenu .col2 { width:21%; /* left column content width (column width minus left and right padding) */ left:6%; /* (right column left and right padding) plus (left column left padding) */ } /* Footer styles */ #footer { clear:both; float:left; width:100%; border-top:1px solid #000; } #footer p { padding:10px; margin:0; }