|
|
Line 126: |
Line 126: |
| ==='''fasdfasfasdf'''=== | | ==='''fasdfasfasdf'''=== |
| ==='''fasdfasfasdf'''=== | | ==='''fasdfasfasdf'''=== |
- | <html>
| + | {{Template:UCSF/Jixedbar}} |
- | <style>
| + | |
- | #content{
| + | |
- | z-index:0;
| + | |
- | }
| + | |
- | </style>
| + | |
- | | + | |
- | <!-- jixedbar starts here -->
| + | |
- | <style>
| + | |
- | /**
| + | |
- | * Default theme for jixedbar
| + | |
- | * written by Ryan Yonzon, http://ryan.rawswift.com/
| + | |
- | * Last update: August 13, 2010
| + | |
- | */
| + | |
- |
| + | |
- | /*----- bar style -----*/
| + | |
- | .jx-bar {
| + | |
- | z-index:100;
| + | |
- | height:33px;
| + | |
- | padding:0px;
| + | |
- | width:1000px;
| + | |
- | background-color:#AFFBA2;
| + | |
- | 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;
| + | |
- | }
| + | |
- |
| + | |
- | .jx-separator-right {
| + | |
- | 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:11px;
| + | |
- | 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:white;
| + | |
- | 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:11px;
| + | |
- | color:#666;
| + | |
- | text-decoration:none;
| + | |
- | padding:1px;
| + | |
- | }
| + | |
- | | + | |
- | .jx-bar-button li a:hover {
| + | |
- | z-index:100;
| + | |
- | font-family:Verdana, Arial, Helvetica, sans-serif;
| + | |
- | font-size:11px;
| + | |
- | color:#333;
| + | |
- | text-decoration:none;
| + | |
- | }
| + | |
- | | + | |
- | /*----- bar text container and button arrow indicator -----*/
| + | |
- | .jx-bar div, .jx-bar iframe {
| + | |
- | float:left;
| + | |
- | }
| + | |
- | | + | |
- | .jx-bar div {
| + | |
- | font-family:Verdana, Arial, Helvetica, sans-serif;
| + | |
- | font-size:11px;
| + | |
- | color:#666;
| + | |
- | padding:4px 8px 4px 8px;
| + | |
- | margin:4px 0px 4px 0px;
| + | |
- | }
| + | |
- | | + | |
- | .jx-bar iframe {
| + | |
- | margin:4px 0px 4px 10px;
| + | |
- | }
| + | |
- | | + | |
- | .jx-bar div a:link, .jx-bar div a:visited {
| + | |
- | color:#666;
| + | |
- | text-decoration:none;
| + | |
- | }
| + | |
- | | + | |
- | .jx-bar div a:hover {
| + | |
- | color:#0099FF;
| + | |
- | text-decoration:none;
| + | |
- | }
| + | |
- | | + | |
- | /*----- button tooltip -----*/
| + | |
- | .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:11px;
| + | |
- | 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:150px; /* 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:11px;
| + | |
- | cursor:pointer;
| + | |
- | background-color:white;
| + | |
- | 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:#AFFBA2;
| + | |
- | 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>
| + | |
- | <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 type="text/javascript">
| + | |
- | $(document).ready(function() {
| + | |
- | $("#demo-bar").jixedbar();
| + | |
- | });
| + | |
- | </script>
| + | |
- | | + | |
- | | + | |
- | | + | |
- | | + | |
- | <div id="demo-bar">
| + | |
- | <div class="text-container"><img src="https://static.igem.org/mediawiki/2010/e/eb/UCSF_2010_iGEM.png"></div>
| + | |
- | <ul>
| + | |
- | <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>
| + | |
- | </ul>
| + | |
- | <ul>
| + | |
- | <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" /> Facebook</a></li>
| + | |
- | <li><a href="https://twitter.com/rawswift"><img src="icons/twitter.png" title="Twitter" /> Twitter</a></li>
| + | |
- | <li><a href="http://www.flickr.com/photos/ryanyonzon/"><img src="icons/pictures.png" title="Flickr" /> Flickr</a></li>
| + | |
- | <li><a href="http://ph.linkedin.com/in/ryanyonzon"><img src="icons/card.png" title="Linkedin" /> Linkedin</a></li>
| + | |
- | </ul>
| + | |
- | </li>
| + | |
- | </ul>
| + | |
- | <ul>
| + | |
- | <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" /> Facebook</a></li>
| + | |
- | <li><a href="https://twitter.com/rawswift"><img src="icons/twitter.png" title="Twitter" /> Twitter</a></li>
| + | |
- | <li><a href="http://www.flickr.com/photos/ryanyonzon/"><img src="icons/pictures.png" title="Flickr" /> Flickr</a></li>
| + | |
- | <li><a href="http://ph.linkedin.com/in/ryanyonzon"><img src="icons/card.png" title="Linkedin" /> Linkedin</a></li>
| + | |
- | </ul>
| + | |
- | </li>
| + | |
- | </ul>
| + | |
- | <ul>
| + | |
- | <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>
| + | |
- | </ul>
| + | |
- | <ul>
| + | |
- | <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="http://www.facebook.com/ryanyonzon"><img src="icons/facebook.png" title="Facebook" /> Facebook</a></li>
| + | |
- | <li><a href="https://twitter.com/rawswift"><img src="icons/twitter.png" title="Twitter" /> Twitter</a></li>
| + | |
- | <li><a href="http://www.flickr.com/photos/ryanyonzon/"><img src="icons/pictures.png" title="Flickr" /> Flickr</a></li>
| + | |
- | <li><a href="http://ph.linkedin.com/in/ryanyonzon"><img src="icons/card.png" title="Linkedin" /> Linkedin</a></li>
| + | |
- | </ul>
| + | |
- | </li>
| + | |
- | </ul>
| + | |
- | <ul>
| + | |
- | <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>
| + | |
- | </ul>
| + | |
- | <ul class="jx-bar-button-right">
| + | |
- | <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" /> Content Feed</a></li>
| + | |
- | <li><a href="http://ryan.rawswift.com/comments/feed/"><img src="icons/ballon.png" title="Comment Feed" /> Comment Feed</a></li>
| + | |
- | </ul>
| + | |
- | </li>
| + | |
- | </ul>
| + | |
- | </div>
| + | |
- | <!-- jixedbar ends here -->
| + | |
- | </body>
| + | |
- | </html>
| + | |