Почему я не могу щелкнуть теги привязки для моей навигационной панели? - PullRequest
Новая
       14

Почему я не могу щелкнуть теги привязки для моей навигационной панели?

0 голосов
/ 14 мая 2019

Может кто-нибудь сказать мне, почему я не могу кликнуть по своим тегам привязки?

Я прикрепил свой код к jsfiddle.Просто прокрутите вниз в поле вывода.Это не показывает прямо там, потому что изображение отсутствует.https://jsfiddle.net/ydntL72f/1/

Я перепутался со свойством z-index css, но не могу заставить его работать с этим. 

@font-face {
    font-family: 'Gotham';
    src: url("Control Panel/Appearance and Personalization/Fonts/Gotham XLight");
}

@font-face {
    font-family: 'Prime';
    src: url(../fonts/Prime-Regular.ttf);
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

body {
    font-family: 'Gotham';
}

/* Count Down Timer */
.bgimg {
    background: url(../img/background-image.jpg);
    height: 100%;
    background-position: center;
    background-size: cover;
    position: relative;
    color: #000;
    font-family: 'Prime';
}

.middle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    padding: 20px 100px;
}

#logo {
    width: 100px;
}

h1 {
    font-size: 40px;
    letter-spacing: 30px;
    font-weight: 100;
    text-shadow: 5px white;
}

#demo {
    font-weight: lighter;
    word-spacing: 20px;
}

hr {
    margin: auto;
    width: 80%;
    border: 1.5px solid #000;
}

/* Nav Bar */
header {
    width: 100%;
    height: 100vh;
    background: url(../img/background-image.jpg) no-repeat 50% 50%;
    background-size: cover;
}

.content {
    width: 90%;
    margin: 4em auto;
    font-size: 20px;
    line-height: 30px;
    text-align: justify;
}

.logo {
    position: fixed;
    float: left;
    margin: 16px 36px;
    color: #fff;
    font-weight: bold;;
    font-size: 24px;
}

nav {
    position: fixed;
    width: 100%;
}

nav ul {
    list-style: none;
    background: rgba(0, 0, 0, 0);
    overflow: hidden;
    color: #fff;
    padding: 0;
    text-align: center;
    margin: 0;
    transition: 1s;
}

nav.black ul {
    background: #000;
}

nav ul li {
    display: inline-block;
    padding: 20px;
}

nav ul li a {
    text-decoration: none;
    color: #fff;
    font-size: 20px;
    z-index: 1;
}

.menu-icon {
    width: 100%;
    background: #000;
    text-align: right;
    box-sizing: border-box;
    padding: 15px 24px;
    cursor: pointer;
    color: #fff;
    display: none;
}

@media(max-width: 760px) {

    /* Nav Bar */
    .logo {
        position: fixed;
        top: 0;
        margin-top: 16px;
    }

    nav ul {
        max-height: 0px;
        background: #000;
    }

    nav.black ul {
        background: #000;
    }

    .showing {
        max-height: 20em;
    }

    nav ul li {
        box-sizing: border-box;
        width: 100%;
        padding: 24px 0;
        text-align: center;
    }

    .menu-icon {
        display: block;
    }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Home | Tyler Kautz</title>
    <link rel="stylesheet" href="css/stylesheet.css">
    <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
</head>
<body>
    
    <div class="wrapper">
        <header>
            <nav>
                <div class="menu-icon">
                    <i class="fa fa-bars fa-2x"></i>
                </div>
                <div class="logo">
                    LOGO
                </div>
                <div class="menu">
                    <ul>
                        <li><a href="index-new.html"></a>Home</li>
                        <li><a href="index-new.html"></a>About</li>
                        <li><a href="index-new.html"></a>Blog</li>
                        <li><a href="index-new.html"></a>Contact</li>
                    </ul>
                </div>
            </nav>
        </header>

        <div class="content">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eros sapien, lacinia et nibh at, blandit lacinia ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec malesuada leo libero. Aliquam ut tincidunt quam, ac congue lectus. Quisque vulputate ut urna vitae dapibus. Donec vel tempor nibh, eu ornare sem. Duis rhoncus pulvinar tortor blandit aliquet.
                Vestibulum non nulla facilisis, dapibus velit ut, fringilla urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque et dignissim augue. Mauris neque ante, egestas vel eros ut, sagittis varius justo. Curabitur ut lacus quis turpis vulputate efficitur. Morbi sed porta felis. Donec faucibus pretium eros sed porttitor. Cras finibus vel diam quis euismod. Morbi id velit sit amet ante tempor ultricies. Duis egestas, est a vulputate convallis, nisi urna interdum dolor, volutpat volutpat lorem mi et sem.
            </p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eros sapien, lacinia et nibh at, blandit lacinia ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec malesuada leo libero. Aliquam ut tincidunt quam, ac congue lectus. Quisque vulputate ut urna vitae dapibus. Donec vel tempor nibh, eu ornare sem. Duis rhoncus pulvinar tortor blandit aliquet.
                Vestibulum non nulla facilisis, dapibus velit ut, fringilla urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque et dignissim augue. Mauris neque ante, egestas vel eros ut, sagittis varius justo. Curabitur ut lacus quis turpis vulputate efficitur. Morbi sed porta felis. Donec faucibus pretium eros sed porttitor. Cras finibus vel diam quis euismod. Morbi id velit sit amet ante tempor ultricies. Duis egestas, est a vulputate convallis, nisi urna interdum dolor, volutpat volutpat lorem mi et sem.
            </p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eros sapien, lacinia et nibh at, blandit lacinia ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec malesuada leo libero. Aliquam ut tincidunt quam, ac congue lectus. Quisque vulputate ut urna vitae dapibus. Donec vel tempor nibh, eu ornare sem. Duis rhoncus pulvinar tortor blandit aliquet.
                Vestibulum non nulla facilisis, dapibus velit ut, fringilla urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque et dignissim augue. Mauris neque ante, egestas vel eros ut, sagittis varius justo. Curabitur ut lacus quis turpis vulputate efficitur. Morbi sed porta felis. Donec faucibus pretium eros sed porttitor. Cras finibus vel diam quis euismod. Morbi id velit sit amet ante tempor ultricies. Duis egestas, est a vulputate convallis, nisi urna interdum dolor, volutpat volutpat lorem mi et sem.
            </p>
        </div>
    </div>

    <script type="text/javascript">
    
        // Menu Toggle-Button
        $(document).ready(function() {
            $(".menu-icon").on("click", function() {
                $("nav ul").toggleClass("showing");
            });
        });

        // Scrolling Effect
        $(window).on("scroll", function() {
            if($(window).scrollTop()) {
                $('nav').addClass('black');
            }
            else {
                $('nav').removeClass('black');
            }
        });

    </script>

</body>
</html>

Кликабельные теги привязки.

1 Ответ

2 голосов
/ 14 мая 2019

Ваши ссылки не содержат ничего, на что можно щелкнуть - они просто пусты. 

      <li><a href=""></a>About</li>
      <li><a href=""></a>Blog</li>
      <li><a href=""></a>Contact</li>

Как видите, между открывающим и закрывающим тегом <a> ничего нет.

Лучше сделай так: 

      <li><a href="">About</a></li>
      <li><a href="">Blog</a></li>
      <li><a href="">Contact</a></li>
...