Team:Wageningen UR/Templates/NavigationLeft

From 2011.igem.org

(Difference between revisions)
Line 3: Line 3:
   <style type="text/css">
   <style type="text/css">
    
    
-
  @charset "UTF-8";
+
/**
-
 
+
  *********************************************
-
/**  
+
  * Prototype of styles for horizontal CSS-menu
-
  * Default CSS Drop-Down Menu Theme
+
  * @data 25.01.2010
-
  *
+
  *********************************************
-
  * @file default.css
+
  * (X)HTML-scheme:
-
  * @name Default
+
  * <div id="menu">
-
  * @version 0.1
+
  *     <ul class="menu">
-
  * @type transitional
+
  *         <li><a href="#" class="parent"><span>level 1</span></a>
-
  * @browsers Windows: IE5+, Opera7+, Firefox1+
+
  *             <div><ul>
-
  * Mac OS: Safari2+, Firefox2+
+
  *                 <li><a href="#" class="parent"><span>level 2</span></a>
-
  *
+
*                      <div><ul><li><a href="#"><span>level 3</span></a></li></ul></div>
-
  * @link http://www.lwis.net/
+
  *                 </li>
-
  * @copyright 2008 Live Web Institute. All Rights Reserved.
+
  *             </ul></div>
-
  *
+
  *         </li>
-
  * Module Classes: *.dir {} *.on {} *.open {} li.hover {} li.first {} li.last {}
+
*         <li class="last"><a href="#"><span>level 1</span></a></li>
-
  * Expected directory tag - li
+
  *     </ul>
-
  *
+
  *  </div>
 +
*********************************************
  */
  */
-
@import "helper.css";
+
/* menu::base */
-
@import url(http://fonts.googleapis.com/css?family=Ubuntu);
+
#menu {
-
 
+
    position:relative;
-
 
+
    z-index:100;
-
/*-------------------------------------------------/
+
    height:32px;
-
* @section Base Drop-Down Styling
+
-
* @structure ul (unordered list)
+
-
* ul li (list item)
+
-
* ul li a (links)
+
-
* /*\.class|(li|a):hover/
+
-
* @level sep ul
+
-
*/
+
-
 
+
-
a {
+
-
font-family: 'Ubuntu', serif;
+
-
font-size: 13px;
+
-
font-weight: bold;
+
-
color: white;
+
-
text-shadow: 0 0px 0 #372c24;
+
-
}
+
-
 
+
-
ul.dropdown {
+
-
font-family: 'Ubuntu', serif;
+
-
color: transparent;
+
-
margin-bottom: -34px;
+
-
}
+
-
 
+
-
ul.dropdown li {
+
-
        /* background-image: url('https://static.igem.org/mediawiki/2011/a/ae/4menubar.png'); */
+
-
        background-repeat: no-repeat;
+
-
        background-position: 3% 50%;
+
-
        height: 34px;
+
-
        padding-top: 12px;
+
-
        padding-left: 37px;
+
-
        margin: 0 0 0 1em;
+
-
        border-style: solid;
+
-
        border-width: 2px;
+
-
        border-color: transparent;
+
-
}
+
-
 
+
-
ul.dropdown li.hover,
+
-
ul.dropdown li:hover {
+
-
        background-color: transparent;
+
-
background-image: url('https://static.igem.org/mediawiki/2011/8/80/5menubar.png');
+
-
        border-color: transparent;
+
-
}
+
-
 
+
-
ul.dropdown a:link {
+
-
color: white;
+
-
        text-shadow: 0 0px 0 #372c24;
+
-
text-decoration: none;
+
-
font-family: 'Ubuntu', serif;
+
-
        font-size: 13px;
+
-
        font-weight: bold;
+
-
}
+
-
+
-
ul.dropdown a:visited {
+
-
        color: white;
+
-
        text-shadow: 0 0px 0 #372c24;
+
-
text-decoration: none;
+
-
font-family: 'Ubuntu', serif;
+
-
        font-size: 13px;
+
-
        font-weight: bold;
+
-
        }
+
-
+
-
ul.dropdown  a:hover {
+
-
color: white;
+
-
        text-shadow: 0 0px 0 #372c24;
+
-
text-decoration: none;
+
-
font-family: 'Ubuntu', serif;
+
-
        font-size: 13px;
+
-
        font-weight: bold;
+
-
       
+
-
        }
+
-
+
-
ul.dropdown a:active {
+
-
        color: white;
+
-
        text-shadow: 0 0px 0 #372c24;
+
-
text-decoration: none;
+
-
font-family: 'Ubuntu', serif;
+
-
        font-size: 13px;
+
-
        font-weight: bold;
+
-
        }
+
-
 
+
-
 
+
-
+
-
/* -- level mark -- */
+
-
 
+
-
ul.dropdown ul {
+
-
        margin-left: -32px;
+
-
        width: 190px !important;
+
-
        }
+
-
 
+
-
ul.dropdown ul li {
+
-
font-weight: normal;
+
-
                }
+
-
 
+
-
 
+
-
 
+
-
/*-------------------------------------------------/
+
-
* @section Support Class `dir`
+
-
* @level sep ul, .class
+
-
*/
+
-
 
+
-
 
+
-
ul.dropdown *.dir {
+
-
padding-right: 0px;
+
-
background-image: url(images/nav-arrow-down.png);
+
-
background-position: 100% 50%;
+
-
background-repeat: no-repeat;
+
}
}
-
 
+
#menu .menu {
-
 
+
    position:absolute;
-
/* -- Components override -- */
+
-
 
+
-
 
+
-
@import "dropdown.css";
+
-
 
+
-
* html ul.dropdown li {
+
-
height: 1px;
+
}
}
-
 
+
#menu * {
-
ul.dropdown ul li,
+
    list-style:none;
-
ul.dropdown-vertical {
+
    border:0;
-
margin-left: 100px;
+
    padding:0;
-
mar\gin-left: 0px;
+
    margin:0;
}
}
-
 
+
#menu a {
-
ul.dropdown ul,
+
    display:block;
-
ul.dropdown li:hover ul ul,
+
    padding:7px 14px 7px 14px;
-
ul.dropdown li:hover ul ul ul,
+
    white-space:nowrap;
-
ul.dropdown li:hover ul ul ul ul,
+
-
ul.dropdown li:hover ul ul ul ul ul {
+
-
visibility: hidden;
+
}
}
-
 
+
#menu li {
-
ul.dropdown li:hover ul,
+
    float:left;
-
ul.dropdown ul li:hover ul,
+
    background:#fff;
-
ul.dropdown ul ul li:hover ul,
+
-
ul.dropdown ul ul ul li:hover ul,
+
-
ul.dropdown ul ul ul ul li:hover ul {
+
-
visibility: visible;
+
}
}
-
 
+
#menu li li {
-
ul.dropdown ul ul ul ul ul ul {
+
    float:none;
-
visibility: hidden !important;
+
    _border:1px solid #737373; /** fix for ie6 */
}
}
-
 
+
#menu div {
-
#sideBar ul {  
+
    visibility:hidden;
-
  list-style: none !important;
+
    position:absolute;
-
  margin-bottom: 100px;
+
    background:url(images/pix.gif);
}
}
-
 
+
#menu div div {
-
#intr {
+
     margin:-24px 0 0 -1px;
-
background-image: url('https://static.igem.org/mediawiki/2011/4/43/3menubar.png');
+
     left:100%;
-
background-repeat: no-repeat;
+
-
background-position: left;
+
-
}
+
-
 
+
-
#intr:hover {
+
-
     background-image: url('https://static.igem.org/mediawiki/2011/a/ae/4menubar.png');
+
-
    background-repeat: no-repeat;
+
-
     background-position: 0% 48%;
+
-
    }
+
-
#team {
+
-
background-image: url('https://static.igem.org/mediawiki/2011/4/43/3menubar.png');
+
-
background-repeat: no-repeat;
+
-
background-position: left;
+
-
}
+
-
 
+
-
#team:hover {
+
-
    background-image: url('https://static.igem.org/mediawiki/2011/a/ae/4menubar.png');
+
-
    background-repeat: no-repeat;
+
-
    background-position: 0% 45%;
+
-
    }
+
-
 
+
-
#proj {
+
-
background-image: url('https://static.igem.org/mediawiki/2011/4/43/3menubar.png');
+
-
background-repeat: no-repeat;
+
-
background-position:left;
+
-
 
+
}
}
 +
#menu li:hover>div { visibility:visible; }
-
#proj:hover {
+
/* menu::special styles */
-
    background-image: url('https://static.igem.org/mediawiki/2011/a/ae/4menubar.png');
+
/* menu::level 1 */
-
     background-repeat: no-repeat;
+
#menu a {
-
     background-position: 0% 1.5%;
+
     text-decoration:none;
-
     padding-bottom: 289px;  
+
    color:#fff;
 +
     position:relative;
 +
     z-index:77;
}
}
-
 
+
#menu a:hover {
-
#md {
+
    background:url(images/back.png);
-
background-image: url('https://static.igem.org/mediawiki/2011/4/43/3menubar.png');
+
    color:#ffa500;
-
background-repeat: no-repeat;
+
-
background-position: left;
+
}
}
-
 
+
#menu a:hover span { color:#ffa500; }
-
#md:hover {
+
#menu>ul>li:hover>a {
-
     background-image: url('https://static.igem.org/mediawiki/2011/a/ae/4menubar.png');
+
     background:url(images/back.png);
-
     background-repeat: no-repeat;
