Template:UCSF/Jixedbar2

From 2010.igem.org

(Difference between revisions)
 
(12 intermediate revisions not shown)
Line 1: Line 1:
-
<html>
+
<html xmlns="http://www.w3.org/1999/xhtml">
 +
<head>
 +
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 +
<title>Select Menu Using DIV</title>
 +
<style>
 +
body{font-family:Arial, Helvetica, sans-serif;}
 +
ul, li{margin:0; border:0; padding:0; list-style:none;}
 +
#middlebar{
 +
position:absolute;
 +
top:0px;
 +
width:auto;
-
<body>
+
right:0px;
-
<!-- jixedbar starts here -->
+
font-size:11px;
-
<style>
+
color:#3b5d14;
-
#footer-box{
+
background:#90b557;
-
height:70px;
+
font-weight:bold;
 +
padding:4px;
 +
        border: solid 3px black;
 +
height:30px;
}
}
-
/*----- bar style -----*/
+
#middlebar .menu li {
-
.jx-bar {
+
background:url(lm.png) left top no-repeat;
-
        position:absolute;
+
height:30px;
-
        right:0px;
+
-
        bottom:0px;
+
-
z-index:100;
+
-
height:33px;
+
-
padding:0px;
+
-
width:100%;
+
-
background-color:white;
+
-
border:#b5b5b5 solid 1px;
+
-
}
+
-
 
+
-
/* rounded top-left corner */
+
-
.jx-bar-rounded-tl {
+
-
z-index:100;
+
-
-webkit-border-top-left-radius:5px;
+
-
-khtml-border-radius-topleft:5px;
+
-
-moz-border-radius-topleft:5px;
+
-
border-top-left-radius:5px;
+
-
}
+
-
 
+
-
/* rounded bottom-left corner */
+
-
.jx-bar-rounded-bl {
+
-
z-index:100;
+
-
-webkit-border-bottom-left-radius:5px;
+
-
-khtml-border-radius-bottomleft:5px;
+
-
-moz-border-radius-bottomleft:5px;
+
-
border-bottom-left-radius:5px;
+
-
}
+
-
 
+
-
/* rounded top-right corner */
+
-
.jx-bar-rounded-tr {
+
-
z-index:100;
+
-
-webkit-border-top-right-radius:5px;
+
-
-khtml-border-radius-topright:5px;
+
-
-moz-border-radius-topright:5px;
+
-
border-top-right-radius:5x;
+
-
}
+
-
 
+
-
/* rounded bottom-right corner */
+
-
.jx-bar-rounded-br {
+
-
z-index:100;
+
-
-webkit-border-bottom-right-radius:5px;
+
-
-khtml-border-radius-bottomright:5px;
+
-
-moz-border-radius-bottomright:5px;
+
-
border-bottom-right-radius:5x;
+
-
}
+
-
 
+
-
/*----- bar separator -----*/
+
-
.jx-bar span {
+
-
z-index:100;
+
-
width:1px;
+
-
height:100%;
+
-
background-color:#ccc;
+
-
}
+
-
 
+
-
.jx-separator-left {
+
-
z-index:100;
+
float:left;
float:left;
 +
margin-right:10px;
}
}
-
+
#middlebar .menu li a{
-
.jx-separator-right {
+
color:#3b5d14;
-
z-index:100;
+
-
float:right;
+
-
}
+
-
 
+
-
/*----- bar button -----*/
+
-
.jx-bar-button ul {
+
-
z-index:100;
+
-
margin:0px;
+
-
padding:0px;
+
-
}
+
-
 
+
-
.jx-bar-button li {
+
-
z-index:100;
+
-
float:left;
+
-
list-style:none;
+
-
}
+
-
 
+
-
.jx-bar-button-right li {
+
-
z-index:100;
+
-
float:right;
+
-
list-style:none;
+
-
}
+
-
 
+
-
.jx-bar-button li {
+
-
z-index:100;
+
-
font-family:Verdana, Arial, Helvetica, sans-serif;
+
-
font-size:13px;
+
-
cursor:pointer;
+
-
padding:4px 8px 4px 8px;
+
-
border:white solid 1px;
+
-
margin:2px;
+
-
}
+
-
+
-
/* button hover effect */
+
-
.jx-bar-button li:hover {
+
-
z-index:100;
+
-
background-color:#E4FEE0;
+
-
border:white solid 1px;
+
-
padding:4px 8px 4px 8px;
+
-
margin:2px;
+
-
}
+
-
 
+
-
/* rounded button corners */
+
-
.jx-bar-button-rounded li:hover {
+
-
z-index:100;
+
-
-webkit-border-radius:3px;
+
-
-khtml-border-radius:3px;
+
-
-moz-border-radius:3px;
+
-
border-radius:3px;
+
-
}
+
-
+
-
/* default button's anchor text style */
+
-
.jx-bar-button li a:link, .jx-bar-button li a:visited {
+
-
z-index:100;
+
-
font-family:Verdana, Arial, Helvetica, sans-serif;
+
-
font-size:13px;
+
-
colProxy-Connection: keep-alive
+
-
Cache-Control: max-age=0
+
-
 
+
-
:#ProxProxy-Connection: keep-alive
+
-
Cache-Control: max-age=0
+
-
 
+
-
Connection: keep-alive
+
-
Cache-Control: max-age=0
+
-
 
+
-
6;
+
text-decoration:none;
text-decoration:none;
-
padding:1px;
+
padding:0 10px;
 +
height:30px;
 +
line-height:30px;
 +
display:block;
 +
float:left;
 +
padding:0 26px 0 10px;
 +
background:url(rm.png) right top no-repeat;
}
}
-
 
+
#middlebar .menu li a:hover{
-
.jx-bar-button li a:hover {
+
color:#666666;
-
z-index:100;
+
-
font-family:Verdana, Arial, Helvetica, sans-serif;
+
-
font-size:13px;
+
-
color:#333;
+
-
text-decoration:none;
+
}
}
-
 
+
#middlebar ul .submenu {
-
/*----- bar text container and button arrow indicator -----*/
+
border:solid 1px #c9dea1;
-
.jx-bar div, .jx-bar iframe {
+
border-top:none;
-
float:left;
+
background:#FFFFFF;
 +
position: relative;
 +
top: 4px;
 +
width:150px;
 +
padding:6px 0;
 +
clear:both;
 +
z-index:2;
 +
display:none;
}
}
-
 
+
#middlebar ul .submenu li{
-
.jx-bar div {
+
background:none;
-
font-family:Verdana, Arial, Helvetica, sans-serif;
+
display:block;
-
font-size:13px;
+
float:none;
-
color:#666;
+
margin:0 6px;
-
padding:4px 8px 4px 8px;
+
border:0;
-
margin:4px 0px 4px 0px;
+
height:auto;
-
}
+
line-height:normal;
-
 
+
border-top:solid 1px #DEDEDE;
-
.jx-bar iframe {
+
-
margin:4px 0px 4px 10px;
+
-
}
+
-
 
+
-
.jx-bar div a:link, .jx-bar div a:visited {
+
-
color:#666;
+
-
text-decoration:none;
+
}
}
-
 
+
#middlebar .submenu li a{
-
.jx-bar div a:hover {
+
background:none;
-
color:#0099FF;
+
display:block;
-
text-decoration:none;
+
float:none;
 +
padding:6px 6px;
 +
margin:0;
 +
border:0;
 +
height:auto;
 +
color:#105cbe;
 +
line-height:normal;
}
}
-
 
+
#middlebar .submenu li a:hover{
-
/*----- button tooltip -----*/
+
background:#e3edef;
-
.jx-bar-button-tooltip {
+
-
z-index:100;
+
-
height:auto;
+
-
padding:5px 10px 5px 10px;
+
-
color:#fff;
+
-
background-color:#36393D;
+
-
font-family:Verdana, Arial, Helvetica, sans-serif;
+
-
font-size:11px;
+
-
}
+
-
 
+
-
/* rounded tooltip */
+
-
.jx-bar-button-tooltip {
+
-
z-index:100;
+
-
-moz-border-radius: 3px;
+
-
-webkit-border-radius:3px;
+
}
}
-
 
-
/*----- nav menu -----*/
 
-
.jx-nav-menu {
 
-
z-index:100;
 
-
font-family:Verdana, Arial, Helvetica, sans-serif;
 
-
font-size:13px;
 
-
padding:2px;
 
-
background-color:#AFFBA2;
 
-
border:#AFFBA2 solid 1px;
 
-
}
 
