Nav

index.html

<nav role="custom-dropdown">
    <input type="checkbox" id="button">
    <label for="button" onclick></label>

    <ul>
        <li><a target="_blank" rel="noopener noreferrer" href=" https://determined-dijkstra-ee7390.netlify.app/">JOB SEARCH</a></li>
        <li><a target="_blank" rel="noopener noreferrer" href="https://links4242.netlify.app/ ">Links</a></li>
        <li><a target="_blank" rel="noopener noreferrer" href="#">Markdown Templates</a></li>
        <li><a target="_blank" rel="noopener noreferrer" href="#">Sidebar Blog(nextjs)</a></li>
        <li><a target="_blank" rel="noopener noreferrer" href="https://friendly-amaranth-51833.netlify.app/  ">Norwex Ecommerce </a></li>
        <li><a target="_blank" rel="noopener noreferrer" href="https://bgoonzbookmarks.netlify.app/">Bookmarks</a></li>
        <li><a target="_blank" rel="noopener noreferrer" href="https://sanity-gatsby-hey-sugar-5.netlify.app/ ">Blood Sugars for</a></li>
        <li><a target="_blank" rel="noopener noreferrer" href="#">Projects</a></li>
        <li><a target="_blank" rel="noopener noreferrer" href="https://dev-journal42.netlify.app/">DevJournal</a></li>
        <li><a target="_blank" rel="noopener noreferrer" href="https://kguner-fractions-website.netlify.app/">Fractions</a></li>
        <li><a target="_blank" rel="noopener noreferrer" href="https://sanity-gatsby-blog-web-skwx3b17.netlify.app/">Gatsby-blog-template</a></li>
        <li><a target="_blank" rel="noopener noreferrer" href="https://ds-algo-official.netlify.app/">DS-Algo</a></li>
        <li><a target="_blank" rel="noopener noreferrer" href="https://random-list-of-embedable-content.vercel.app/">Embeds</a></li>
        <li><a target="_blank" rel="noopener noreferrer" href="https://mihirbegmusiclab.netlify.app/">Music Lab</a></li>
        <li><a target="_blank" rel="noopener noreferrer" href="https://lambda-resources.netlify.app/">Lambda Resources</a></li>
        <li><a target="_blank" rel="noopener noreferrer" href="https://ds-unit-5-lambda.netlify.app/">Python Data Structures</a></li>
        <li><a target="_blank" rel="noopener noreferrer" href="https://www.youtube.com/embed/xGZSWvFess8">Youtube</a></li>
        <li><a target="_blank" rel="noopener noreferrer" href="https://bgoonz.blogspot.com/">Blog Archive</a></li>
        <li><a target="_blank" rel="noopener noreferrer" href="https://bgoonz.blogspot.com/">Blog Archive</a></li>
        <li><a target="_blank" rel="noopener noreferrer" href="https://iframeshowcase.netlify.app/">Mini Proj Showcase
    </ul>
</nav>

nav.markdown

Nav

Part of my Responsive Menu Concepts article on CSS-Tricks.

A Pen by Bryan C Guner on CodePen.

License.

script.js

/**
  Custom Dropdown

 https://determined-dijkstra-ee7390.netlify.app/
https://links4242.netlify.app/ 
https://markdown-templates-42.netlify.app/    
https://sidebar-blog.netlify.app/   
https://friendly-amaranth-51833.netlify.app/  
https://bgoonzbookmarks.netlify.app/                  
https://sanity-gatsby-hey-sugar-5.netlify.app/ 

https://dev-journal42.netlify.app/   
https://kguner-fractions-website.netlify.app/                          
https://sanity-gatsby-blog-web-skwx3b17.netlify.app/                                                                                                                                                          
https://ds-algo-official.netlify.app/                                                                                
https://random-list-of-embedable-content.vercel.app/                                                                                                                                                             
https://mihirbegmusiclab.netlify.app/                                                                                                                                                               
https://lambda-resources.netlify.app/                                                                                                                                                                
https://ds-unit-5-lambda.netlify.app/                                                                                                                                                                 
https://www.youtube.com/embed/xGZSWvFess8                                                                                                                                                                 
https://bgoonz.blogspot.com/  
https://iframeshowcase.netlify.app/


**/

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.1/js/bootstrap.min.js"></script>

style.scss

@import "compass/css3";

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body {
    background: url(http://cache.clickonf5.org/wp-content/uploads/2010/04/ubuntu_wallpaper_thumb.png);
    background-size: cover;
}

/* Advanced Checkbox Hack */
body {
    -webkit-animation: bugfix infinite 1s;
}
@-webkit-keyframes bugfix {
    from {
        padding: 0;
    }
    to {
        padding: 0;
    }
}

input[type="checkbox"] {
    position: absolute;
    top: -9999px;
    left: -9999px;
}

label {
    display: none;
    cursor: pointer;
    user-select: none;
}

/* background for li / select */
$img_bg: url(https://raw.github.com/TimPietrusky/mantisbt-is-a-rockstar/master/rockstar/img/bg_dark_grey.png);

/* custom-dropdown */
nav[role="custom-dropdown"] {
    position: relative;
    width: 100%;

    a,
    label {
        color: white;
        text-decoration: none;
        font: 1.4em sans-serif;
        transition: color 0.3s ease-in-out;
    }

    ul {
        padding: 0;
        margin: 0 auto;
        width: 100%;
        list-style: none;

        > li {
            float: left;
            padding: 0.55em 0.55em;
            width: 25%;
            background-image: $img_bg;
            text-align: center;
            transition-duration: 0.6s;
            transition-timing-function: ease-in-out;
            transition-property: box-shadow, color;
            box-shadow: 0.5em 0.05em 0.25em 0 rgba(0, 0, 0, 0.55);
            cursor: pointer;

            &:hover {
                background-color: rgba(0, 0, 0, 1);
                color: #fff;
                box-shadow: 0 0.05em 0.25em 0 rgba(0, 0, 0, 0.39),
                    inset 0 0 0 3em rgba(0, 0, 0, 0.3);

                > a {
                    color: #fff;
                }
            }
        }
    }
}

/* small screens */
@media screen and (max-width: 44em) {
    html,
    body {
        margin: 0;
    }

    nav[role="custom-dropdown"] {
        ul {
            display: none;
            height: 100%;
        }

        label {
            position: relative;
            display: block;
            width: 100%;
            min-height: 2.25em;
            padding: 0.25em;
            font-size: 1.1em;
            margin: 0;
            border: 0.15em solid rgba(60, 60, 60, 0.2);
            background-image: $img_bg;
        }

        label:after {
            position: absolute;
            right: 0.25em;
            top: 0;
            content: "\2261";
            font-size: 1.8em;
        }

        input[type="checkbox"]:checked ~ label:after {
            color: #222;
        }

        input[type="checkbox"]:checked ~ ul {
            display: block;

            > li {
                width: 100%;
                opacity: 0.8;
                text-align: left;

                &:after {
                    position: absolute;
                    right: 0.25em;
                    content: "\203A";
                    font: bold 1.4em sans-serif;
                }
            }
        }
    }
}