Skip to content

Instantly share code, notes, and snippets.

/index.html

Created November 2, 2013 18:00
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save anonymous/7281662 to your computer and use it in GitHub Desktop.
Save anonymous/7281662 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.txt
(function() {
var doc = document;
var anchors = doc.getElementById('menu').getElementsByTagName('a');
var highlight = doc.getElementById('highlight');
for(var i = 0, len = anchors.length; i < len; i++) {
anchors[i].addEventListener('mouseover', function(e) {
var target = e.target;
highlight.style.width = target.offsetWidth + 'px';
highlight.style.left = target.offsetLeft + 'px';
});
anchors[i].addEventListener('mouseout', function(e) {
var target = e.target;
var storeNeg = '-' + highlight.style.width;
console.log(storeNeg);
highlight.style.left = storeNeg;
});
}
})();
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Solution</title>
<link rel="stylesheet" href="css/style.css">
<link rel="author" href="humans.txt">
</head>
<body>
<div id="header">
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
</ul>
<div id="gutter">
<span id="highlight"></span>
</div>
</div>
<script src="js/script.js"></script>
</body>
</html>
Raw
styles.css
#header {
position: relative;
overflow: hidden;
}
#menu {
width: 100%;
height: 120px;
background: #181818;
list-style: none;
margin: 0;
padding: 0;
}
#menu li {
margin: 0;
padding: 0;
float: left;
}
#menu li a {
color: #FFF;
margin: 0;
padding: 50px;
display: block;
}
#highlight {
position: absolute;
top: 0;
left: 0;
height: 5px;
background: #f00;
transition: all .5s;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment