[英]How to create an overlay Navigation menu on mobile screens, while having a normal navigation bar on normal screens
[英]How to create an overlay mobile menu?
我想創建一個菜單,當單擊“漢堡包”按鈕時出現。 我自己嘗試這樣做,但由於嘗試的所有方法均無效而感到沮喪。 我想用jQuery做
這是現在的樣子:
這是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">☰</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>
我為您找到了解決方案 。
要么
JS:
$(function(){
$(".toggle-nav").click(function(){
$(".menu").toggleClass("open");
});
});
HTML:
<div class="intro">
<div class="container">
<!-- Navigation -->
<div class="toggle-nav">☰</div>
<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>
<!-- 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%;
}
/* Style for the menu */
/* 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;
display: block;
width: 100%;
}
.intro h1 {
margin: 60px 0 0 0;
}
.intro h3 {
margin-bottom: 30px;
}
.intro h1, .intro h3 {
font-weight: bolder;
text-align: center;
}
.container > .toggle-nav {
text-align: right;
}
.menu.open {
display: block;
}
}
-
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.