Skip to content

Instantly share code, notes, and snippets.

@michaelwhyte

michaelwhyte/drop-down-nav.css

Created May 31, 2018 14:23
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save michaelwhyte/9a5c56aad17f1b289a45dac534b15e27 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save michaelwhyte/9a5c56aad17f1b289a45dac534b15e27 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Michael Whyte created this gist May 31, 2018.
    150 changes: 150 additions & 0 deletions drop-down-nav.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,150 @@
    @charset "utf-8";
    /* CSS Document */

    body {
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    }

    html {
    box-sizing: border-box;
    }
    *, *:before, *:after {
    box-sizing: inherit;
    }

    nav {
    height: 46px;
    background-color: #B24AF8;
    display: flex;
    justify-content: center;
    }

    button {
    display: none;
    }

    nav ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    background-color: #B24AF8;
    }

    nav > ul {
    display: flex;
    }

    nav a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    padding: 0 20px;
    line-height: 46px;
    display: block;
    border-left: 2px solid #690086;
    }

    nav > ul > li:last-child > a {
    border-right: 2px solid #690086;
    }

    nav a:focus,
    nav a:hover,
    nav a:active {
    background-color: #7830A8;
    }

    nav li {
    position: relative;
    }

    nav ul > li > ul {
    position: absolute;
    height: 0;
    overflow: hidden;
    }

    nav ul > li:hover > ul,
    nav ul > li.hover > ul {
    height: auto;
    }

    nav ul ul a {
    border-left: none;
    border-top: 1px solid #690086;
    }

    nav .dropdown > a {
    position: relative;
    }

    nav .dropdown > a:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid #fff;
    bottom: 5px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    }

    @media only screen and (max-width: 600px){

    button {
    display: block;
    width: 49px;
    height: 35px;
    background-image: url(../images/hamburger.png);
    background-size: cover;
    border: none;
    background-color: transparent;
    text-indent: 150%;
    overflow: hidden;
    margin-top: 5px;
    margin-bottom: 5px;
    cursor: pointer;
    }

    nav {
    flex-wrap: wrap;
    }

    nav > ul {
    flex-wrap: wrap;
    flex: 1 1 100%;
    display: none;
    }

    nav > .open {
    display: flex;
    }

    nav > ul > * {
    flex: 1 1 100%;
    text-align: center;
    }

    nav a {
    border-left: none;
    border-top: 1px solid #690086;
    }

    nav > ul > li:last-child > a {
    border-right: none;
    }

    nav ul > li > ul {
    position: static;
    background-color: #000;
    }

    nav ul ul a {
    border-top: 1px solid #fff;
    }


    }
    40 changes: 40 additions & 0 deletions drop-down-nav.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,40 @@
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Dropdown Navigation</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="styles/styles-dropdown-navigation.css">
    </head>
    <body>
    <nav>
    <button>Menu</button>
    <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li class="dropdown"><a href="#0">Services</a>
    <ul>
    <li><a href="#">Windows</a></li>
    <li><a href="#">Exteriors</a></li>
    <li><a href="#">Balconies</a></li>
    <li><a href="#">Bathrooms</a></li>
    <li><a href="#">Kitchens</a></li>
    </ul>
    </li>
    <li class="dropdown"><a href="#0">Plans</a>
    <ul>
    <li><a href="#">Basic</a></li>
    <li><a href="#">Medium</a></li>
    <li><a href="#">Premium</a></li>
    </ul>
    </li>
    <li><a href="#">Contact</a></li>
    </ul>
    </nav>
    <script
    src="https://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>
    <script src="scripts/script-dropdown-navigation.js"></script>
    </body>
    </html>
    27 changes: 27 additions & 0 deletions drop-down-nav.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,27 @@
    // JavaScript Document

    var $btn = $('button');
    var $nav = $('nav');
    var $navUl = $('nav > ul');

    $btn.click(function(){
    $navUl.toggleClass('open');
    });

    // The following JS modified from
    // JS found at this CodePen: http://codepen.io/laviperchik/pen/dlcBt
    $.fn.accessibleDropDown = function () {

    var el = $(this);

    /* Make dropdown menus keyboard accessible */

    el.find('a').focus(function() {
    $(this).parents("li").addClass("hover");
    }).blur(function() {
    $(this).parents("li").removeClass("hover");
    });

    }

    $nav.accessibleDropDown();