-
 
-
.jx-nav-menu-rounded {
 
-
z-index:100;
 
-
-webkit-border-radius:3px;
 
-
-khtml-border-radius:3px;
 
-
-moz-border-radius:3px;
 
-
border-radius:3px;
 
-
}
 
-
 
-
.jx-nav-menu ul {
 
-
z-index:100;
 
-
margin:0;
 
-
padding:0;
 
-
list-style:none;
 
-
width:auto; /* width of menu items */
 
-
}
 
-
 
-
.jx-nav-menu a:hover {
 
-
z-index:100;
 
-
background-color:#9F9FFF;
 
-
color:#fff;
 
-
text-decoration:none;
 
-
}
 
-
 
-
/* styles for menu items */
 
-
.jx-nav-menu ul li a {
 
-
z-index:100;
 
-
display:block;
 
-
text-decoration:none;
 
-
color:#777;
 
-
background:#fff; /* IE6 Bug */
 
-
padding:8px;
 
-
border:1px solid #eee; /* IE6 Bug */
 
-
border-bottom:0px;
 
-
}
 
-
 
-
/* active menu button */
 
-
.jx-nav-menu-active {
 
-
z-index:100;
 
-
font-family:Verdana, Arial, Helvetica, sans-serif;
 
-
font-size:13px;
 
-
cursor:pointer;
 
-
background-color:#E4FEE0;
 
-
padding:4px 8px 4px 8px;
 
-
margin:2px;
 
-
}
 
-
 
-
/* active menu button (rounded) */
 
-
.jx-nav-menu-active-rounded {
 
-
z-index:100;
 
-
-webkit-border-radius:3px;
 
-
-khtml-border-radius:3px;
 
-
-moz-border-radius:3px;
 
-
border-radius:3px;
 
-
}
 
-
 
-
/* menu indicator UP state */
 
-
.jx-arrow-up {
 
-
z-index:100;
 
-
background-image:url('https://static.igem.org/mediawiki/2010/3/35/Jixedbar_Up.gif');
 
-
background-repeat:no-repeat;
 
-
background-position:center;
 
-
}
 
-
 
-
/* menu indicator DOWN state */
 
-
.jx-arrow-down {
 
-
z-index:100;
 
-
background-image:url('https://static.igem.org/mediawiki/2010/d/d1/Jixedbar_Dn.gif');
 
-
background-repeat:no-repeat;
 
-
background-position:center;
 
-
}
 
-
 
-
/* tooltip point direction */
 
-
.jx-tool-point-dir-down {
 
-
z-index:100;
 
-
background-image:url('https://static.igem.org/mediawiki/2010/5/5c/Jixedbar_Ttd.gif');
 
-
background-repeat:no-repeat;
 
-
background-position:center bottom;
 
-
height:5px;
 
-
width:auto;
 
-
}
 
-
 
-
.jx-tool-point-dir-up {
 
-
z-index:100;
 
-
background-image:url('https://static.igem.org/mediawiki/2010/8/86/Jixedbar_Ttu.gif');
 
-
background-repeat:no-repeat;
 
-
background-position:center bottom;
 
-
height:5px;
 
-
width:auto;
 
-
}
 
-
 
-
/* hide and show/unhide item */
 
-
.jx-hide {
 
-
z-index:100;
 
-
float:right;
 
-
background-image:url('https://static.igem.org/mediawiki/2010/b/ba/Jixedbar_Hide.gif');
 
-
background-repeat:no-repeat;
 
-
height:16px;
 
-
width:16px;
 
-
}
 
-
 
-
/* if showOnTop is TRUE, use "https://static.igem.org/mediawiki/2010/4/47/Jixedbar_Show.gif" instead of "" */
 
-
.jx-hide-top {
 
-
z-index:100;
 
-
float:right;
 
-
background-image:url('https://static.igem.org/mediawiki/2010/4/47/Jixedbar_Show.gif');
 
-
background-repeat:no-repeat;
 
-
height:16px;
 
-
width:16px;
 
-
}
 
-
 
-
.jx-show {
 
-
z-index:100;
 
-
height:30px;
 
-
padding:0px;
 
-
width:40px;
 
-
background-color:white;
 
-
border:#b5b5b5 solid 1px;
 
-
}
 
-
 
-
.jx-show-button {
 
-
z-index:100;
 
-
float:right;
 
-
background-image:url('https://static.igem.org/mediawiki/2010/4/47/Jixedbar_Show.gif');
 
-
background-repeat:no-repeat;
 
-
height:16px;
 
-
width:16px;
 
-
}
 
-
 
-
/* if showOnTop is TRUE, use "hide.gif" instead of "show.gif" */
 
-
.jx-show-button-top {
 
-
z-index:100;
 
-
float:right;
 
-
background-image:url('https://static.igem.org/mediawiki/2010/b/ba/Jixedbar_Hide.gif');
 
-
background-repeat:no-repeat;
 
-
height:16px;
 
-
width:16px;
 
-
}
 
-
 
-
.jx-hide-separator {
 
-
z-index:100;
 
-
width:1px;
 
-
height:100%;
 
-
background-color:#ccc;
 
-
float:right;
 
-
}
 
</style>
</style>
-
<script type="text/javascript" src="http://jixedbar.rawswift.com/js/jixedbar/jquery-1.4.2.min.js"></script>
 
-
<script type="text/javascript" src="http://jixedbar.rawswift.com/js/jixedbar/src/jquery.jixedbar.min.js"></script>
 
<script>
<script>
-
function writeHref(){
+
function showlayer(layer){
-
var PageURL = document.URL;
+
var myLayer=document.getElementById(layer);
-
var RightURL = PageURL.substr(21);
+
if(myLayer.style.display=="none" || myLayer.style.display==""){
-
var EditIt="https://2010.igem.org/wiki/index.php?title="+RightURL+"&amp;action=edit";
+
myLayer.style.display="block";
-
document.write("<li><a href="+EditIt+"><img src=https://static.igem.org/mediawiki/2010/e/e7/Ucsf_edit.png alt=Edit /></a></li>");
+
} else {
-
return EditIt;
+
myLayer.style.display="none";
 +
}
}
}
</script>
</script>
 +
<script type="text/javascript" src="http://demo.marcofolio.net/create_a_sticky_sidebar_or_box/mootools.js"></script>
<script>
<script>
-
var JixedBar = document.createElement('div');
+
window.onscroll = function()
-
JixedBar.id = 'BAR';
+
  {
 +
if( window.XMLHttpRequest ) {
 +
$('middlebar').style.position = 'fixed';
 +
$('middlebar').style.top = '0';
 +
  }
 +
}
 +
</script>
 +
</head>
-
var UCSFiGEM = document.createElement('div');
+
<body>
-
var Home = document.createElement('ul');
+
<!--
-
var Project = document.createElement('ul');
+
FOR OTHER TUTORIALS VISIT
-
var Team = document.createElement('ul');
+
http://woork.blogspot.com
-
var Parts = document.createElement('ul');
+
-->
-
var NoteBook = document.createElement('ul');
+
-
var Safety = document.createElement('ul');
+
-
UCSFiGEM.innerHTML='<img src="https://static.igem.org/mediawiki/2010/e/eb/UCSF_2010_iGEM.png">';
 
-
Home.innerHTML = '<li title="Home"><a href="https://2010.igem.org/Team:UCSF"><img src="https://static.igem.org/mediawiki/2010/2/20/UCSF_2010_HomeIcon.png" alt="Home" /></a></li>';
+
   
 +
 +
<div id="middlebar" class="sidebox">
 +
  <ul class="menu">
 +
      <li><a href="#" onclick="javascript:showlayer('sm_1')">Profile</a></li>
 +
    <ul class="submenu" id="sm_1">
 +
        <li><a href="asd">Profile</a></li>
 +
          <li><a href="asd">Inbox </a></li>
 +
          <li><a href="asd">Log-out</a></li>
 +
    </ul>
 +
  </ul>
 +
</div>
-
Project.innerHTML = '<li title="Project"><a href="#"><img src="https://static.igem.org/mediawiki/2010/a/aa/UCSF_2010_Project.png" alt="Project" /></a><ul><li><a href="http://www.facebook.com/ryanyonzon"><img src="icons/facebook.png" title="Facebook" />&nbsp;&nbsp;&nbsp;Facebook</a></li><li><a href="https://twitter.com/rawswift"><img src="icons/twitter.png" title="Twitter" />&nbsp;&nbsp;&nbsp;Twitter</a></li><li><a href="http://www.flickr.com/photos/ryanyonzon/"><img src="icons/pictures.png" title="Flickr" />&nbsp;&nbsp;&nbsp;Flickr</a></li><li><a href="http://ph.linkedin.com/in/ryanyonzon"><img src="icons/card.png" title="Linkedin" />&nbsp;&nbsp;&nbsp;Linkedin</a></li></ul></li>';Team.innerHTML = '';
+
<div style="float:none; clear:both;"></div>
 +
    <h1>This is the demo for the "Create Vimeo-like top navigation" tutorial</h1>
 +
    <h1>This is the demo for the "Create Vimeo-like top navigation" tutorial</h1>
 +
    <h1>This is the demo for the "Create Vimeo-like top navigation" tutorial</h1>
 +
    <h1>This is the demo for the "Create Vimeo-like top navigation" tutorial</h1>
 +
   
 +
    <h1>This is the demo for the "Create Vimeo-like top navigation" tutorial</h1>
 +
    <h1>This is the demo for the "Create Vimeo-like top navigation" tutorial</h1>
 +
    <h1>This is the demo for the "Create Vimeo-like top navigation" tutorial</h1>
 +
    <h1>This is the demo for the "Create Vimeo-like top navigation" tutorial</h1>
 +
    <h1>This is the demo for the "Create Vimeo-like top navigation" tutorial</h1>
 +
    <h1>This is the demo for the "Create Vimeo-like top navigation" tutorial</h1>
 +
    <h1>This is the demo for the "Create Vimeo-like top navigation" tutorial</h1>
 +
    <h1>This is the demo for the "Create Vimeo-like top navigation" tutorial</h1>
 +
    <h1>This is the demo for the "Create Vimeo-like top navigation" tutorial</h1>
 +
    <h1>This is the demo for the "Create Vimeo-like top navigation" tutorial</h1>
 +
   
 +
    <h1>This is the demo for the "Create Vimeo-like top navigation" tutorial</h1>
 +
    <h1>This is the demo for the "Create Vimeo-like top navigation" tutorial</h1>
 +
    <h1>This is the demo for the "Create Vimeo-like top navigation" tutorial</h1>
 +
    <h1>This is the demo for the "Create Vimeo-like top navigation" tutorial</h1>
 +
    <h1>This is the demo for the "Create Vimeo-like top navigation" tutorial</h1>
 +
    <h1>This is the demo for the "Create Vimeo-like top navigation" tutorial</h1>
 +
    <h1>This is the demo for the "Create Vimeo-like top navigation" tutorial</h1>
 +
    <h1>This is the demo for the "Create Vimeo-like top navigation" tutorial</h1>
 +
    <h1>This is the demo for the "Create Vimeo-like top navigation" tutorial</h1>
 +
    <h1>This is the demo for the "Create Vimeo-like top navigation" tutorial</h1>
 +
    <h1>This is the demo for the "Create Vimeo-like top navigation" tutorial</h1>
 +
    <h1>This is the demo for the "Create Vimeo-like top navigation" tutorial</h1>
 +
    <h1>This is the demo for the "Create Vimeo-like top navigation" tutorial</h1>
 +
    <h1>This is the demo for the "Create Vimeo-like top navigation" tutorial</h1>
 +
    <h1>This is the demo for the "Create Vimeo-like top navigation" tutorial</h1>
 +
    <h1>This is the demo for the "Create Vimeo-like top navigation" tutorial</h1>
 +
    <h1>This is the demo for the "Create Vimeo-like top navigation" tutorial</h1>
 +
    <h1>This is the demo for the "Create Vimeo-like top navigation" tutorial</h1>
 +
    <h1>This is the demo for the "Create Vimeo-like top navigation" tutorial</h1>
 +
    <h1>This is the demo for the "Create Vimeo-like top navigation" tutorial</h1>
 +
    <h1>This is the demo for the "Create Vimeo-like top navigation" tutorial</h1>
 +
    <h1>This is the demo for the "Create Vimeo-like top navigation" tutorial</h1>
 +
    <h1>This is the demo for the "Create Vimeo-like top navigation" tutorial</h1>
 +
    <h1>This is the demo for the "Create Vimeo-like top navigation" tutorial</h1>
 +
    <h1>This is the demo for the "Create Vimeo-like top navigation" tutorial</h1>
 +
    <h1>This is the demo for the "Create Vimeo-like top navigation" tutorial</h1>
 +
    <h1>This is the demo for the "Create Vimeo-like top navigation" tutorial</h1>
 +
    <h1>This is the demo for the "Create Vimeo-like top navigation" tutorial</h1>
 +
    <h1>This is the demo for the "Create Vimeo-like top navigation" tutorial</h1>
 +
    <h1>This is the demo for the "Create Vimeo-like top navigation" tutorial</h1>
 +
    <h1>This is the demo for the "Create Vimeo-like top navigation" tutorial</h1>
 +
    <h1>This is the demo for the "Create Vimeo-like top navigation" tutorial</h1>
 +
    <h1>This is the demo for the "Create Vimeo-like top navigation" tutorial</h1>
 +
    <h1>This is the demo for the "Create Vimeo-like top navigation" tutorial</h1>
 +
    <h1>This is the demo for the "Create Vimeo-like top navigation" tutorial</h1>
 +
    <h1>This is the demo for the "Create Vimeo-like top navigation" tutorial</h1>
 +
    <h1>This is the demo for the "Create Vimeo-like top navigation" tutorial</h1>
 +
    <h1>This is the demo for the "Create Vimeo-like top navigation" tutorial</h1>
 +
    <h1>This is the demo for the "Create Vimeo-like top navigation" tutorial</h1>
 +
    <h1>This is the demo for the "Create Vimeo-like top navigation" tutorial</h1>
 +
    <h1>This is the demo for the "Create Vimeo-like top navigation" tutorial</h1>
 +
    <h1>This is the demo for the "Create Vimeo-like top navigation" tutorial</h1>
 +
    <h1>This is the demo for the "Create Vimeo-like top navigation" tutorial</h1>
 +
    <h1>This is the demo for the "Create Vimeo-like top navigation" tutorial</h1>
 +
    <h1>This is the demo for the "Create Vimeo-like top navigation" tutorial</h1>
 +
    <h1>This is the demo for the "Create Vimeo-like top navigation" tutorial</h1>
 +
    <h1>This is the demo for the "Create Vimeo-like top navigation" tutorial</h1>
 +
    <h1>This is the demo for the "Create Vimeo-like top navigation" tutorial</h1>
 +
    <h1>This is the demo for the "Create Vimeo-like top navigation" tutorial</h1>
 +
    <h1>This is the demo for the "Create Vimeo-like top navigation" tutorial</h1>
 +
    <h1>This is the demo for the "Create Vimeo-like top navigation" tutorial</h1>
 +
    <h1>This is the demo for the "Create Vimeo-like top navigation" tutorial</h1>
 +
    <h1>This is the demo for the "Create Vimeo-like top navigation" tutorial</h1>
 +
    <h1>This is the demo for the "Create Vimeo-like top navigation" tutorial</h1>
 +
    <h1>This is the demo for the "Create Vimeo-like top navigation" tutorial</h1>
 +
    <h1>This is the demo for the "Create Vimeo-like top navigation" tutorial</h1>
 +
    <p>You can go back to the original article here.</p>
-
Team.innerHTML = '<li title="Team"><a href="#"><img src="https://static.igem.org/mediawiki/2010/1/18/UCSF_2010_People.png" alt="Team" /></a><ul><li><a href="http://www.facebook.com/ryanyonzon"><img src="icons/facebook.png" title="Facebook" />&nbsp;&nbsp;&nbsp;Facebook</a></li><li><a href="https://twitter.com/rawswift"><img src="icons/twitter.png" title="Twitter" />&nbsp;&nbsp;&nbsp;Twitter</a></li><li><a href="http://www.flickr.com/photos/ryanyonzon/"><img src="icons/pictures.png" title="Flickr" />&nbsp;&nbsp;&nbsp;Flickr</a></li><li><a href="http://ph.linkedin.com/in/ryanyonzon"><img src="icons/card.png" title="Linkedin" />&nbsp;&nbsp;&nbsp;Linkedin</a></li></ul></li>';
 
-
Parts.innerHTML = '<li title="Parts"><a href="https://2010.igem.org/Team:UCSF/Parts"><img src="https://static.igem.org/mediawiki/2010/c/c5/UCSF_2010_Parts.png" alt="Parts" /></a></li>';
+
</body>
-
 
+
<script>
-
NoteBook.innerHTML = '<li title="NoteBook"><a href="#"><img src="https://static.igem.org/mediawiki/2010/5/51/UCSF_2010_NoteBook.png" alt="NoteBook" /></a><ul><li><a href="https://2010.igem.org/Team:UCSF/Notebook/RLiang"><img src="icons/facebook.png" title="RyanLiang" />&nbsp;&nbsp;&nbsp;Ryan Liang</a></li><li><a href="https://2010.igem.org/Team:UCSF/Notebook/JElam"><img src="icons/facebook.png" title="RyanLiang" />&nbsp;&nbsp;&nbsp;John Elam</a></li><li><a href="https://2010.igem.org/Team:UCSF/Notebook/CLiu"><img src="icons/facebook.png" title="RyanLiang" />&nbsp;&nbsp;&nbsp;Crystal Liu</a></li><li><a href="https://2010.igem.org/Team:UCSF/Notebook/SZorn"><img src="icons/facebook.png" title="RyanLiang" />&nbsp;&nbsp;&nbsp;Sam Zorn</a></li><li><a href="https://2010.igem.org/Team:UCSF/Notebook/CZhou"><img src="icons/facebook.png" title="RyanLiang" />&nbsp;&nbsp;&nbsp;Carmen Zhou</a></li></ul></li>';
+
var con = document.getElementById('content');
-
 
+
var bodycon = document.getElementById('bodyContent');
-
Safety.innerHTML = '<li title="Safety"><a href="https://2010.igem.org/Team:UCSF/Safety"><img src="https://static.igem.org/mediawiki/2010/d/d9/UCSF_2010_Safety.png" alt="Safety" /></a></li>';
+
var glo = document.getElementById('globalWrapper');
-
 
+
document.body.removeChild(glo);
-
var RightButtons = document.createElement('ul');
+
document.body.appendChild(bodycon);
-
RightButtons.className="jx-bar-button-right";
+
-
RightButtons.innerHTML = '<li title="Links"><a href="#"><img src="https://static.igem.org/mediawiki/2010/6/6e/UCSF_2010_Links.png" alt="Links" /></a><ul><li><a href="http://ryan.rawswift.com/feed/"><img src="icons/feed-doc.png" title="Content Feed" />&nbsp;&nbsp;&nbsp;Content Feed</a></li><li><a href="http://ryan.rawswift.com/comments/feed/"><img src="icons/ballon.png" title="Comment Feed" />&nbsp;&nbsp;&nbsp;Comment Feed</a></li></ul></li>'+'<li><a href='+writeHref()+'><img src=https://static.igem.org/mediawiki/2010/e/e7/Ucsf_edit.png alt=Edit /></a></li>';
+
-
 
+
-
 
+
-
 
+
-
JixedBar.appendChild(UCSFiGEM);
+
-
JixedBar.appendChild(Home);
+
-
JixedBar.appendChild(Project);
+
-
JixedBar.appendChild(Team);
+
-
JixedBar.appendChild(Parts);
+
-
JixedBar.appendChild(NoteBook);
+
-
JixedBar.appendChild(Safety);
+
-
JixedBar.appendChild(RightButtons);
+
-
document.body.appendChild(JixedBar);
+
-
$("#BAR").jixedbar({showOnTop: true,opacity:0.93,transparent:true});
+
</script>
</script>
-
<!-- jixedbar ends here -->
 
-
</body>
 
-
 
-
 
</html>
</html>

Latest revision as of 07:55, 9 September 2010

Select Menu Using DIV

This is the demo for the "Create Vimeo-like top navigation" tutorial

This is the demo for the "Create Vimeo-like top navigation" tutorial

This is the demo for the "Create Vimeo-like top navigation" tutorial

This is the demo for the "Create Vimeo-like top navigation" tutorial

This is the demo for the "Create Vimeo-like top navigation" tutorial

This is the demo for the "Create Vimeo-like top navigation" tutorial

This is the demo for the "Create Vimeo-like top navigation" tutorial

This is the demo for the "Create Vimeo-like top navigation" tutorial

This is the demo for the "Create Vimeo-like top navigation" tutorial

This is the demo for the "Create Vimeo-like top navigation" tutorial

This is the demo for the "Create Vimeo-like top navigation" tutorial

This is the demo for the "Create Vimeo-like top navigation" tutorial

This is the demo for the "Create Vimeo-like top navigation" tutorial

This is the demo for the "Create Vimeo-like top navigation" tutorial

This is the demo for the "Create Vimeo-like top navigation" tutorial

This is the demo for the "Create Vimeo-like top navigation" tutorial

This is the demo for the "Create Vimeo-like top navigation" tutorial

This is the demo for the "Create Vimeo-like top navigation" tutorial

This is the demo for the "Create Vimeo-like top navigation" tutorial

This is the demo for the "Create Vimeo-like top navigation" tutorial

This is the demo for the "Create Vimeo-like top navigation" tutorial

This is the demo for the "Create Vimeo-like top navigation" tutorial

This is the demo for the "Create Vimeo-like top navigation" tutorial

This is the demo for the "Create Vimeo-like top navigation" tutorial

This is the demo for the "Create Vimeo-like top navigation" tutorial

This is the demo for the "Create Vimeo-like top navigation" tutorial

This is the demo for the "Create Vimeo-like top navigation" tutorial

This is the demo for the "Create Vimeo-like top navigation" tutorial

This is the demo for the "Create Vimeo-like top navigation" tutorial

This is the demo for the "Create Vimeo-like top navigation" tutorial

This is the demo for the "Create Vimeo-like top navigation" tutorial

This is the demo for the "Create Vimeo-like top navigation" tutorial

This is the demo for the "Create Vimeo-like top navigation" tutorial

This is the demo for the "Create Vimeo-like top navigation" tutorial

This is the demo for the "Create Vimeo-like top navigation" tutorial

This is the demo for the "Create Vimeo-like top navigation" tutorial

This is the demo for the "Create Vimeo-like top navigation" tutorial

This is the demo for the "Create Vimeo-like top navigation" tutorial

This is the demo for the "Create Vimeo-like top navigation" tutorial

This is the demo for the "Create Vimeo-like top navigation" tutorial

This is the demo for the "Create Vimeo-like top navigation" tutorial

This is the demo for the "Create Vimeo-like top navigation" tutorial

This is the demo for the "Create Vimeo-like top navigation" tutorial

This is the demo for the "Create Vimeo-like top navigation" tutorial

This is the demo for the "Create Vimeo-like top navigation" tutorial

This is the demo for the "Create Vimeo-like top navigation" tutorial

This is the demo for the "Create Vimeo-like top navigation" tutorial

This is the demo for the "Create Vimeo-like top navigation" tutorial

This is the demo for the "Create Vimeo-like top navigation" tutorial

This is the demo for the "Create Vimeo-like top navigation" tutorial

This is the demo for the "Create Vimeo-like top navigation" tutorial

This is the demo for the "Create Vimeo-like top navigation" tutorial

This is the demo for the "Create Vimeo-like top navigation" tutorial

This is the demo for the "Create Vimeo-like top navigation" tutorial

This is the demo for the "Create Vimeo-like top navigation" tutorial

This is the demo for the "Create Vimeo-like top navigation" tutorial

This is the demo for the "Create Vimeo-like top navigation" tutorial

This is the demo for the "Create Vimeo-like top navigation" tutorial

This is the demo for the "Create Vimeo-like top navigation" tutorial

This is the demo for the "Create Vimeo-like top navigation" tutorial

This is the demo for the "Create Vimeo-like top navigation" tutorial

This is the demo for the "Create Vimeo-like top navigation" tutorial

This is the demo for the "Create Vimeo-like top navigation" tutorial

This is the demo for the "Create Vimeo-like top navigation" tutorial

This is the demo for the "Create Vimeo-like top navigation" tutorial

This is the demo for the "Create Vimeo-like top navigation" tutorial

This is the demo for the "Create Vimeo-like top navigation" tutorial

This is the demo for the "Create Vimeo-like top navigation" tutorial

This is the demo for the "Create Vimeo-like top navigation" tutorial

This is the demo for the "Create Vimeo-like top navigation" tutorial

You can go back to the original article here.

Retrieved from "http://2010.igem.org/Template:UCSF/Jixedbar2"