Почему мои навигационные ссылки не меняются при наведении курсора? - PullRequest
Новая
       48

Почему мои навигационные ссылки не меняются при наведении курсора?

0 голосов
/ 06 ноября 2019

На мобильных и настольных компьютерах, когда я наводю указатель мыши на ссылки, они не выполняют заданный им код наведения, и я не могу понять, почему. Эта навигационная панель принадлежит текущему веб-сайту, который я пытаюсь перекодировать, чтобы он был доступен. Первоначально у меня было два отдельных меню в моем коде, одно для настольных компьютеров и одно для мобильных устройств. С тех пор я узнал, что это большое нет, и в основном объединил два меню и их CSS для их соответствующих размеров экрана. Но теперь результат: опция hover больше не работает. Также меню гамбургера не анимируется так, как должно. Оно должно превратиться в X. Что я тут не так сделал? 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <!-- Favicons -->
    <link rel="apple-touch-icon" sizes="76x76" href="apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
    <link rel="manifest" href="site.webmanifest">
    <link rel="mask-icon" href="safari-pinned-tab.svg" color="#5bbad5">
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="theme-color" content="#ffffff">
    <meta name="description" content="Color and Tone Painting offers the best service in Seattle for the best 
                                      price.  We're locally owned and operated We offer FREE ESTIMATES to everyone 
                                      with no obligation to purchase anything.">

    <!-- Stylesheets -->
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Color And Tone Painting | Seattle, WA</title>

</head>

<body>
    <header>
        <section id="navbar">
            <!-- Navigation Topper -->
            <div class="topper-wrapper">
                <div class="container topper-flex">
                    <div class="topper-content">
                        <i aria-hidden="true" class="fas fa-phone"></i>
                        <p class="topper-content">(206) 913-9212</p>
                        <i aria-hidden="true" class="fas fa-envelope"></i>
                        <p class="topper-content">colorandtonepainting@gmail.com</p>
                        <i aria-hidden="true" class="fas fa-map-marker-alt"></i>
                        <p class="topper-content">645 SW 142nd St Burien WA, 98166</p>
                    </div>
                </div>
            </div>

            <!-- Middle navigation -->
            <div id="brand">
                <div class="brand-bar container">
                    <img src="images/mobile-logo.png" alt="company_logo" height="80" width="293">
                    <div class="branding-bar container">
                        <div class="quote">
                            <i class="fas fa-envelope-open-text"></i>
                            <div class="quote-block">
                                <p>NEED AN ESTIMATE</p>
                                <p>SEND US AN EMAIL</p>
                            </div>
                        </div>
                        <div class="call">
                            <i class="fas fa-phone-volume"></i>
                            <div class="call-block">
                                <p>CALL US NOW</p>
                                <p>(206) 913-9212</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Desktop Navbar -->
        <div class="mobile-wrapper">
            <div class="mobile-nav container">
                <img id="mobile-logo-1" src="images/mobile-logo.png" alt="mobile_company_logo" height="60"> 

                <!-- Hamburger Menu -->
                <button aria-label="open the menu" id="menu-button" class="hamburger hamburger--spring" onclick="toggleNav()" type="button">
                    <span aria-hidden="true" class="hamburger-box">
                        <span aria-hidden="true" class="hamburger-inner"></span>
                    </span>
                </button>
            </div>
        </div>

        <nav>
            <div class="navbar-menu">
                <div id="side-menu" class="container side-nav">
                    <ul id="on-top" class="navbar-links">
                        <li><a class="active" href="index.html">HOME</a></li>
                        <li><a href="html/about.html">ABOUT</a></li>
                        <li><a href="html/portfolio.html">PORTFOLIO</a></li>
                        <li><a href="html/services.html">SERVICES</a></li>
                        <li><a href="html/contact.html">CONTACT US</a></li>
                    </ul>
                </div>
            </div>
        </nav>

    </header>

/* Global styles */

:root {
    --main-red: #A51D40;
}

body, html {
    margin: 0;
    padding: 0;
}

* {
    font-family: 'Lato', sans-serif;
}

.container-2 {
    padding: 0 2em;
    margin: 0;
}

.container {
    padding: 0 2em;
    margin: 0;
    max-width: 330px;
}

.mobile-wrapper {
    background: #fff;
    border-bottom: 5px solid #A51D40;
    height: 100px;
}

p, h1, h2, h3, h4, h5, h6 {
    text-align: center;
}

/* hidden desktop elements */

.topper-flex,
#brand,
.call-strip-button {
    display: none;
}

/* Buttons */
.button-solid {
    background: #A51D40;
    border-radius: 25px;
    border: none;
    color: #fff;
    width: auto;
    height: 50px;
    margin: 10px 0;
    padding: 0 30px;
    font-size: 13px;
    width: auto;
    -webkit-transition: .3s ease;
    -o-transition: .3s ease;
    transition: .3s ease;
}

.button-solid:hover {
    color: var(--main-red);
    background: #fff;
    border: 1px solid var(--main-red);
}

.button-transparent {
    display: inline-block;
    background: transparent;
    border-style: solid;
    border-width: 2px;
    border-color: #fff;
    font-size: 15px;
    margin: 10px 0;
    padding: 6px 30px;
    color: #FFFFFF;
    text-decoration: none;
    -webkit-animation-delay: 0.6s;
            animation-delay: 0.6s;
    border-radius: 25px;
    white-space: nowrap;
    float: left;
    height: 50px;
    -webkit-transition: .3s ease;
    -o-transition: .3s ease;
    transition: .3s ease;
}

.button-transparent:hover {
    color: #fff;
    background: var(--main-red);
    border: none;
}

.hamburger {
    padding: 0;
    display: inline-block;
    cursor: pointer;
    transition-property: opacity, filter;
    transition-duration: 0.15s;
    transition-timing-function: linear;
    font: inherit;
    color: inherit;
    text-transform: none;
    background-color: transparent;
    border: 0;
    margin: 0;
    overflow: visible;
    position: relative;
    z-index: 2000;
}
.hamburger:hover {
    opacity: 0.7;
    cursor: pointer;
}
.hamburger.is-active:hover {
    opacity: 0.7;
    cursor: pointer;
}
.hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner::before, .hamburger.is-active .hamburger-inner::after {
    background-color: #000;
}
.hamburger-box {
    width: 30px;
    height: 24px;
    display: inline-block;
    position: relative;
    z-index: 2000;
}
.hamburger-inner {
    display: block;
    top: 50%;
    margin-top: -2px;
}
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 30px;
    height: 3px;
    background-color: #000;
    border-radius: 4px;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease;
}
.hamburger-inner::before, .hamburger-inner::after {
    content: "";
    display: block;
}
.hamburger-inner::before {
    top: -10px;
}
.hamburger-inner::after {
    bottom: -10px;
}

/* * Spring */
.hamburger--spring .hamburger-inner {
    top: 2px;
    transition: background-color 0s 0.13s linear;
    transition-delay: .22s;
}
.hamburger--spring .hamburger-inner::before {
    top: 10px;
    transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
    transition-delay: .22s;
}
.hamburger--spring .hamburger-inner::after {
    top: 20px;
    transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
    transition-delay: .22s;
}
.hamburger--spring.is-active .hamburger-inner {
    transition-delay: 0.22s;
    background-color: transparent !important;
}
.hamburger--spring.is-active .hamburger-inner::before {
    top: 0;
    transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 10px, 0) rotate(45deg);
}
.hamburger--spring.is-active .hamburger-inner::after {
    top: 0;
    transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 10px, 0) rotate(-45deg);
}

/*-- -------------------------- -->
<---         NAVIGATION         -->
<--- -------------------------- -*/

.navbar-menu {
    background:  #231F20;
}

.mobile-nav {
    height: 100px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

#side-menu {
    background:  #231F20;
    position: relative;
    z-index: 5;
    padding: 0;
}

.side-nav {
    visibility: hidden;
    height: 0;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s 
}

.active {
    color: var(--main-red);
    background: #fff;
    padding:  7px 40px;
    border-radius: 20px;
}

ul {
    text-align: center;
    padding: 30px 0;
    margin: 0;
}

ul a {
    text-decoration: none;
    color: #fff;
    line-height: 2em;
    font-weight: 700;
    -webkit-transition: 0.3s ease;
    -o-transition: 0.3s ease;
    transition: 0.3s ease;
}

ul li {
    list-style: none;
}

ul#on-top {
    margin-bottom: 0;
}

ul#on-top li a:hover {
    text-decoration: none;
    color: var(--main-red);
    opacity: .4;
}

@media screen and (min-width: 1025px) {

    /*-- -------------------------- -->
    <---         NAVIGATION         -->
    <--- -------------------------- -*/

    /* Page Wide */
    .container {
        max-width: 980px;
        padding: 0 2em;
        margin: auto;
    }

    header {
        height: 240px;
    }

    nav {
        position: relative;
        z-index: 2000;
    }

    .side-nav a {
        opacity: 1;
        visibility: visible;
    }

    .topper-flex,
    #brand,
    .navbar-menu,
    .mobile-nav {
        display: block;
    }

    .mobile-nav, .mobile-wrapper {
        display: none;
    }

    .open-slide {
        display: none;
    }

    #on-top {
        position: relative;
        z-index: 1000;
    }

    /* Topper */
    .topper-wrapper {
        background: #0e1111;
        width: 100%;
        height: 50px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }

    .topper-flex {
        background: #0e1111;
        width: 100%;
        margin: auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }

    .topper-content {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
    }

    .topper-content i {
        margin-right: 10px;
        color: #fff;
        margin: auto 16px;
    }

    .topper-content p {
        margin-right: 25px;
        margin-bottom: 0;
        color: #fff;
    }

    /* Branding Bar */
    .brand-bar {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        height: 130px;
        width: auto;
    }

    .quote {
        margin-right: 50px;
    }

    .branding-bar {
        width: 500px !important;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        padding:  0;
        margin: 0 !important;
    }

    .quote i {
        color: var(--main-red);
        font-size: 45px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        margin-right: 25px;
    }

    .call i {
        color: var(--main-red);
        font-size: 45px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        margin-right: 25px;
    }

    .quote {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        width: auto;
    }

    .quote-block p {
        margin: 0;
    }

    .call {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        width: auto;
    }

    .call-block p {
        margin: 0;
    }

    /* Desktop Navbar */
    #navbar {
        height: auto;
    }

    .navbar-menu {
        width: auto;
        height: 60px;
        border-top: 1px solid rgba(118, 118, 118, .5);
    }

    ul.navbar-links {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        float: left !important;
        padding: 0;
        height: 60px;
        margin-bottom: 0;

    }

    .navbar-menu {
        width: 100%;
        height: auto;
        display: block;
        position: relative;
        z-index: 1000;
    }

    .navbar-links li a {
        width: auto;
        text-align: left;
        padding: 18px 20px;
        margin-right: 10px;
        color:  #414141;
    }

    .test:hover {
        color: var(--main-red);
        opacity: .7;
        text-decoration: none;
        cursor: pointer;
        position: relative;
        z-index: 1000;
    }

    .active {
        color: var(--main-red) !important;
        border-top: 4px solid var(--main-red);
        border-radius: 0;
    }

    .navbar-links li {
        width: auto;
        text-align: left;
        float: left;
        margin: 10px 10px 10px 0;
    }

/* jQuery for the navigation animation */

$("#wrapper").click( function() {
    $(".menu").toggleClass("close");
});

/* Code for the toggling of the navbar */

/* Code for the toggling of the navbar */

let toggleNavStatus = false;

let toggleNav = function () {
    let getSidebar = document.querySelector(".side-nav");
    let getSidebarUL = document.querySelector(".side-nav ul");
    let getSidebarLinks = document.querySelectorAll(".side-nav a");

    if (toggleNavStatus === false) {
        getSidebarUL.style.visibility = "visible";
        getSidebar.style.visibility = "visible";

         getSidebarLinks.forEach((item, index)=>{
          console.log(item);
          item.style.opacity = "1";
         })
        getSidebar.style.height = "220px";

        toggleNavStatus = true;
    } 

    else if (toggleNavStatus === true) {
        getSidebarUL.style.visibility = "hidden";

         getSidebarLinks.forEach((item, index)=>{
          item.style.opacity = "0";
         })
        getSidebar.style.height = "0";

        toggleNavStatus = false;
    }
}
...