codepen https://codepen.io/codepen-io-kelly/full/RwdrwEW veiw
all coding https://codepen.io/codepen-io-kelly/pen/RwdrwEW
HTML Schema
<nav class="main-navigation">
<button class="menu-toggle">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</button>
<ul class="nav-menu">
<li><a href="#">Home</a></li>
<li><a href="#">Travel</a></li>
<li><a href="#">fashion</a></li>
<li><a href="#">food</a></li>
<li><a href="#">Life-style</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
add css
hamburger style
.main-navigation .menu-toggle {
display: block;
cursor: pointer;
position: absolute; // absolute position
top:10px; //postition
right:20px; //postition
background-color: #fff;
border:none;
}
Three lines in a hamburger
.main-navigation .menu-toggle .bar{
display: block;
width: 25px;
height: 3px;
margin: 5px auto;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
background-color: #000;
}
.main-navigation .nav-menu{
position: fixed; // fixed position
left: -100%; // point css
top: 0;
height:100vh; // height
background-color:#000;
width: 220px; // display width of menu
transition: 0.3s;
}
javascrip
<script>
add humberger acitve css to change line
Change menu from to left or right
.main-navigation .nav-menu.active {
left:0;
}
if .main-navigation .nav-menu ser right = -100%,and
.main-navigation .nav-menu.active {
right:0;
}
nav-menu will run out from the right , use active to create animation effects, but it will hidden hamburger , then toggle change
.main-navigation .menu-toggle {
display: block;
cursor: pointer;
position: absolute; // absolute position
top:10px; //postition
right:20px; //postition ---> change to left:20px;
background-color: #fff;
border:none;
}
if add css in this @media sereen (max-width:768px) { },For example
@media sereen (max-width:768px) {
.main-navigation .menu-toggle {
display: block;
cursor: pointer;
position: absolute; // absolute position
top:10px; //postition
right:20px; //postition
background-color: #fff;
border:none;
}
.main-navigation .menu-toggle .bar{
display: block;
width: 25px;
height: 3px;
margin: 5px auto;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
background-color: #000;
}
.......
}
it show in mobile phone , if not add it will show in destop and mobile phone.
留言
張貼留言