Question

我的新网站出现问题，导航会出现两次，一次出现在原来的位置，第二次出现在左下角。它创造了一个新的div，我不知道它来自哪里

我认为一个例子可以帮助你更好地理解它：

我尝试将其上传到jsfiddle以便您可以更好地看到它但我遇到了麻烦所以我将其上传到免费的虚拟主机：https://kartis.000webhostapp.com/contact.php 您可以在左下角看到问题。

HTML：

<head>
        <title>kartiSell</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta charset="utf-8">
        <meta name="description" content="Yoav Levy">
        <meta name="keywords" content="Yoav Levy">
        <meta name="author" content="Yoav Levy">
        <meta name="robots" content="index, follow">
        <meta name="revisit-after" content="1 day">
        <meta name="expires" content="Wed, 21 Feb 2080 21:18:48 GMT">
        <meta http-equiv="imagetoolbar" content="no">
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
        <link rel="stylesheet" href="assets/css/css.css" />
        <link rel="icon" href="images/ico.png" sizes="32x32" />
<link rel="icon" href="images/ico.png" sizes="192x192" />
    </head>
    <body>

        <!-- Header -->
            <header id="header">
                <div class="inner">
                    <a href="index.html" class="logo"></a>
                    <nav id="nav">
                        <a href="index.php">Home</a>
                        <a href="login.php">Sign in</a>
                        <a href="signup.php">Sign up</a>
                        <a href="sell.php">SELL</a>
                        <a href="contact.php">Contact us</a>
                    </nav>

                </div>

            </header>
            <!-- Sells -->
<div id=content>

            safdsfasdf


</div>
        <!-- Scripts -->
            <script src="assets/js/jquery.min.js"></script>
            <script src="assets/js/skel.min.js"></script>
            <script src="assets/js/util.js"></script>
            <script src="assets/js/main.js"></script>



</div></body>
</html>

CSS：

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
@-ms-viewport{
  width: device-width;
}

body {
    line-height: 1;
}

ol, ul {
    list-style: none;
}

body {
    -webkit-text-size-adjust: none;
}
body {
    position: relative;
    padding-top: 6em;
}
header {
    position: fixed;
}

@media only screen and (max-width: 720px) {
     header { position: absolute; }

}
#header {
    background: #ffffff;
    color: #d5d5d5;
    cursor: default;
    height: 85px;
    left: 0;
    line-height: 5em;
    position: fixed;
    text-align: right;
    top: 0;
    width: 100%;
    z-index: 10001;
    box-shadow: 0px 5px 10px #c0c0c0;
}

    #header .inner {
        width:100%;
        height:inherit;
        margin: 0 auto;
        max-width: 1500px;
        position: relative;
        margin-top: -10px;

    }

        @media screen and (max-width: 480px) {

            #header .inner {
                max-width: 100%;
                width: 100%;

            }
            #nav {
                margin-top: 1em;
        }

        }

    #header .logo {
        display: inline-block;
        line-height: inherit;
        margin: -2px;
        padding: 0;
        position: absolute;
        top: 0;
        padding: 0;
        left: 0;
        width:341px;
        height: 50px;
        margin-top: 10px;
        background-image: url('/images/logo.png');
    }

        #header .logo:hover {
            background-image: url('/images/logohover.png');
        }

    #header a {
        -moz-transition: color 0.4s ease-in-out;
        -webkit-transition: color 0.4s ease-in-out;
        -ms-transition: color 0.4s ease-in-out;
        transition: color 0.4s ease-in-out;
        display: inline-block;
        padding: 0 5em;
        margin-right:10px;
        color: #000000;
        text-decoration: none;
        text-transform: uppercase;
        font-weight: 700;
        font-size: .85em;
        margin-top: 0em;
    }

        #header a:hover {
            color: #ff001e;
        }


        @media screen and (max-width: 736px) {
            #nav {
                margin-top: 1em;
        }
            #header a {
                padding: 0 0.5em;
            }
        }

@media screen and (max-width: 480px) {

    #header {
        min-width: 320px;

    }
}
#nav {
    margin-top: 1em;
}

@media screen and (max-width: 980px) {

    #nav {
        margin-top: 1em;
        display: none;
    }

}

@media screen and (max-width: 980px) {
    #nav {
        margin-top: 1em;
}

}

图片：https://ibb.co/kM52BF

Answer 1

我认为main.js中代码的这一部分导致了这个问题：

        // Navigation Panel Toggle.
            $('<a href="#navPanel" class="navPanelToggle"></a>')
                .appendTo($body);

        // Navigation Panel.
            $(
                '<div id="navPanel">' +
                    $('#nav').html() +
                    '<a href="#navPanel" class="close"></a>' +
                '</div>'
            )
                .appendTo($body)

Answer 2

将display：none！赋予特定ID：

#navPanel
{
display:none !important;
}

请检查它是否会影响网页中的任何位置。

Answer 3

认为问题出在您页面中的js上。请从main.js

中删除行（49-63）

希望这能解决问题

左下方的HTML / CSS双导航

3 个答案: