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.
1 留言
Selecting Poirier Agency to manage my digital marketing requirements was an absolute game-changer! Their expertise and dedication propelled my online presence to unprecedented levels. From crafting strategic blueprints to seamless execution, every phase was executed with precision, yielding substantial results. Thanks to Digital Marketing Services, my business flourished, and I couldn't be more satisfied with the outcome!
回覆刪除