Question

我按照这个网站建立了一个自定义导航菜单：

http://www.adam-bray.com/blog/115/how-to-create-mobile-friendly-html-5-css-3-fixed-responsive-navigation-menu/

但内容未在我的网站上显示，因为它被导航栏覆盖。知道如何解决这个问题吗？

这是我的HTML：

Import-Csv

我的Css：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=US-ASCII">
<title>Home</title>
<link rel="stylesheet" href="styles/nav_bar.css">

<script type="text/javascript"
    src="http://code.jquery.com/jquery-1.5.1.js">

</script>
<script type="text/javascript">
    $(document)
            .ready(
                    function() {
                        $("#navToggle a").click(function(e) {
                            e.preventDefault();

                            $("header > nav").slideToggle();
                            $("#logo").toggleClass("menuUp menuDown");
                        });

                        $(window).resize(function() {
                            if ($(window).width() >= "600") {
                                $("header > nav").css("display", "block");

                                if ($("#logo").attr('class') == "menuDown") {
                                    $("#logo").toggleClass("menuUp menuDown");
                                }
                            } else {
                                $("header > nav").css("display", "none");
                            }
                        });

                        $("header > nav > ul > li > a")
                                .click(
                                        function(e) {
                                            if ($(window).width() <= "600") {
                                                if ($(this).siblings().size() > 0) {
                                                    e.preventDefault();
                                                    $(this)
                                                            .siblings()
                                                            .slideToggle("fast")
                                                    $(this)
                                                            .children(".toggle")
                                                            .html(
                                                                    $(this)
                                                                            .children(
                                                                                    ".toggle")
                                                                            .html() == 'close' ? 'expand'
                                                                            : 'close');
                                                }
                                            }
                                        });
                    });
</script>
</head>
<body>
    <header>
        <div id="logo" class="menuUp">
            <h1>Username</h1>
            <div id="navToggle">
                <a href="#">Menu</a>
            </div>
        </div>
        <nav>
            <ul>
                <li><a href="home.html">Home</a></li>
                <li><a href="biography.html">Biography</a></li>
                <li><a href="interests.html">Interests</a></li>
                <li><a href="resume.html">Resume</a></li>
                <li><a href="contact.html">Contact Me</a></li>
            </ul>
        </nav>
    </header>
    <h1>Welcome to my Website!</h1>
    <p>testData testDatatestData testDatatestData testDatatestData testData
    testData testDatatestData testDatatestData testDatatestData testData
    testData testDatatestData testDatatestData testDatatestData testData
    testData testDatatestData testDatatestData testDatatestData testData
    testData testDatatestData testDatatestData testData</p>



</body>
</html>

Answer 1

此代码工作正常。您的内容不会被导航栏覆盖。它紧随其后。检查元素的位置。您的标题定位为固定。您可以关闭此属性，您将看到您的文本。

如果你想保持它固定，只需延长你的调整大小＆＃39;功能。只需计算标题元素的高度，然后只移动计数值的下一个元素（top或padding属性，如果你足够勇敢，可以移动transform: translateY(y)。

辣椒 150px 的答案并不有用。由于你有90px行高。即使您使用 90px 而不是 150px ，当窗口的大小介于 600px 和 764px <之间时，它也会失败/ em>，因为你的菜单会变大： 2 行 90px 行高，因此你的 180px 高度。导航栏的高度取决于其内容（行数）和行高。元素添加的想法非常好。但是你仍然需要调整事件的大小以使其工作。还有一个元素在你的DOM中。

Answer 2

标题有position:fixed所以它会＆＃34;坚持＆＃34;到页面顶部。既然如此，您需要将所有内容都推到标题下方，因为现在它已落后于它。一种方法是在标题和内容之间插入一个shim div，类似于

</header>
<div style='display:block;height:150px;></div>
<h1>Welcome to my Website!</h1>
//...

请参阅下面的代码段：

＆＃13;

 $(document)
            .ready(
                    function() {
                        $("#navToggle a").click(function(e) {
                            e.preventDefault();

                            $("header > nav").slideToggle();
                            $("#logo").toggleClass("menuUp menuDown");
                        });

                        $(window).resize(function() {
                            if ($(window).width() >= "600") {
                                $("header > nav").css("display", "block");

                                if ($("#logo").attr('class') == "menuDown") {
                                    $("#logo").toggleClass("menuUp menuDown");
                                }
                            } else {
                                $("header > nav").css("display", "none");
                            }
                        });

                        $("header > nav > ul > li > a")
                                .click(
                                        function(e) {
                                            if ($(window).width() <= "600") {
                                                if ($(this).siblings().size() > 0) {
                                                    e.preventDefault();
                                                    $(this)
                                                            .siblings()
                                                            .slideToggle("fast")
                                                    $(this)
                                                            .children(".toggle")
                                                            .html(
                                                                    $(this)
                                                                            .children(
                                                                                    ".toggle")
                                                                            .html() == 'close' ? 'expand'
                                                                            : 'close');
                                                }
                                            }
                                        });
                    });

＆＃13;

* {
    margin: 0;
    padding: 0;
    outline: none;
    box-sizing: border-box;
}

body {
    background: #eee;
    color: #444;
    -webkit-font-smoothing: antialiased;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light",
        "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 300;
    font-weight: 400;
    height: auto !important;
    height: 100%;
    min-height: 100%;
    text-rendering: optimizeLegibility;
}

header {
    background-color: rgb(140, 193, 193);
    border-bottom: 1px solid rgba(0, 0, 0, .15);
    display: flex;
    flex-direction: column;
    text-align: center;
}

header>div#logo {
    line-height: 70px;
    position: relative;
}

header>.menuDown {
    box-shadow: 0 3px 5px rgba(0, 0, 0, .15);
}

header>.menuUp {
    box-shadow: none;
}

header>div#logo>h1 {
    color: white;
    font-weight: 300;
    text-transform: lowercase;
}

header>div#logo>div#navToggle {
    background-color: rgba(0, 0, 0, .15);
    position: absolute;
    right: 0;
    top: 0;
    transition: 300ms all ease;
}

header>div#logo>div#navToggle:hover {
    background-color: rgba(0, 0, 0, .1);
}

header>div#logo>div#navToggle>a {
    color: rgba(255, 255, 255, .85);
    display: block;
    font-size: 0.85em;
    font-weight: 600;
    padding: 0 2.5rem;
    text-decoration: none;
    transition: 300ms all ease;
}

header>div#logo>div#navToggle:hover>a {
    color: rgba(255, 255, 255, 1);
}

header>nav {
    background-color: white;
    display: none;
    flex: 1;
    transform: 300ms all ease;
}

header nav>ul {
    list-style-type: none;
}

header nav>ul>li {
    border-bottom: 1px dotted rgba(0, 0, 0, .1);
    position: relative;
}

header nav>ul>li:last-of-type {
    border-bottom: none;
}

header nav>ul>li>a {
    display: block;
    color: rgba(0, 0, 0, .65);
    font-weight: 700;
    padding: 1.5rem 0;
    text-decoration: none;
    transition: 250ms all ease;
}

header>nav>ul>li:hover>a {
    color: rgb(140, 193, 193);
}

header>nav>ul>li>nav {
    background-color: rgb(51, 51, 51);
    border-radius: 1.5em;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .6);
    display: none;
    overflow: hidden;
    position: absolute;
    right: 5%;
    width: 90%;
    z-index: 100;
}

header>nav>ul>li>nav>ul>li>a {
    color: rgba(255, 255, 255, .85);
    transition: 300ms all ease;
}

header>nav>ul>li>nav>ul>li:hover>a {
    background-color: rgba(0, 0, 0, .6);
    color: rgba(255, 255, 255, 1);
}

/* Medium screens */
@media all and (min-width: 600px) {
    header>div#logo>div#navToggle {
        display: none;
    }
    header {
        background-color: white;
        flex-direction: row;
        line-height: 90px;
        padding: 0 3rem;
        position: fixed;
        text-align: left;
        width: 100%;
    }
    header>div#logo {
        background-color: transparent;
        line-height: 90px;
    }
    header>div#logo>h1 {
        color: rgb(140, 193, 193);
    }
    header>nav {
        background-color: transparent;
        display: block;
    }
    header>nav>ul {
        display: flex;
        flex-flow: row wrap;
        justify-content: flex-end;
    }
    header nav>ul>li {
        border-bottom: none;
    }
    header nav>ul>li>a {
        padding: 0 1.25rem;
    }
    header>nav>ul>li:hover>nav {
        background-color: rgb(51, 51, 51);
        border-radius: .25em;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .6);
        display: block;
        line-height: 3em;
        right: -50%;
        width: 196px;
    }
}

＆＃13;

<header>
        <div id="logo" class="menuUp">
            <h1>Username</h1>
            <div id="navToggle">
                <a href="#">Menu</a>
            </div>
        </div>
        <nav>
            <ul>
                <li><a href="home.html">Home</a></li>
                <li><a href="biography.html">Biography</a></li>
                <li><a href="interests.html">Interests</a></li>
                <li><a href="resume.html">Resume</a></li>
                <li><a href="contact.html">Contact Me</a></li>
            </ul>
        </nav>
    </header>
<div style='display:block;height:100px;'></div>
    <h1>Welcome to my Website!</h1>
    <p>testData testDatatestData testDatatestData testDatatestData testData
    testData testDatatestData testDatatestData testDatatestData testData
    testData testDatatestData testDatatestData testDatatestData testData
    testData testDatatestData testDatatestData testDatatestData testData
    testData testDatatestData testDatatestData testData</p>

＆＃13;

自定义菜单隐藏我的网站内容

2 个答案: