|
|
Line 8: |
Line 8: |
| | | |
| <title>Slashdot's Menu</title> | | <title>Slashdot's Menu</title> |
| + | <script src="https://2012.igem.org/Team:Exeter/sdmenu.js?action=raw&ctype=text/js" type="text/javascript"></script> |
| + | |
| + | <link rel="stylesheet" href="https://2012.igem.org/Team:Exeter/sdmenu.css?action=raw&ctype=text/css" type="text/css" media="screen" /> |
| | | |
- | <script type="text/javascript">
| |
- | function SDMenu(id) {
| |
- | if (!document.getElementById || !document.getElementsByTagName)
| |
- | return false;
| |
- | this.menu = document.getElementById(id);
| |
- | this.submenus = this.menu.getElementsByTagName("div");
| |
- | this.remember = false;
| |
- | this.speed = 15;
| |
- | this.markCurrent = true;
| |
- | this.oneSmOnly = false;
| |
- | }
| |
- | SDMenu.prototype.init = function() {
| |
- | var mainInstance = this;
| |
- | for (var i = 0; i < this.submenus.length; i++)
| |
- | this.submenus[i].getElementsByTagName("span")[0].onclick = function() {
| |
- | mainInstance.toggleMenu(this.parentNode);
| |
- | };
| |
- | if (this.markCurrent) {
| |
- | var links = this.menu.getElementsByTagName("a");
| |
- | for (var i = 0; i < links.length; i++)
| |
- | if (links[i].href == document.location.href) {
| |
- | links[i].className = "current";
| |
- | break;
| |
- | }
| |
- | }
| |
- | if (this.remember) {
| |
- | var regex = new RegExp("sdmenu_" + encodeURIComponent(this.menu.id) + "=([01]+)");
| |
- | var match = regex.exec(document.cookie);
| |
- | if (match) {
| |
- | var states = match[1].split("");
| |
- | for (var i = 0; i < states.length; i++)
| |
- | this.submenus[i].className = (states[i] == 0 ? "collapsed" : "");
| |
- | }
| |
- | }
| |
- | };
| |
- | SDMenu.prototype.toggleMenu = function(submenu) {
| |
- | if (submenu.className == "collapsed")
| |
- | this.expandMenu(submenu);
| |
- | else
| |
- | this.collapseMenu(submenu);
| |
- | };
| |
- | SDMenu.prototype.expandMenu = function(submenu) {
| |
- | var fullHeight = submenu.getElementsByTagName("span")[0].offsetHeight;
| |
- | var links = submenu.getElementsByTagName("a");
| |
- | for (var i = 0; i < links.length; i++)
| |
- | fullHeight += links[i].offsetHeight;
| |
- | var moveBy = Math.round(this.speed * links.length);
| |
- |
| |
- | var mainInstance = this;
| |
- | var intId = setInterval(function() {
| |
- | var curHeight = submenu.offsetHeight;
| |
- | var newHeight = curHeight + moveBy;
| |
- | if (newHeight < fullHeight)
| |
- | submenu.style.height = newHeight + "px";
| |
- | else {
| |
- | clearInterval(intId);
| |
- | submenu.style.height = "";
| |
- | submenu.className = "";
| |
- | mainInstance.memorize();
| |
- | }
| |
- | }, 30);
| |
- | this.collapseOthers(submenu);
| |
- | };
| |
- | SDMenu.prototype.collapseMenu = function(submenu) {
| |
- | var minHeight = submenu.getElementsByTagName("span")[0].offsetHeight;
| |
- | var moveBy = Math.round(this.speed * submenu.getElementsByTagName("a").length);
| |
- | var mainInstance = this;
| |
- | var intId = setInterval(function() {
| |
- | var curHeight = submenu.offsetHeight;
| |
- | var newHeight = curHeight - moveBy;
| |
- | if (newHeight > minHeight)
| |
- | submenu.style.height = newHeight + "px";
| |
- | else {
| |
- | clearInterval(intId);
| |
- | submenu.style.height = "";
| |
- | submenu.className = "collapsed";
| |
- | mainInstance.memorize();
| |
- | }
| |
- | }, 30);
| |
- | };
| |
- | SDMenu.prototype.collapseOthers = function(submenu) {
| |
- | if (this.oneSmOnly) {
| |
- | for (var i = 0; i < this.submenus.length; i++)
| |
- | if (this.submenus[i] != submenu && this.submenus[i].className != "collapsed")
| |
- | this.collapseMenu(this.submenus[i]);
| |
- | }
| |
- | };
| |
- | SDMenu.prototype.expandAll = function() {
| |
- | var oldOneSmOnly = this.oneSmOnly;
| |
- | this.oneSmOnly = false;
| |
- | for (var i = 0; i < this.submenus.length; i++)
| |
- | if (this.submenus[i].className == "collapsed")
| |
- | this.expandMenu(this.submenus[i]);
| |
- | this.oneSmOnly = oldOneSmOnly;
| |
- | };
| |
- | SDMenu.prototype.collapseAll = function() {
| |
- | for (var i = 0; i < this.submenus.length; i++)
| |
- | if (this.submenus[i].className != "collapsed")
| |
- | this.collapseMenu(this.submenus[i]);
| |
- | };
| |
- | SDMenu.prototype.memorize = function() {
| |
- | if (this.remember) {
| |
- | var states = new Array();
| |
- | for (var i = 0; i < this.submenus.length; i++)
| |
- | states.push(this.submenus[i].className == "collapsed" ? 0 : 1);
| |
- | var d = new Date();
| |
- | d.setTime(d.getTime() + (30 * 24 * 60 * 60 * 1000));
| |
- | document.cookie = "sdmenu_" + encodeURIComponent(this.menu.id) + "=" + states.join("") + "; expires=" + d.toGMTString() + "; path=/";
| |
- | }
| |
- | };
| |
- | </script>
| |
- | <style>
| |
- | div.sdmenu {
| |
- | width: 1075px;
| |
- | font-family:DokChampa, sans-serif;
| |
- | font-size: 30px;
| |
- | padding: 10px;
| |
- | background: url(bottom.gif) no-repeat right bottom;
| |
- | color: #fff;
| |
- | }
| |
- | div.sdmenu div {
| |
- | background: url(title.gif) repeat-x;
| |
- | overflow: hidden;
| |
- | }
| |
- | div.sdmenu div:first-child {
| |
- | background: url(toptitle.gif) no-repeat;
| |
- | }
| |
- | div.sdmenu div.collapsed {
| |
- | height: 70px;
| |
- | }
| |
- | div.sdmenu div span {
| |
- | display: block;
| |
- | padding: 5px 25px;
| |
- | font-weight: bold;
| |
- | color:#000;
| |
- | background:url(../Documents/igem/uparrow.png) #F0C427 no-repeat 10px center;
| |
- | cursor: default;
| |
- | border-bottom: 1px solid #ddd;
| |
- | text-align:center;
| |
- | }
| |
- | div.sdmenu div.collapsed span {
| |
- | background-image:url(../Documents/igem/downarrow.png);
| |
- | }
| |
- | div.sdmenu div a {
| |
- | padding: 5px 10px;
| |
- | background: #eee;
| |
- | display: block;
| |
- | border-bottom: 1px solid #ddd;
| |
- | color: #066;
| |
- | font-size:16px;
| |
- | }
| |
- | div.sdmenu div a.current {
| |
- | background : #ccc;
| |
- | }
| |
- | div.sdmenu div a:hover {
| |
- | text-decoration: none;
| |
- | }
| |
- | </style>
| |
| | | |
| <script type="text/javascript"> | | <script type="text/javascript"> |