Team:NYMU-Taipei/Header/Sidebar

From 2013.igem.org

(Difference between revisions)
(Created page with "<html> <header> <style> @import: url(http://fonts.googleapis.com/css?family=Enriqueta:700); body { margin: 0; background: url(http://solitarydesigns.net/tools/patgen/im...")
 
(9 intermediate revisions not shown)
Line 2: Line 2:
<header>
<header>
 +
<style>
<style>
@import: url(http://fonts.googleapis.com/css?family=Enriqueta:700);
@import: url(http://fonts.googleapis.com/css?family=Enriqueta:700);
-
body {
+
.sdbar ul {
-
    margin: 0;
+
-
    background: url(http://solitarydesigns.net/tools/patgen/images/bg.png);
+
-
    color: #fff;
+
-
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+
-
    font-weight: 300;
+
-
}
+
-
 
+
-
ul {
+
     list-style: none;
     list-style: none;
-
     width: 189px;
+
     width: 149px;
     margin: 20px auto;
     margin: 20px auto;
     background: rgba(0,0,0,0.15);
     background: rgba(0,0,0,0.15);
Line 25: Line 18:
}
}
-
h2 {
+
.sdbar h2 {
font-size: 18px;
font-size: 18px;
color: #587b83;
color: #587b83;
Line 35: Line 28:
}
}
-
ul li span.bullet {
+
.sdbar ul li span.bullet {
     border-color: transparent transparent transparent #587b83;
     border-color: transparent transparent transparent #587b83;
     border-style: dotted;
     border-style: dotted;
-
     /* 'dotted' or 'dashed' is better than'solid' for triangles, try to change 'dotted' -> 'solid' see the ugliest triangle ever !*/
+
     /* 'dotted' or 'dashed' is better than'solid' for triangles, try to change 'dotted' -> 'solid' see the ugliest triangle ever !*/
     border-width: 5px;
     border-width: 5px;
     display: inline-block;
     display: inline-block;
Line 47: Line 40:
}
}
-
ul li div {
+
.sdbar ul li div {
     height: 0px;
     height: 0px;
     opacity: 0;
     opacity: 0;
Line 58: Line 51:
}
}
-
ul li div {
+
.sdbar ul li div {
font-size: 12px;
font-size: 12px;
}
}
 +
.sdbar ul>p {
 +
        margin-left: 0;
 +
        text-indent: 0px;
 +
}
 +
.sdbar ul li:last-child:hover div { height: 150px }
-
ul li:last-child:hover div { height: 150px }
+
.sdbar ul li:hover div {
-
 
+
-
ul li:hover div {
+
     opacity: 1;
     opacity: 1;
     height: 70px;
     height: 70px;
}
}
-
ul li.dropdown:hover span.bullet {
+
.sdbar ul li.dropdown:hover span.bullet {
     /*transform*/
     /*transform*/
     -webkit-transform: rotate(90deg);
     -webkit-transform: rotate(90deg);
Line 78: Line 74:
}
}
-
fieldset {
+
.sdbar fieldset {
     border: 0px;
     border: 0px;
     margin: 0px;
     margin: 0px;
Line 85: Line 81:
}
}
-
input[type="text"] {
 
-
    width: 50px;
 
-
    background: #fff;
 
-
    border: 1px solid  rgba(0, 0, 0, .2);
 
-
    padding: 2px;
 
-
}
 
-
 
-
input[type=text]:focus {
 
-
    outline: none;
 
-
    border-color: #000;
 
-
    color: #F00;
 
-
    font-weight: bold;
 
-
}
 
-
 
-
input[type="submit"] {
 
-
    width: 50px;
 
-
    background: #F00;
 
-
    border: 1px solid #F00;
 
-
    /*border-radius*/
 
-
    -webkit-border-radius: 5px;
 
-
    -moz-border-radius: 5px;
 
-
    border-radius: 5px;
 
-
    color: #FFF;
 
-
    padding: 4px;
 
-
    margin-left: 5px;
 
-
    /*box-shadow*/
 
-
    -webkit-box-shadow: inset 0px 0px 15px 0px rgba(0, 0, 0, 0.7);
 
-
    -moz-box-shadow: inset 0px 0px 15px 0px rgba(0, 0, 0, 0.7);
 
-
    box-shadow: inset 0px 0px 15px 0px rgba(0, 0, 0, 0.7);
 
-
}
 
-
 
-
input[type=submit]:hover { border: 1px solid #000 }
 
</style>
</style>
</header>
</header>
-
<body>
+
<div class="sdbar">
<ul>
<ul>
<li class="dropdown">
<li class="dropdown">
Line 161: Line 125:
<li class="dropdown">
<li class="dropdown">
-
<h2>Human Practice<span class="bullet"></span></h2>
+
<h2>Out Reach<span class="bullet"></span></h2>
<div><p><img src="http://www.southparkfr.com/images/perso/kennygrand.jpg" width="100" /></p></div>
<div><p><img src="http://www.southparkfr.com/images/perso/kennygrand.jpg" width="100" /></p></div>
</li>
</li>
</ul>
</ul>
 +
</div>
</body>
</body>
</html>
</html>

Latest revision as of 10:09, 9 September 2013

  • Overview

    a link

    This is visible when the <li> is hovered over.

  • Wetlab

    go on

    Its a little effect, and can be useful in many cases

  • Drylab

    To display any informations you want.

  • Modeling

  • Out Reach

Retrieved from "http://2013.igem.org/Team:NYMU-Taipei/Header/Sidebar"