Difference between revisions of "Team:CityU HK/Experiments"
Line 22: | Line 22: | ||
.wsite-headline{color:transparent;} | .wsite-headline{color:transparent;} | ||
</style> | </style> | ||
+ | |||
+ | <style type='text/css'> | ||
+ | |||
+ | /************* sidebar style **************/ | ||
+ | @import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css); | ||
+ | } | ||
+ | @import url(http://fonts.googleapis.com/css?family=Titillium+Web:300); | ||
+ | .fa-2x { | ||
+ | font-size: 2em; | ||
+ | } | ||
+ | .sidebar-fa { | ||
+ | position: relative; | ||
+ | display: table-cell; | ||
+ | width: 60px; | ||
+ | height: 36px; | ||
+ | text-align: center; | ||
+ | vertical-align: middle; | ||
+ | font-size:20px; | ||
+ | color:#ffffff; | ||
+ | } | ||
+ | |||
+ | .main-menu:hover,nav.main-menu.expanded { | ||
+ | width:250px; | ||
+ | overflow:visible; | ||
+ | } | ||
+ | |||
+ | .main-menu { | ||
+ | background:#ffb90f; | ||
+ | border-right:1px solid #e5e5e5; | ||
+ | position:fixed; | ||
+ | top:200px; | ||
+ | bottom:0; | ||
+ | height:150px; | ||
+ | left:0; | ||
+ | width:60px; | ||
+ | overflow:hidden; | ||
+ | -webkit-transition:width .05s linear; | ||
+ | transition:width .05s linear; | ||
+ | -webkit-transform:translateZ(0) scale(1,1); | ||
+ | z-index:1000; | ||
+ | } | ||
+ | |||
+ | .main-menu>ul { | ||
+ | margin:7px 0; | ||
+ | } | ||
+ | |||
+ | .main-menu li { | ||
+ | position:relative; | ||
+ | display:block; | ||
+ | width:250px; | ||
+ | } | ||
+ | |||
+ | .main-menu li>a { | ||
+ | position:relative; | ||
+ | display:table; | ||
+ | border-collapse:collapse; | ||
+ | border-spacing:0; | ||
+ | color:#999; | ||
+ | font-family: arial; | ||
+ | font-size: 14px; | ||
+ | text-decoration:none; | ||
+ | -webkit-transform:translateZ(0) scale(1,1); | ||
+ | -webkit-transition:all .1s linear; | ||
+ | transition:all .1s linear; | ||
+ | |||
+ | } | ||
+ | |||
+ | .main-menu .nav-icon { | ||
+ | position:relative; | ||
+ | display:table-cell; | ||
+ | width:60px; | ||
+ | height:36px; | ||
+ | text-align:center; | ||
+ | vertical-align:middle; | ||
+ | font-size:18px; | ||
+ | } | ||
+ | |||
+ | .main-menu .nav-text { | ||
+ | position:relative; | ||
+ | display:table-cell; | ||
+ | vertical-align:middle; | ||
+ | width:190px; | ||
+ | font-family: 'Titillium Web', sans-serif; | ||
+ | } | ||
+ | |||
+ | .no-touch .scrollable.hover { | ||
+ | overflow-y:hidden; | ||
+ | } | ||
+ | |||
+ | .no-touch .scrollable.hover:hover { | ||
+ | overflow-y:auto; | ||
+ | overflow:visible; | ||
+ | } | ||
+ | |||
+ | a:hover,a:focus { | ||
+ | text-decoration:none; | ||
+ | } | ||
+ | |||
+ | nav { | ||
+ | -webkit-user-select:none; | ||
+ | -moz-user-select:none; | ||
+ | -ms-user-select:none; | ||
+ | -o-user-select:none; | ||
+ | user-select:none; | ||
+ | } | ||
+ | |||
+ | nav ul,nav li { | ||
+ | outline:0; | ||
+ | margin:0; | ||
+ | padding:0; | ||
+ | } | ||
+ | .main-menu li:hover>a,nav.main-menu li.active>a,.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus,.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus,.no-touch .dashboard-page nav.dashboard-menu ul li:hover a,.dashboard-page nav.dashboard-menu ul li.active a { | ||
+ | color:#fff; | ||
+ | background-color:#5fa2db; | ||
+ | } | ||
+ | .area { | ||
+ | float: left; | ||
+ | background: #e2e2e2; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | } | ||
+ | .nav-text { | ||
+ | font-weight:bold; | ||
+ | font-size:1.2em; | ||
+ | color:#ffffff; | ||
+ | border-top-style: solid; | ||
+ | border-top-width: 1px; | ||
+ | border-top-color: #f9d682; | ||
+ | } | ||
+ | #first-item { | ||
+ | border:none; | ||
+ | } | ||
+ | |||
+ | @font-face { | ||
+ | font-family: 'Titillium Web'; | ||
+ | font-style: normal; | ||
+ | font-weight: 300; | ||
+ | src: local('Titillium WebLight'), local('TitilliumWeb-Light'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v2/anMUvcNT0H1YN4FII8wpr24bNCNEoFTpS2BTjF6FB5E.woff) format('woff'); | ||
+ | } | ||
+ | </style> | ||
+ | |||
</head> | </head> | ||
<body class="short-header-page wsite-page-description"><input type="checkbox" id="navTrigger" /> | <body class="short-header-page wsite-page-description"><input type="checkbox" id="navTrigger" /> | ||
+ | |||
+ | <!----------- sidebar html ------------> | ||
+ | <div class="area"></div><nav class="main-menu"> | ||
+ | <ul> | ||
+ | <li> | ||
+ | <a class="scroll" href="#laczy"> | ||
+ | <i class="sidebar-fa"></i> | ||
+ | <span class="nav-text" id="first-item"> | ||
+ | LacZY plasmid | ||
+ | </span> | ||
+ | </a> | ||
+ | </li> | ||
+ | |||
+ | <li class="has-subnav"> | ||
+ | <a class="scroll" href="#lactose"> | ||
+ | <i class="sidebar-fa fa fa-th-list fa-2x"></i> | ||
+ | <span class="nav-text"> | ||
+ | Lactose inducible promoter | ||
+ | </span> | ||
+ | </a> | ||
+ | </li> | ||
+ | |||
+ | <li class="has-subnav"> | ||
+ | <a class="scroll" href="#lysis"> | ||
+ | <i class="sidebar-fa"></i> | ||
+ | <span class="nav-text"> | ||
+ | Lysis plasmid | ||
+ | </span> | ||
+ | </a> | ||
+ | </li> | ||
+ | |||
+ | <li class="has-subnav"> | ||
+ | <a class="scroll" href="#characterization"> | ||
+ | <i class="sidebar-fa"></i> | ||
+ | <span class="nav-text"> | ||
+ | Characterization | ||
+ | </span> | ||
+ | </a> | ||
+ | </li> | ||
+ | |||
+ | </ul> | ||
+ | |||
+ | </nav> <!---------end of sidebar ---------> | ||
+ | |||
<div class="wrapper"> | <div class="wrapper"> |
Revision as of 09:17, 18 September 2015