Question

我正在帮我的一个朋友为他的网站创建一个可折叠的汉堡包菜单，但我有点卡住..明天我们有一个截止日期，所以我们有点匆忙..

我的这位朋友，他创建了一个基于div的菜单结构，它工作正常，汉堡图标显示为想要的。我们想要的是：当屏幕尺寸低于1000px时，菜单会崩溃。我知道这种创建菜单结构的方式不太正常，但我不想在他的项目的现有代码上做很多改变，因为这是他的源代码。

我尝试了这个（create hamburger menu in javascript）帖子中的可折叠菜单。在这种情况下，我添加了一个列表，其中包含所有超链接并为homebanner提供z-index，以便菜单在图像后面滑动，但这不起作用。有谁能够帮我？也许我们应该使用一些JavaScript？无论如何，一个不会影响页面其余部分的解决方案将非常有用。

这是网站HTML：

<!doctype html>
<html>
    <head>
        <title>J&ouml;te Security</title>
        <link href="style.css" type"text/css" rel="stylesheet" />
    <meta charset="utf-8" />
    </head>
    <body>

        <div id="header"><img src="achtergrond.jpg" /></div>

        <div id="menu">

            <div id="nav-btn"></div>

            <a href="pagina1.html"><div id="button1">Homepage</div></a>

            <a href="pagina2.html"><div id="button">Algemeen</div></a>

            <a href="pagina3.html"><div id="button">Camera's</div></a>

            <a href="pagina4.html"><div id="button">Top<span>.</span>5</div></a>  

            <a href="pagina5.html"><div id="button">Test<span>.</span>Camera</div></a>

            <a href="pagina6.html"><div id="button">Werking</div></a>

            <a href="pagina7.html"><div id="button">Contact</div></a>


        </div>

        <div id="page">
                <div class="content"><br></br>
<h2><p> Homepage </p></h2>
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
                </div>
        </div>

        <div id="footer">
            <p class="footertext">Copyright &copy; J&ouml;te Security 2016</p>
        </div>

      </body>
</html>

这是网站CSS：

body {
    background: #FFFFFF; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#dfe3ee, #FFFFFF); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#dfe3ee, #FFFFFF); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#dfe3ee, #FFFFFF); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#dfe3ee, #FFFFFF); /* Standard syntax */
}

img {
width: 100%;
}

span {
visibility: hidden;
}

.navigation {
    max-width: 70%;
    margin: auto;
}

img.header {
    position: absolute;
    z-index: 10;
}

#header {
max-width: 70%;
margin: auto;
}

#button:hover { 
background-color: #bfbfbf;
color: #000000;
}

#button1{
text-align: center;
font-size: 20px; 
font-family: Verdan, sans-serif;
max-height: 100%;
border-radius: 0%;
display: inline-block;
width: 14%;
background-color: #bfbfbf;
color: #000000;
padding-top: 7px;
padding-bottom: 7px;
}

#button {
text-align: center;
font-size: 20px; 
font-family: Verdan, sans-serif;
max-height: 100%;
border-radius: 0%;
display: inline-block;
width: 14%;
background-color: #3b5998;
color: #ffffff;
padding-top: 7px;
padding-bottom: 7px;
}


#menu {
font-size: 0px; 
width: 70%;
background-color: #3b5998;
margin: auto;
text-align: center;
}

#page {
color: #000000;
font-size: 20px; 
font-family: Century Gothic, sans-serif;
width: 70%;
background-color: #ffffff;
text-align: justify;
margin: auto;
padding-bottom: 300px;

}

.content {
max-width: 90%;
margin-left: auto;
margin-right: auto;

}

 .text {
max-width: 70%;
display: inline-block;


} 




.plaatjes {
max-width: 70%;
display: inline-block;
margin-left: 20px;
}
#footer {
color: #ffffff;
font-size: 20px; 
font-family: Verdan, sans-serif;
text-align: center;
width: 70%;
background-color: #3b5998;
text-align: justify;
padding-bottom: 8px;
padding-top: 8px;
margin: auto;
}

p.footertext {
text-align: center;
}

.picture{
height: 180px;
width: 180px;
}

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

   #button {
   display: none;}

#button1 {
   display: none;}

    #page{
   font-size: 14px;
}
}

@media only screen and (device-width: 1300px) {

   #button {
   display: none;}

.picture{
height: 300px;
width: 300px;
}
    #nav-btn { 

background: transparent; 
border-bottom: 20px double #ffffff; 
border-top: 6px solid #ffffff;
height: 6px; 
width: 25px;
margin-left: 5px;
}
    #page{
   font-size: 14px;
}
}

JsFiddle被问到：https://jsfiddle.net/2hupcdp1/：）

免责声明：我自己并没有创建这个网站，我的朋友也是。所以请不要发表评论我需要正确编码。

可折叠[汉堡包]菜单

0 个答案: