Template:Team:DukeMBar/CSS

From 2014.igem.org

(Difference between revisions)
Line 5: Line 5:
<head>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 +
<script type="text/javascript" src="http://www.dynamicdrive.com/dynamicindex1/chrome/chromejs/chrome.js"></script>
 +
<link rel="stylesheet" type="text/css" href="http://www.dynamicdrive.com/dynamicindex1/chrome/chrometheme/chromestyle.css"></style>
 +
</head>
-
<style media="screen" type="text/css">
+
<body>
-
/* Visit http://www.menucool.com/horizontal/javascript-menu for source code and other menu CSS templates */
+
-
li {
+
-
list-style-type:none;
+
-
}
+
-
#sse1
+
<div class="chromestyle" id="chromemenu">
-
{
+
<ul>
-
    /*You can decorate the menu's container, such as adding background images through this block*/
+
<li><a href="http://www.dynamicdrive.com">Home</a></li>
-
    background-color: #222222;
+
<li><a href="#" rel="dropmenu1">Resources</a></li>
-
    height: 38px;
+
<li><a href="#" rel="dropmenu2">News</a></li>
-
    padding: 15px;
+
</ul>
-
    border-radius: 3px;
+
</div>
-
    box-sizing: content-box;
+
-
}
+
-
#sses1
+
-
{
+
-
    margin:0 auto;/*This will make the menu center-aligned. Removing this line will make the menu align left.*/
+
-
}
+
-
#sses1 ul
+
-
{
+
-
    position: relative;
+
-
    list-style-type: none;
+
-
    float:left;
+
-
    padding:0;margin:0;
+
-
    border-bottom:solid 1px #0736A4; /*Duke blue*/
+
-
}
+
-
#sses1 li
+
-
{
+
-
    float:left;
+
-
    list-style-type: none;
+
-
    padding:0;margin:0;background-image:none;
+
-
}
+
-
/*CSS for background bubble*/
+
-
#sses1 li.highlight
+
-
{
+
-
    background-color:##0794A4; /*Aqua*/
+
-
    top:36px;
+
-
    height:2px;
+
-
    border-bottom:solid 1px #C00;
+
-
    z-index: 1;
+
-
    position: absolute;
+
-
    overflow:hidden;
+
-
}
+
-
#sses1 li a
+
-
{
+
-
    box-sizing: content-box;
+
-
    height:30px;
+
-
    padding-top: 8px;
+
-
    margin: 0 20px;/*used to adjust the distance between each menu item. Now the distance is 20+20=40px.*/
+
-
    color: #fff;
+
-
    font: normal 12px arial;
+
-
    text-align: center;
+
-
    text-decoration: none;
+
-
    float: left;
+
-
    display: block;
+
-
    position: relative;
+
-
    z-index: 2;
+
-
}
+
-
</style>
+
-
<script>
+
<!--1st drop down menu -->  
-
/*! Visit www.menucool.com for source code, other menu scripts and web UI controls
+
<div id="dropmenu1" class="dropmenudiv">
-
*  Please keep this notice intact. Thank you. */
+
<a href="http://www.dynamicdrive.com/">Dynamic Drive</a>
 +
<a href="http://www.cssdrive.com">CSS Drive</a>
 +
<a href="http://www.javascriptkit.com">JavaScript Kit</a>
 +
</div>
-
var sse1 = function () {
 
-
    var rebound = 0; //set it to 20 if rebound effect is preferred
 
-
    var slip, k;
 
-
    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");
+
<!--2nd drop down menu -->
-
            slip.className = "highlight";
+
<div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
-
            ul.appendChild(slip);
+
<a href="http://www.cnn.com/">CNN</a>
 +
<a href="http://www.msnbc.com">MSNBC</a>
 +
<a href="http://news.bbc.co.uk">BBC News</a>
 +
</div>
-
            var url = document.location.href.toLowerCase();
+
<script type="text/javascript">
-
            k = -1;
+
cssdropdown.startchrome("chromemenu")
-
            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) {
+
-
                for (var i = 0; i < a.length; i++) {
+
-
                    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]); //uncomment this line and comment the line above to enable initial animation
+
-
            }
+
-
            else {
+
-
                slip.style.visibility = "hidden";
+
-
            }
+
-
 
+
-
            for (var i = 0; i < items.length - 1; i++) {
+
-
                items[i].onmouseover = function () {
+
-
                    if (k == -1) slip.style.visibility = "visible";
+
-
                    if (this.offsetLeft != slip.offsetLeft) {
+
-
                        sse1.move(this);
+
-
                    }
+
-
                }
+
-
            }
+
-
 
+
-
            m.onmouseover = function () {
+
-
                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) {
+
-
    window.addEventListener("load", sse1.buildMenu, false);
+
-
}
+
-
else if (window.attachEvent) {
+
-
    window.attachEvent("onload", sse1.buildMenu);
+
-
}
+
-
else {
+
-
    window["onload"] = sse1.buildMenu;
+
-
}
+
</script>
</script>
-
 
-
</head>
 
-
 
-
<body>
 
-
<div id="sse1">
 
-
  <div id="sses1">
 
-
    <ul>
 
-
      <li><a href="#apr">April</a></li>
 
-
      <li><a href="#mayjun">May/June</a></li>
 
-
      <li><a href="#jul">July</a></li>
 
-
    </ul>
 
-
  </div>
 
-
</div>
 
-
 
</body>
</body>
</html>
</html>

Revision as of 21:36, 14 October 2014

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