aresnick/_nav-bar.md

## _nav-bar.md

      
    Raw
  

              _nav-bar.md
            
          
    A small example of styling a minorly interactive nav bar

This is a snippet created to demonstrate how you might style and add a bit of interactivity (hover, JavaScript behavior on click) to a basic and ugly navbar.
Please let us know if you have any questions or concerns!
Further doing


Watch our screencast constructing this gist
Modify the code so that:

…the mouse cursor turns to a hand when you mouseover the buttons, indicating their clickability
…clicking on a nav li scrolls down to another part of the page with a same-page anchor link
…the width of the li's changes automatically when you add another li


Further Reading


The nav element
"Fighting the Space Between Inline Block Elements"
MDN's reference on the nth-child pseudoselector
MDN's refernce on addEventListener
A pretty extensive tutorial on events in JavaScript


## nav-bar.html
<html>

<head>
    <style>
    body {
        /* Get rid of default body margin */
        margin: 0;
    }

    nav {
        background-color: grey;
    }

    ol {
        /* Get rid of default ol spacing and the numbering of its list */
        margin: 0;
        padding: 0;
        list-style-type: none;
    }

    ol li {
        text-align: center;
        text-transform: uppercase;
        margin-left: -4px;
        /* shift our inline-block list elements over by 4px; you can read more about this awful thing at https://css-tricks.com/fighting-the-space-between-inline-block-elements/ */
        width: calc(100%/5);
        /* Make our list elements 1/5 the width of our screen */
        display: inline-block;
    }

    ol li:first-child {
        /* Prevent the ugly 4px trick from applying to the _first_ list element */
        margin-left: 0;
    }

    ol li:nth-child(2n) {
        /* For all the _even_ numbered list elements… — you can read more about nth-child at https://developer.mozilla.org/en-US/docs/Web/CSS/%3Anth-child */
        background-color: lightgrey;
    }

    ol li:hover {
        background-color: white;
    }
    </style>
</head>

<body>
    <nav>
        <ol>
            <li>Every</li>
            <li>day</li>
            <li>in</li>
            <li>every</li>
            <li>way</li>
        </ol>
    </nav>
    <script>
    // A short snippet function which sets our body's background color to red
    var bodyRed = function() {
        document.body.style.backgroundColor = 'red';
    };

    var myLis = document.querySelectorAll('li'); // Grab all our li's; you can read about querySelectorAll at https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll
    myLis = Array.prototype.slice.call(myLis); // Ugly conversion from a NodeList to an Array; you can read more about this ugly thing at http://toddmotto.com/a-comprehensive-dive-into-nodelists-arrays-converting-nodelists-and-understanding-the-dom/

    myLis.forEach(function(myLi) { // iterate over the myLis array
        myLi.addEventListener('click', bodyRed); // add an eventListener for 'click' which triggers bodyRed; you can read more about addEventListener at https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
    });
    </script>
</body>

</html>