<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
body,td,th {
color: #000000;
}
body {
background-color: lightyellow;
background-image:;
}
</style>
</head>
<body>
<div id="sse1">
<div id="sses1">
<ul>
<li><a href="?menu=1&skin=2&p=Javascript-Menus">Civil Arts</a></li>
<li><a href="?menu=1&skin=2&p=Horizontal-Menus">Biography</a></li>
<li><a href="?menu=1&skin=2&p=Web-Menus">Portfolio</a></li>
</li>
<li><a href="?menu=1&skin=2&p=Web-Menus">Cloud</a></li>
</ul>
</div>
</div>
<span style="text-align: center"></span><span style="text-align: center"></span><span style="text-align: center; background: lightyellow;"></span><span style="text-align: center"></span><span style="text-align: left"></span>
<img src="../FrenchGothican.jpg" width="600" height="400" alt=""/>
<img src="../cloud.jpg" width="50" height="50" alt=""/><span style="font-weight: bold">Civil Arts ®</span> gives contractors the world's best engineering apps on a cloud - and they're always up to date - so they can locate new and existing construction projects in undeveloped city districts, access renderings of architectural, structural, and system designs, and coordinate Building Information Modeling (BIM) for timelines, clash detections, and quantity take-offs.
</body>
</html>
#sse1 {
/*You can decorate the menu's container, such as adding background images through this block*/
background-color: #222;
height: 38px;
padding: 15px;
border-radius: 3px;
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 #6C0000;
}
#sses1 li {
float: left;
list-style-type: none;
padding: 0;
margin: 0;
background-image: none;
}
/*CSS for background bubble*/
#sses1 li.highlight {
background-color: #800;
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;
}
var sse1 = function() {
var rebound = 20; //set it to 0 if rebound effect is not prefered
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");
slip.className = "highlight";
ul.appendChild(slip);
var url = document.location.href.toLowerCase();
k = -1;
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]); //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++) {
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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.