0
我想創建一個菜單,當漢堡按鈕被點擊時出現。我試圖自己做,但我感到沮喪,因爲我試過的一切都沒有工作。我想用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;
}
}
我不會使用圖片爲例子,你應該創建一個小提琴和我們聯繫到,所以我們可以實時看到。 – jdmdevdotnet