Template:Team:DukeMBar/CSS

From 2014.igem.org

(Difference between revisions)
(Created page with "<html xmlns="http://www.w3.org/1999/xhtml"> <!--THIS STYLE SHEET REPLACES THE HOME TEMPLATE: https://2014.igem.org/Template:Team:DukeHomePage/CSS --> <head> <meta http-equiv="Co...")
 
(41 intermediate revisions not shown)
Line 1: Line 1:
<html xmlns="http://www.w3.org/1999/xhtml">
<html xmlns="http://www.w3.org/1999/xhtml">
-
 
-
<!--THIS STYLE SHEET REPLACES THE HOME TEMPLATE: https://2014.igem.org/Template:Team:DukeHomePage/CSS -->
 
<head>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 +
<head>
 +
<style type="text/css">
 +
#navbar ul, #navbar li {
 +
    list-style: none;
 +
    list-style-position:inside;
 +
    margin:0px 0px;
 +
    padding:0;
 +
}
 +
#navbar ul  {
 +
    display:none;
 +
    position:absolute;
 +
    left:0px;
 +
    width:100%;
 +
    background-color:#0736A4;
 +
}
 +
 +
 +
#navbar li{
 +
    float:left;
 +
    padding:10px 0px;
 +
    position:relative;
 +
    width:14%; /*16.66%*/
 +
}
 +
 +
#navbar > li >ul {
 +
    margin: 10px 0px;
 +
}
 +
 +
#navbar {
 +
    text-align:center;
 +
    /*height: 43px;*/
 +
    background-color:#0736A4;
 +
    margin: 0px 0px 40px 0px;
 +
}
 +
 +
#navbar a {
 +
    text-decoration:none;
 +
    color:white;
 +
    /*font-family:raleway;*/
 +
    font-size:16px;
 +
}
 +
 +
#navbar li li {
 +
    width:100%;
 +
}
 +
</style>
 +
 +
 +
</head>
 +
 +
<body>
<script>
<script>
-
/*! Visit www.menucool.com for source code, other menu scripts and web UI controls
 
-
*  Please keep this notice intact. Thank you. */
 
