Skip to content

Instantly share code, notes, and snippets.

/index.html

Created November 2, 2013 18:00
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save anonymous/7281662 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save anonymous/7281662 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @invalid-email-address Anonymous created this gist Nov 2, 2013.
    21 changes: 21 additions & 0 deletions gistfile1.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,21 @@
    (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;
    });
    }
    })();
    26 changes: 26 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,26 @@
    <!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>
    35 changes: 35 additions & 0 deletions styles.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,35 @@
    #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;
    }