4
\$\begingroup\$

I am trying to code a menu that:

Is horizontal on lg+ displays at the top of the page

  • Shows a hamburger menu when the user scrolls from the top
  • Will display as the collapsed format when the hamburger is clicked on desktop and mobile
  • I managed to code this in a way that exhibits all of the proper behaviors, but it feels realllly hackish. I'm thinking there absolutely has to be a better way to accomplish this.

I'd really appreciate it if someone could take a look at this and let me know what the best way to accomplish this is.

Codeply is here: https://www.codeply.com/p/tODl9hO4Xr

Thanks in advance for your advice.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
        <style type="text/css">
            .kc-inside-navigation {
              background: #f4f3f1;
              height: 73px;
              border-bottom: 2px solid #00654e;
            }

            body {
              padding-top: 72px;
            }

            .nav-collapse .menu {
              width: 90%;
              height: 100%;
              float: right;
              background: white;
              -webkit-box-shadow: 20px 3px 29px -28px rgba(0, 0, 0, 0.75);
              -moz-box-shadow: 20px 3px 29px -28px rgba(0, 0, 0, 0.75);
              box-shadow: 20px 3px 29px -28px rgba(0, 0, 0, 0.75);
            }

            .nav-collapse .dropdown-menu {
              position: fixed;
            }

            .nav-collapse .kc-utility-navigation {
              background: #00654e;
            }

            .nav-collapse .kc-utility-navigation ul {
              list-style-type: none;
              padding: 0;
              font-weight: 300;
              font-size: .9rem;
              columns: 2;
              -webkit-columns: 2;
              -moz-columns: 2;
              margin-bottom: 0;
            }

            .kc-inside-navigation .cta-btn {
              color: #fff;
              text-transform: uppercase;
              font-weight: 500;
              padding: 0.5rem;
            }

            @media (min-width: 992px) {
              .kc-inside-navigation .cta-btn {
                margin-right: 1.5rem;
              }
              .kc-inside-navigation .cta-btn:last-child {
                margin-right: 0;
              }
              .kc-inside-navigation .cta-btn span {
                padding-left: 0.5rem;
              }
              .kc-inside-navigation .cta-btn i {
                font-size: 1.5rem;
              }
              .kc-inside-navigation .phone a {
                color: #00654e;
              }
              body {
                padding-top: 110px;
              }
              .nav-expand {
                background: #fff;
              }
              .nav-expand ul.navbar-nav {
                display: flex;
                flex-direction: row;
                height: 40px;
              }
              .nav-expand li.nav-item {
                margin-right: 1.5rem;
              }
              .nav-expand a:link, .nav-expand a:visited {
                color: #00654e;
              }
              .nav-expand .kc-utility-navigation {
                display: none;
              }
              .nav-collapse .menu {
                width: 40%;
              }
            }
        </style>
        <title>Test Item</title>



  </head>
  <body>

        <header class="fixed-top">
            <div class="d-flex kc-inside-navigation">
                <div class="container align-self-center">
                    <div class="d-flex justify-content-between">
                        <a href="index.html" class="navbar-brand align-self-center"><img src="http://placehold.it/250x40" alt="Logo"></a>
                        <div class="kc-cta-buttons d-flex align-self-center">
                            <a class="cta-btn btn-rfi d-flex flex-fill align-self-center" href="boring.html"><span class="align-self-center">Request More Info</span> <i class="align-self-center fas fa-angle-right"></i></a>
                            <a class="cta-btn btn-apply d-flex flex-fill align-self-center" href="#"><span class="align-self-center">Apply Now</span> <i class="align-self-center fas fa-angle-right"></i></a>
                            <a class="cta-btn btn-txt d-flex flex-fill d-lg-none align-self-center" href="sms:5857661304"><span class="align-self-center">Text a Question</span> <i class="align-self-center fas fa-mobile-alt"></i></i></a>
                            <a class="cta-link d-none d-lg-block align-self-center" href="tel:18003353852">1-800-335-3852</a>
                        </div>

                        <div class="align-self-center" style="width: 35px">
                        <button class="navbar-toggler collapsed align-self-center p-0" id="mainNavButton" type="button" data-toggle="collapse" data-target="#theDropdown" aria-controls="theDropdown" aria-expanded="false" aria-label="Toggle navigation" style="display: none"> 
                            <span class="icon"></span><span>Menu</span>
                        </button>
                        </div>

                    </div>

                </div>
            </div>
            <div id="theDropdown" class="nav-expand collapse show">
                <div class="wrapper">
                    <div class="container">
                        <div class="menu">
                            <nav class="">
                                <ul class="navbar-nav" id="mainMenu">
                                    <li class="nav-item dropdown">
                                        <a class="nav-link dropdown-toggle" href="#" id="academicsNavbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            Academics
                                        </a>
                                        <div class="dropdown-menu" aria-labelledby="academicsNavbarDropdown">
                                            <a class="dropdown-item" href="#">Majors and Programs</a>
                                            <a class="dropdown-item" href="#">Evening and Online</a>
                                            <a class="dropdown-item" href="#">Graduate Programs</a>
                                            <a class="dropdown-item" href="#">Field Period®</a>
                                            <a class="dropdown-item" href="#">Experiential Learning</a>
                                            <a class="dropdown-item" href="#">Career Development</a>
                                            <a class="dropdown-item" href="#">Global Education</a>
                                            <a class="dropdown-item" href="#">Your Faculty</a>
                                            <a class="dropdown-item dropdown-toggle" href="#" id="academicResourcesNavbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Resources</a>
                                        </div>
                                    </li>
                                    <li class="nav-item dropdown">
                                        <a class="nav-link dropdown-toggle" href="#" id="admissionsNavbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            Admissions
                                        </a>
                                        <div class="dropdown-menu" aria-labelledby="admissionsNavbarDropdown">
                                            <a class="dropdown-item" href="#">Action</a>
                                            <a class="dropdown-item" href="#">Another action</a>
                                            <a class="dropdown-item" href="#">Something else here</a>
                                        </div>
                                    </li>
                                    <li class="nav-item dropdown">
                                        <a class="nav-link dropdown-toggle" href="#" id="tuitionNavbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            Tuition &amp; Aid
                                        </a>
                                        <div class="dropdown-menu" aria-labelledby="tuitionNavbarDropdown">
                                            <a class="dropdown-item" href="#">Action</a>
                                            <a class="dropdown-item" href="#">Another action</a>
                                            <a class="dropdown-item" href="#">Something else here</a>
                                        </div>
                                    </li>
                                    <li class="nav-item dropdown">
                                        <a class="nav-link dropdown-toggle" href="#" id="lifeNavbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            Life @ KC
                                        </a>
                                        <div class="dropdown-menu" aria-labelledby="lifeNavbarDropdown">
                                            <a class="dropdown-item" href="#">Action</a>
                                            <a class="dropdown-item" href="#">Another action</a>
                                            <a class="dropdown-item" href="#">Something else here</a>
                                        </div>
                                    </li>
                                    <li class="nav-item dropdown">
                                        <a class="nav-link" href="#" id="athleticsNavbarDropdown" role="button">
                                            Athletics
                                        </a>
                                    </li>
                                    <li class="nav-item dropdown">
                                        <a class="nav-link" href="#" id="fpNavbarDropdown">
                                            Field Period®
                                        </a>
                                    </li>
                            </ul>
                                <div class="kc-utility-navigation">
                                    <div class="container ml-0 pl-0 ml-lg-auto pl-lg-auto" id="kc-utility-container">
                                        <ul class="something">
                                            <li class="nav-item"><a href="#" class="nav-link">KC Portal</a></li>
                                            <li class="nav-item"><a class="nav-link">Directory</a></li>
                                            <li class="nav-item"><a class="nav-link">About</a></li>
                                            <li class="nav-item"><a class="nav-link">Library</a></li>
                                            <li class="nav-item"><a class="nav-link">Email</a></li>
                                            <li class="nav-item"><a class="nav-link">News &amp; Events</a></li>
                                            <li class="nav-item"><a class="nav-link">Alumni</a></li>
                                            <li class="nav-item"><a class="nav-link">Make a Gift</a></li>
                                        </ul>   
                                    </div>
                            </div>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </header>

        <div style="height: 1000px;"></div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->


    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

    <script type="text/javascript">
    $(document).ready(function () {
        changeNavbar();

        $(window).resize(function () {
            changeNavbar();
        });

        $(window).scroll(function () {
            changeNavbar();
        });

        function changeNavbar() {
            var theDropdown = $("#theDropdown");
            var windowWidth = $(window).width();


            if (windowWidth < 992) {
                // if it's xs, xm, or md, just keep the navbar collapsed.
                theDropdown.removeClass("nav-expand show").addClass("nav-collapse");
                $('.kc-inside-navigation .navbar-toggler').show();  
            } else {

                if ($(this).scrollTop() >= 100) {
                    if (theDropdown.hasClass('show') && (theDropdown.hasClass('nav-collapse'))) {
                        // do nothing because the user has expanded the collapse and is scrolling.
                    } else {
                        $('.kc-inside-navigation .navbar-toggler').fadeIn();
                        theDropdown.removeClass("nav-expand show").addClass("nav-collapse");
                    }
                } else {
                    theDropdown.removeClass("nav-collapse").addClass("nav-expand show");
                    $('.kc-inside-navigation .navbar-toggler').addClass("collapsed");
                    if (windowWidth > 992) {
                        $('.kc-inside-navigation .navbar-toggler').fadeOut();   
                    }
                }   
            }
        }

        $(".kc-inside-navigation .navbar-toggler").click(function() {
            var menuTarget = $(this).data('target');
            menuTarget.toggle();
        });
    });
    </script>


  </body>
</html>
\$\endgroup\$
  • \$\begingroup\$ Welcome to the code review website. Is the code working as expected? Are all the features you want in the code implemented? On this website we review code and provide suggestions on how the code can be improved. We can't help you implement features that are not implemented yet. \$\endgroup\$ – pacmaninbw Dec 24 '19 at 15:02
  • \$\begingroup\$ Yes. It's doing everything I need, but I feel like it's a bit hackish. Just looking for ways to improve it. \$\endgroup\$ – Pete Dec 24 '19 at 15:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.