|
|
Line 2: |
Line 2: |
| | | |
| <link rel="stylesheet" href="https://2013.igem.org/Team:Heidelberg/Stylesheet?action=raw&ctype=text/css" type="text/css" /> | | <link rel="stylesheet" href="https://2013.igem.org/Team:Heidelberg/Stylesheet?action=raw&ctype=text/css" type="text/css" /> |
| + | </style> |
| + | <style type="text/css"> |
| + | .navigation-nils{ |
| + | height:10em; |
| + | position:absolute; |
| + | top:-7em; |
| + | width:110%; |
| + | left: -5%; |
| + | z-index:999; |
| + | background-color:#292929; |
| + | border:1px solid #292929; |
| + | border-bottom-left-radius: 10px; |
| + | border-bottom-right-radius: 10px; |
| + | } |
| </style> | | </style> |
| <script type="text/javascript"> | | <script type="text/javascript"> |
- | <!--
| |
- | window.onresize = function() {
| |
- | rotateMenu("menu-team", getMenuAngle(2.2));
| |
- | rotateMenu("menu-project", getMenuAngle(1.2));
| |
- | rotateMenu("menu-notebook", getMenuAngle(0.2));
| |
- | rotateMenu("menu-parts", getMenuAngle(0));
| |
- | rotateMenu("menu-modelling", getMenuAngle(0.2), -1);
| |
- | rotateMenu("menu-human", getMenuAngle(1.2), -1);
| |
- | rotateMenu("menu-safety", getMenuAngle(2.2), -1);
| |
- | }
| |
| | | |
- | window.onload = function() {
| |
- | var drop_lists = document.getElementsByClassName("drop-navi-left");
| |
- | for (var i = 0; i < drop_lists.length; i++) {
| |
- | var item = drop_lists[i];
| |
- | while (item.tagName !== "UL") {
| |
- | var item = item.nextSibling;
| |
- | }
| |
- | item.style.display = "none";
| |
- | }
| |
- | var navi_links = document.getElementById("navigation-bar").getElementsByTagName("A");
| |
- | for (var i = 0; i < navi_links.length; i++) {
| |
- | if (document.documentURI.indexOf(navi_links[i].href) !== -1) {
| |
- | navi_links[i].style.color = "#FFCC00";
| |
- | var element = navi_links[i];
| |
- | while (element.parentNode.tagName !== "DIV") {
| |
- | var element = element.parentNode;
| |
- | if (element.tagName == "LI") element.style.display = "list-item";
| |
- | else element.style.display = "block";
| |
- | }
| |
- | var element = navi_links[i].parentNode;
| |
- | if (element.className == "drop-navi-left") {
| |
- | while (element.tagName !== "UL") {
| |
- | var element = element.nextSibling;
| |
- | }
| |
- | element.style.display = "block";
| |
- | }
| |
- | break;
| |
- | }
| |
- | }
| |
- |
| |
- | }
| |
- | function start_tour() {
| |
- | var tour_navi = document.getElementById("tour-navi");
| |
- | if (tour_navi.style.display !== "block") {
| |
- | tour_navi.style.display = "block";
| |
- | }
| |
- | }
| |
- | function stop_tour() {
| |
- | var tour_navi = document.getElementById("tour-navi");
| |
- | if (tour_navi.style.display !== "none") {
| |
- | tour_navi.style.display = "none";
| |
- | }
| |
- | }
| |
- | function expand_left_navi(drop_list) {
| |
- | var list = drop_list;
| |
- | while (list.tagName !== "UL") {
| |
- | var list = list.nextSibling;
| |
- | }
| |
- | var visible = list.style.display;
| |
- | var drop_lists = document.getElementsByClassName("drop-navi-left");
| |
- | for (var i = 0; i < drop_lists.length; i++) {
| |
- | var item = drop_lists[i];
| |
- | while (item.tagName !== "UL") {
| |
- | var item = item.nextSibling;
| |
- | }
| |
- | item.style.display = "none";
| |
- | }
| |
- | if (visible == "none") {
| |
- | list.style.display = "block";
| |
- | } else {
| |
- | list.style.display = "none";
| |
- | }
| |
- | }
| |
- | function getMenuAngle(position) {
| |
- | var menu = document.getElementById("main-menu");
| |
- | var width = menu.offsetWidth;
| |
- | var a = 0.5 * width;
| |
- | var b = menu.offsetHeight;
| |
- | var wpos = width * position * 0.1;
| |
- | var t = Math.acos(wpos / a);
| |
- | var beta = Math.atan(a / b * Math.tan(t));
| |
- | var angle = Math.PI * 0.5 - beta;
| |
- | var y = b - b * Math.sin(t);
| |
- | return Array(angle,y);
| |
- | }
| |
- | function rotateMenu(id, angle, factor) {
| |
- | if (factor !== undefined)
| |
- | angle[0] *= factor;
| |
- | var root = document.getElementById(id);
| |
- | root.style.position = "relative";
| |
- | root.style.top = "calc(5.3em - " + angle[1] + "px)"; // 100px from #main-menu
| |
- | var children = root.children;
| |
- | for (var i = 0; i < children.length; ++i) {
| |
- | if (children[i].nodeName == "A") {
| |
- | children[i].style.transform = "rotate(" + angle[0] + "rad)";
| |
- | break;
| |
- | }
| |
- | }
| |
- | }
| |
- | -->
| |
| </script> | | </script> |
| <div id="top-matter"> | | <div id="top-matter"> |
| | | |
| <!-- Get top menu navigation going and enter --> | | <!-- Get top menu navigation going and enter --> |
- | <div id="main-menu"> | + | <div class="navigation-nils"> |
| | | |
- | </br>
| |
- | </br>
| |
| <div id="menu-team" class="menu-item"> | | <div id="menu-team" class="menu-item"> |
| <a href="https://2013.igem.org/Team:Heidelberg/Team" id="link-team" class="menu-link"> | | <a href="https://2013.igem.org/Team:Heidelberg/Team" id="link-team" class="menu-link"> |