-
var sse1 = function () {
+
$(document).ready(function(){
-
    var rebound = 20; //set it to 0 if rebound effect is not prefered
+
  $('#navbar > li').hover(function() {
-
    var slip, k;
+
$(this).find('ul').slideToggle("slow");  
-
    return {
+
});
-
        buildMenu: function () {
+
-
            var m = document.getElementById('sses1');
+
-
            if(!m) return;
+
-
            var ul = m.getElementsByTagName("ul")[0];
+
-
            m.style.width = ul.offsetWidth+1+"px";
+
-
            var items = m.getElementsByTagName("li");
+
-
            var a = m.getElementsByTagName("a");
+
-
            slip = document.createElement("li");
 
-
            slip.className = "highlight";
 
-
            ul.appendChild(slip);
 
-
            var url = document.location.href.toLowerCase();
+
$('#navbar > li > ul > li').mouseover(function(){
-
            k = -1;
+
  $(this).css("background-color","#0730D3");
-
            var nLength = -1;
+
});
-
            for (var i = 0; i < a.length; i++) {
+
-
                if (url.indexOf(a[i].href.toLowerCase()) != -1 && a[i].href.length > nLength) {
+
-
                    k = i;
+
-
                    nLength = a[i].href.length;
+
-
                }
+
-
            }
+
-
            if (k == -1 && /:\/\/(?:www\.)?[^.\/]+?\.[^.\/]+\/?$/.test) {
+
$('#navbar li').hover(function(){
-
                for (var i = 0; i < a.length; i++) {
+
  $(this).css("background-color","#0736A4");
-
                    if (a[i].getAttribute("maptopuredomain") == "true") {
+
});
-
                        k = i;
+
-
                        break;
+
-
                    }
+
-
                }
+
-
                if (k == -1 && a[0].getAttribute("maptopuredomain") != "false")
+
-
                    k = 0;
+
-
            }
+
-
            if (k > -1) {
 
-
                slip.style.width = items[k].offsetWidth + "px";
 
-
                //slip.style.left = items[k].offsetLeft + "px";
 
-
                sse1.move(items[k]); //comment out this line and uncomment the line above to disable initial animation
 
-
            }
 
-
            else {
 
-
                slip.style.visibility = "hidden";
 
-
            }
 
-
            for (var i = 0; i < items.length - 1; i++) {
+
$('#navbar > li > a').hover(function(){$(this).parent().css("background-color","#0730D3");}, function(){$(this).parent().css("background-color","#0736A4");});
-
                items[i].onmouseover = function () {
+
});
-
                    if (k == -1) slip.style.visibility = "visible";
+
  </script>
-
                    if (this.offsetLeft != slip.offsetLeft) {
+
-
                        sse1.move(this);
+
-
                    }
+
-
                }
+
-
            }
+
-
            m.onmouseover = function () {
+
<!-- 0736A4 is duke blue -->
-
                if (slip.t2)
+
-
                    slip.t2 = clearTimeout(slip.t2);
+
-
            };
+
-
            m.onmouseout = function () {
 
-
                if (k > -1 && items[k].offsetLeft != slip.offsetLeft) {
 
-
                    slip.t2 = setTimeout(function () { sse1.move(items[k]); }, 50);
 
-
                }
 
-
                if (k == -1) slip.t2 = setTimeout(function () { slip.style.visibility = "hidden"; }, 50);
 
-
            };
 
-
        },
 
-
        move: function (target) {
 
-
            clearInterval(slip.timer);
 
-
            var direction = (slip.offsetLeft < target.offsetLeft) ? 1 : -1;
 
-
            slip.timer = setInterval(function () { sse1.mv(target, direction); }, 15);
 
-
        },
 
-
        mv: function (target, direction) {
 
-
            if (direction == 1) {
 
-
                if (slip.offsetLeft - rebound < target.offsetLeft)
 
-
                    this.changePosition(target, 1);
 
-
                else {
 
-
                    clearInterval(slip.timer);
 
-
                    slip.timer = setInterval(function () {
 
-
                        sse1.recoil(target, 1);
 
-
                    }, 15);
 
-
                }
 
-
            }
 
-
            else {
 
-
                if (slip.offsetLeft + rebound > target.offsetLeft)
 
-
                    this.changePosition(target, -1);
 
-
                else {
 
-
                    clearInterval(slip.timer);
 
-
                    slip.timer = setInterval(function () {
 
-
                        sse1.recoil(target, -1);
 
-
                    }, 15);
 
-
                }
 
-
            }
 
-
            this.changeWidth(target);
 
-
        },
 
-
        recoil: function (target, direction) {
 
-
            if (direction == -1) {
 
-
                if (slip.offsetLeft > target.offsetLeft) {
 
-
                    slip.style.left = target.offsetLeft + "px";
 
-
                    clearInterval(slip.timer);
 
-
                }
 
-
                else slip.style.left = slip.offsetLeft + 2 + "px";
 
-
            }
 
-
            else {
 
-
                if (slip.offsetLeft < target.offsetLeft) {
 
-
                    slip.style.left = target.offsetLeft + "px";
 
-
                    clearInterval(slip.timer);
 
-
                }
 
-
                else slip.style.left = slip.offsetLeft - 2 + "px";
 
-
            }
 
-
        },
 
-
        changePosition: function (target, direction) {
 
-
            if (direction == 1) {
 
-
                //following +1 will fix the IE8 bug of x+1=x, we force it to x+2
 
-
                slip.style.left = slip.offsetLeft + Math.ceil(Math.abs(target.offsetLeft - slip.offsetLeft + rebound) / 10) + 1 + "px";
 
-
            }
 
-
            else {
 
-
                //following -1 will fix the Opera bug of x-1=x, we force it to x-2
 
-
                slip.style.left = slip.offsetLeft - Math.ceil(Math.abs(slip.offsetLeft - target.offsetLeft + rebound) / 10) - 1 + "px";
 
-
            }
 
-
        },
 
-
        changeWidth: function (target) {
 
-
            if (slip.offsetWidth != target.offsetWidth) {
 
-
                var diff = slip.offsetWidth - target.offsetWidth;
 
-
                if (Math.abs(diff) < 4) slip.style.width = target.offsetWidth + "px";
 
-
                else slip.style.width = slip.offsetWidth - Math.round(diff / 3) + "px";
 
-
            }
 
-
        }
 
-
    };
 
-
} ();
 
-
if (window.addEventListener) {
+
<ul id="navbar">
-
    window.addEventListener("load", sse1.buildMenu, false);
+
        <li><a href="https://2014.igem.org/Team:Duke">Home</a></li>
-
}
+
        <li><a href="https://2014.igem.org/Team:Duke/Team">Team</a>
-
else if (window.attachEvent) {
+
<ul>
-
    window.attachEvent("onload", sse1.buildMenu);
+
                <li><a href="https://2014.igem.org/Team:Duke/Team">About Us</a></li>
-
}
+
                <li><a href="https://igem.org/Team.cgi?year=2014&amp;team_name=Duke">Official Team Profile</a></li>
-
else {
+
                <li><a href="https://2014.igem.org/Team:Duke/Safety">Photo Gallery</a></li>             
-
     window["onload"] = sse1.buildMenu;
+
                <li><a href="https://2014.igem.org/Team:Duke">Attributions</a></li>           
-
}
+
</ul>
-
</script>
+
        </li>     
 +
        <li><a href="https://2014.igem.org/Team:Duke/Project">Project</a>
 +
<ul>
 +
  <li><a href="https://2014.igem.org/Team:Duke/Project#background">Background</a></li>             
 +
                <li><a href="https://2014.igem.org/Team:Duke/Project#summary">Summary</a></li>             
 +
  <li><a href="https://2014.igem.org/Team:Duke">Results</a></li>       
 +
  <li><a href="https://2014.igem.org/Team:Duke">Future Steps</a></li>           
 +
      
 +
</ul>
 +
      </li>
 +
      <li><a href="https://2014.igem.org/Team:Duke/Notebook">Notebook</a>
 +
<ul>
 +
                <li><a href="https://2014.igem.org/Team:Duke/Notebook">Overview</a></li>             
 +
                <li><a href="https://2014.igem.org/Team:Duke">Month</a></li>             
 +
                <li><a href="https://2014.igem.org/Team:Duke">Month</a></li>             
 +
                <li><a href="https://2014.igem.org/Team:Duke">Month</a></li>             
 +
                <li><a href="https://2014.igem.org/Team:Duke">Month</a></li>             
 +
                <li><a href="https://2014.igem.org/Team:Duke">Month</a></li>             
 +
                <li><a href="https://2014.igem.org/Team:Duke">Month</a></li>             
 +
                <li><a href="https://2014.igem.org/Team:Duke">Month</a></li>             
 +
        <li><a href="https://2014.igem.org/Team:Duke/Notebook/Protocols">Protocols</a></li>           
 +
</ul>
 +
      </li>
 +
      <li><a href="https://2014.igem.org/Team:Duke">Policy and Practice</a>
 +
        <ul>
 +
                <li><a href="https://2014.igem.org/Team:Duke">3D Printing</a></li>             
 +
                <li><a href="https://2014.igem.org/Team:Duke">House Course</a></li>             
 +
                <li><a href="https://2014.igem.org/Team:Duke">NCSSM Team</a></li>             
 +
        </ul>
 +
      </li>       
 +
      <li><a href="https://2014.igem.org/Team:Duke/Safety">Safety</a></li>     
 +
      <li><a href="https://2014.igem.org/"><img src = "https://static.igem.org/mediawiki/2014/1/1a/Mattigemlogowhite.png" height="17px"></a></li>    
-
</head>
+
<div style="clear: both;"></div>
 +
</ul>
 +
 
 +
 
 +
</body>
</html>
</html>

Latest revision as of 14:41, 16 October 2014

Retrieved from "http://2014.igem.org/Template:Team:DukeMBar/CSS"