Question

单击按钮时，按钮会显示菜单，虽然它不会将内容向下推，但它只是在它上面，你无法看到它。我尝试过改变.navbar的位置，但没有任何作用，我删除了导航栏的背景颜色，看看侧边栏和主要部分是否已经消失，或者它们是否在它后面（它在后面）。提前谢谢！

<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="script.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--[if lt IE 9]>
        <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
    <![endif]-->
</head>
<body>
    <header>
        <img class="logo" src="arm.png">
    </header>
    <nav>
        <img class="menuicon" src="menu.png">
        <ul class="navbar">
            <li><a href="index.html">Home</a></li>
            <li><a href="aboutus.html">About Us</a></li>
            <li><a href="prices.html">Prices</a></li>
            <li><a href="ourwork.html">Our Work</a></li>
            <li><a href="contactus.html">Contact Us</a></li>
        </ul>
    </nav>
    <div class="container">
        <div class="sidebar">
            test
        </div>
        <div class="main">
            test
        </div>
    </div>
</body>
</html>

/* CSS */

nav {
background-color: ;
width: 100%;
height: 35px;
}

.menuicon {
width: 35px;
float: right;
}

.hidden {
display: none;
}

.navbar {
list-style: none;
margin: 0 auto;
padding: 0 3px;
width: 100%;
background-color: ;
position: relative;
top: 35px;
}

nav li {
width: 100%;
border-left: 0;
text-align: center;
background-color: ;
border-bottom: 1px solid black;
position: relative;
}

nav li:nth-of-type(1) {
border-top: 1px solid black;
}

nav li a {
font-size: 25px;
text-decoration: none;
}

.sidebar {
width: 100%;
background-color: blue;
}

.main {
width: 100%;
background-color: red;
}

JQUERY
$(document).ready(function() {
    $(".navbar").toggleClass("hidden");
    $(".menuicon").click(function() {
        $(".navbar").toggleClass("hidden");
    });
});

移动按钮菜单（下拉菜单）继续进行内容

0 个答案: