Skip to content

Instantly share code, notes, and snippets.

@krtenn

krtenn/main.html

Created November 24, 2016 22:31
Show Gist options

  • Select an option

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

Select an option

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

Revisions

  1. krtenn created this gist Nov 24, 2016.
    53 changes: 53 additions & 0 deletions main.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,53 @@
    <html>
    <head>
    <title>Testing</title>
    <link rel="stylesheet" href="menu.css">
    </head>
    <body>
    <div class="menu">
    <ul class="main-ul">
    <li class="main-li">
    Tools
    <ul class="dropdown-content">
    <p>Our selection of tools to get the job done, no matter what your project is</p>
    <ul>
    <li>Power Tools</li>
    <li>Regular Tools</li>
    <li>Screws and Nails</li>
    </ul>
    </ul>
    </li>
    <li class="main-li">
    Cars
    <ul class="dropdown-content">
    <p>This is our selection of cool compact cars.</p>
    <ul>
    <li>
    Dodge
    </li>
    <li>
    Ford
    </li>
    <li>
    Chevy
    </li>
    <li>
    Honda
    </li>
    <li>
    Nissan
    </li>
    <li>Volkswagen</li>
    <li>Range Rover</li>
    <li>Lexus</li>
    <li>Other Unique Foreign and Domestic Vehicles</li>
    <li>Antiques</li>
    </ul>
    </ul>
    </li>
    </ul>
    </div>
    <p>This is the page now. This change should be commited to git.</p>
    </body>
    <script src="menu.js"></script>
    </html>
    82 changes: 82 additions & 0 deletions menu.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,82 @@
    @import url('https://fonts.googleapis.com/css?family=Lato');

    @keyframes showNav {
    from {opacity: 0;}
    to {opacity: 1;}
    }

    body {
    font-family: 'Lato', sans-serif;
    }
    .menu {
    background: grey;
    padding: 10px;
    border-radius: 10px;
    font-size: 22px;
    }
    /* this is the main structure for the list - can remove */
    .main-ul {
    border: solid yellow 5px;
    margin: 5px;
    padding: 10px;
    border-radius: 10px;
    }

    /* these are the top menu links that, upon hover, show the dropdown content */
    .main-li {
    display: inline-block;
    padding: 10px;
    border: solid 1px;
    border-radius: 5px;
    /* max-width: 5%; */
    }

    .main-li:hover {
    background-color: darkgrey;
    cursor: pointer;
    }
    /* this is the nice little drop down menu div type object with the uls
    notice its max width is 30% */

    .dropdown-content {
    display: none;
    position: absolute;
    background-color: darkgrey;
    max-width: 35%;
    padding: 10px;
    border-radius: 5px;
    }
    /* this is a paragraph within the dropdown */
    .dropdown-content p {
    font-size: 18px;
    background-color: yellow;
    border-radius: 5px;
    padding: 5px;
    }
    /* this is a ul within the dropdown */
    .dropdown-content ul {
    columns: 1;
    column-width: 50%;
    padding: 5px 2px 5px 2px;
    }



    /* this is an li within the dropdown */
    .dropdown-content li {
    display: block;
    padding: 5px;
    font-size: 0.8em;
    border-radius: 5px;
    break-inside: avoid;
    }

    .dropdown-content li:hover {
    background-color: yellow;
    transition: all 0.2s ease-in;
    }

    .main-li:hover .dropdown-content {
    display: block;
    animation: showNav 250ms ease-in both;
    }
    9 changes: 9 additions & 0 deletions menu.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,9 @@
    var list2 = document.querySelectorAll(".dropdown-content ul");
    for (var i = 0; i < list2.length; i++) {
    var listItems = list2[i].children.length;
    if (listItems > 6) {
    list2[i].style.columns = 2;
    list2[i].style.columnwidth = "50%";
    }

    }