+
     color:#ffa500;
}
}
-
 
+
#menu>ul>li:hover>a span { color:#ffa500; }
-
#saf {
+
#menu span {
-
background-image: url('https://static.igem.org/mediawiki/2011/4/43/3menubar.png');
+
    text-transform:uppercase;
-
background-repeat: no-repeat;
+
    font:12px/18px 'Trebuchet MS', Arial, Helvetica, Sans-serif;
-
background-position: left;
+
    color:#fff;
}
}
-
 
+
#menu li { background:none; }
-
#saf:hover {
+
/* menu::level >= 2 */
-
    background-image: url('https://static.igem.org/mediawiki/2011/a/ae/4menubar.png');
+
#menu li li a {
-
     background-repeat: no-repeat;
+
    padding:0;
 +
     position:static;
}
}
-
 
+
#menu li li a:hover { background:#cf8700; }
-
#pres {
+
#menu li li a span { color:#fff; }
-
background-image: url('https://static.igem.org/mediawiki/2011/4/43/3menubar.png');
+
#menu li li a:hover span { color:#ffffff; }
-
background-repeat: no-repeat;
+
#menu li li a.parent span { background:url(images/pointer.gif) no-repeat right 9px; _background-position:right 10px; }
-
background-position: left;
+
*+html #menu li li a.parent span { background-position:right 10px; }
 +
#menu li li span {
 +
    display:block;
 +
    text-transform:none;
 +
    line-height:16px;
 +
    padding:4px 25px 4px 14px;
 +
    font-size:11px;
}
}
-
 
+
#menu li div { background:url(images/back.png); }
-
#pres:hover {
+
/** <fix for ie6> */
-
    background-image: url('https://static.igem.org/mediawiki/2011/a/ae/4menubar.png');
+
#menu div div {
-
     background-repeat: no-repeat;
+
     _margin-top:-25px;
 +
    _background:#393939;
}
}
 +
#menu li li li { _border:1px solid #393939; }
 +
#menu div div div { _background:#292929; }
 +
#menu li li li li { _border:1px solid #292929; }
 +
/** </fix for ie6> */
-
#att {
+
/* lava lamp */
-
background-image: url('https://static.igem.org/mediawiki/2011/4/43/3menubar.png');
+
div#menu li.back {
-
background-repeat: no-repeat;
+
    width:10px;
-
background-position: left;
+
    height:32px;
 +
    z-index:8;
 +
    position:absolute;
}
}
-
 
+
div#menu li.back .left {
-
#att:hover {
+
     width:auto;
-
    background-image: url('https://static.igem.org/mediawiki/2011/a/ae/4menubar.png');
+
     height:32px;
-
    background-repeat: no-repeat;
+
     float:none;
-
}
+
     position:relative;
-
 
+
     top:0;
-
 
+
     left:0;
-
#socmed {
+
     visibility:visible;
-
background-image: url('https://static.igem.org/mediawiki/2011/4/43/3menubar.png');
+
-
background-repeat: no-repeat;
+
-
background-position: left;
+
-
}
+
-
 
+
-
#socmed:hover {
+
-
     background-image: url('https://static.igem.org/mediawiki/2011/a/ae/4menubar.png');
+
-
     background-repeat: no-repeat;
+
-
}
+
-
 
+
-
#linkses {
+
-
background-image: url('https://static.igem.org/mediawiki/2011/4/43/3menubar.png');
+
-
background-repeat: no-repeat;
+
-
background-position: left;
+
-
}
+
-
 
+
-
#linkses:hover {
+
-
     background-image: url('https://static.igem.org/mediawiki/2011/a/ae/4menubar.png');
+
-
     background-position: 0% 3%;
+
-
     background-repeat: no-repeat;
+
-
     padding-bottom: 136px;
+
-
}
+
-
 
+
-
#prot {
+
-
  background-image: url('https://static.igem.org/mediawiki/2011/4/43/3menubar.png');
+
-
background-repeat: no-repeat;
+
-
background-position: left;
+
-
}
+
-
 
+
-
#prot:hover {
+
-
    background-image: url('https://static.igem.org/mediawiki/2011/a/ae/4menubar.png');
+
-
    background-position: 0% 3%;
+
-
    background-repeat: no-repeat;
+
-
     padding-bottom: 136px;
+
}
}
Line 299: Line 136:
<body>
<body>
-
<div id="sideBar">
 
-
 
-
<div id="Logo">
 
-
    </div>
 
-
 
-
<ul id="nav" class="dropdown dropdown-vertical" class="cfix">
 
-
<li id="intr" class="dir"><a href="https://2011.igem.org/Team:Wageningen_UR">Home</a>
 
-
<li id="team" class="dir"><a href="https://2011.igem.org/Team:Wageningen_UR/Team">Team</a>                 
 
-
</li>
 
-
 
-
<li id="proj" class="dir"><a href="https://2011.igem.org/Team:Wageningen_UR/Project/IntroductionProj1" style="text-decoration:none">Synchronized Oscillatory System</a>
 
-
<ul>
 
-
 
-
<li><a href="https://2011.igem.org/Team:Wageningen_UR/Project/CompleteProject1Description" style="text-decoration:none">Project Description</a></li>
 
-
<li><a href="https://2011.igem.org/Team:Wageningen_UR/Project/Devices" style="text-decoration:none">Devices</a></li>
 
-
 
-
<li><a href="https://2011.igem.org/Team:Wageningen_UR/Project/ModelingProj1" style="text-decoration:none">Modeling</a></li>
 
-
 
-
<li><a href="https://2011.igem.org/Team:Wageningen_UR/Project/NotebookProj1" style="text-decoration:none">Notebook</a></li>
 
-
 
-
<li><a href="https://2011.igem.org/Team:Wageningen_UR/Project/PartsProj1" style="text-decoration:none">Parts Submitted to the Registry</a></li>
 
-
</ul>
 
-
</li>
 
-
 
-
<li id="proj" class="dir"><a href="https://2011.igem.org/Team:Wageningen_UR/Project/IntroductionProj2">Fungal Track 'n Trace</a>
 
-
<ul>
 
-
 
-
<li><a href="https://2011.igem.org/Team:Wageningen_UR/Project/CompleteProject2Description" style="text-decoration:none">Project Description</a></li>
 
-
 
-
<li><a href="https://2011.igem.org/Team:Wageningen_UR/Project/ModelingProj2" style="text-decoration:none">Modeling</a></li>
 
-
 
-
<li><a href="https://2011.igem.org/Team:Wageningen_UR/Project/NotebookProj2" style="text-decoration:none">Notebook</a></li>
 
-
 
-
<li><a href="https://2011.igem.org/Team:Wageningen_UR/Project/PartsProj2" style="text-decoration:none">Parts Submitted to the Registry</a></li>
 
-
</ul>
 
-
</li>
 
-
 
-
 
-
 
-
<li id="md" class="dir"><a href="https://2011.igem.org/Team:Wageningen_UR/Softwaretool" style="text-decoration:none">Software Tool</a></li>
 
-
 
-
<li id="saf" class="dir"><a href="https://2011.igem.org/Team:Wageningen_UR/Safety">Safety</a></li>
 
-
 
-
        <li id="pres" class="dir"><a href="https://2011.igem.org/Team:Wageningen_UR/ownpresentations">Presentations</a></li>
 
-
 
-
<li id="att" class="dir"><a href="https://2011.igem.org/Team:Wageningen_UR/Attributions">Attributions</a>
 
-
        </li>
 
-
 
-
        <li id="socmed" class="dir"><a href="https://2011.igem.org/Team:Wageningen_UR/SocialMedia">Social Media</a>
 
-
        </li>
 
-
 
-
        <li id="linkses" class="dir"><a href="https://2011.igem.org/Team:Wageningen_UR/Links">Links</a>
 
-
<ul>
 
-
<li  id="spons"><a href="https://igem.org/Main_Page">iGEM</a>
 
-
 
-
                      <li  id="spons"><a href="http://www.wageningenuniversity.nl/NL/?gclid=CIifsvf0m6gCFcos3goduHf9HA">WUR</a>
 
-
<li id="spons"><a href="http://www.mlab.nl/">Microscopy ML@b Wageningen UR</a>
+
  <div id="menu">
-
+
      <ul class="menu">
-
        </ul>
+
          <li><a href="https://2011.igem.org/Team:Wageningen_UR" class="parent"><span>Home</span></a>
-
        </li>
+
  <li><a href="https://2011.igem.org/Team:Wageningen_UR/Team" class="parent"><span>Team</span></a>
-
        <li id="prot" class="dir"><a href="https://2011.igem.org/Team:Wageningen_UR/Protocols">Protocols</a>
+
  <li><a href="https://2011.igem.org/Team:Wageningen_UR/Project/IntroductionProj1" class="parent"><span>Synchronized Oscillatory System</span></a>
-
        </li>    
+
              <div><ul>
 +
                  <li><a href="#" class="parent"><span>level 2</span></a>
 +
                      <div><ul><li><a href="#"><span>level 3</span></a></li></ul></div>
 +
                  </li>
 +
              </ul></div>
 +
          </li>
 +
          <li class="last"><a href="#"><span>level 1</span></a></li>
 +
      </ul>
 +
  </div>
-
</ul>
+
-
</div>
+
   </body>
   </body>
   </html>
   </html>

Revision as of 20:18, 22 May 2011

Retrieved from "http://2011.igem.org/Team:Wageningen_UR/Templates/NavigationLeft"