gpt4 book ai didi

javascript - 如何创建覆盖移动菜单?

转载 作者:行者123 更新时间:2023-11-28 03:34:08 24 4
gpt4 key购买 nike

我想创建一个在单击汉堡包按钮时出现的菜单。我试着自己做,但我很沮丧,因为我尝试的一切都不奏效。我想用 jQuery 来做

现在是这样的:

enter image description here

这是 HTML:

<div class="intro">
<div class="container">

<!-- Navigation -->

<div class="menu">
<ul class="navigation">
<li><a href="#">HOME</a></li>
<li><a href="#contactMe" class="jump-contact">CONTACT</a></li>
<li><a href="#">BLOG</a></li>
<li><a href="#myWork" class="jump-work">MY WORK</a></li>
</ul>
</div>

<div class="toggle-nav">&#9776;</div>

<!-- Intro Section -->

<h1>Nelson Lupanda</h1>
<h3>Front End Developer</h3>
</div>
</div>

这是 CSS

html, body {
width: 100%;
height: 100%;
margin: 0px;
font-weight: lighter;
}

@media only screen and (min-width: 380px) and (max-width: 500px) and
(orientation:portrait), (max-width:480px) and (orientation:landscape) {

html {
font-size: 16px;
}

* {
box-sizing:border-box;
moz-box-sizing:border-box;
webkit-box-sizing:border-box;
}

hr {
size:1;
width: 15%;
}

/* intro section */

.intro {
background-color: #f2f2f2;
height: auto;
width: 100%;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
}

.intro .container {
height: 100%;
padding: 20px 15px 50px 15px;
}

.intro .menu {
text-align: center;
display: none;
}

.intro .menu ul {
background-color: #f2f2f2;
}

.intro .menu li {
display: block;
list-style: none;
margin-top: 10px;
}

.intro .menu li a {
text-decoration: none;
color: #000000;
}

.intro .toggle-nav {
float: right;
clear: right;
margin-right: 20px;
font-size: 1.5rem;
cursor: pointer;
}

.intro h1 {
margin: 60px 0 0 0;
}

.intro h3 {
margin-bottom: 30px;
}

.intro h1, .intro h3 {
font-weight: bolder;
text-align: center;
}

}

最佳答案

这只是一个简单的入门示例,只需将一个 div 放在所有内容之上(您可能必须使用 z-index)并在单击某些内容时切换隐藏和显示叠加层。

$(document).ready(function() {
$('.menu').on('click', function() {
$('.overlay').show();
});
$('.close').on('click', function() {
$('.overlay').hide();
})
})
.content {
width: 100%;
height: 20000px;
background-color: yellow;
}
.menu {
margin-left: 1rem;
margin-top: 1rem;
}
.overlay {
background-color: rgba(0,0,0,.8);
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
display:none;
}
.close {
margin-left: 1rem;
margin-top: 1rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<div class="overlay">
<button class="close">close</button>
</div>
<button class="menu">menu</button>
</div>

关于javascript - 如何创建覆盖移动菜单?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44575625/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com