|
|
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> |