យើងបន្តពីមេរៀនមុនដោយយើងបានធ្វើ Menu bar ហើយ Dropdowns bar រួចហើយ។ ឥឡូវនេះយើងមកសិក្សា narbar ជាមួយ CSS និង Jquery
HTML
<body>
<div class="container-fluid navi">
<div class="container">
<div class="row">
<div class="col-xl-12 col-lg-12 menu">
<ul>
<li>
<a id="btn-navbar"><i class="fa-solid fa-bars"></i></a>
</li>
<li>
<a href=""><i class="fa-solid fa-house"></i></a>
</li>
<li>
// ពីមេរៀនមុន
<li>
<a href="">Meta</a>
</li>
<li>
<a href="">Microsoft</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="navbar-menu">
<ul>
<li>
<a href="">Google Navbar</a>
</li>
<li>
<a href="">Apple Navbar</a>
</li>
<li>
<a href="">Microsoft Navbar</a>
</li>
</ul>
</div>
</body>
<script src="js.js"></script>
</html>
CSS
/* ពីមេរៀនមុន*/
.menu ul li ul.sub-menu li:hover ul.sub-menu-2{
display: block;
}
#btn-navbar{
color: white;
}
/*MARK: Navbar design*/
.navbar-menu{
position: fixed;
top: 0;
left: -250px; /*MARK: Show it is 0 */
width: 250px;
height: 100%;
background-color: darkgoldenrod;
transition: 0.3s;
z-index: 1; /*MARK: over */
}
.navbar-menu ul li a{
display: block;
padding: 20px;
color: white;
text-decoration: none;
}
.navbar-menu ul li a:hover{
background-color: yellowgreen
}
/*MARK: make backround color black */
.popup{
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.195);
}
Jquery
$(document).ready(function(){
let popup = '<div class="popup"></div>'
$("#btn-navbar").click(function(){
$(".navbar-menu").css({"left":"0"})
$('body').append(popup)
})
// MARK: It is not process. This form should use .on
// $(".popup").click(function(){
// alert(1)
// })
$('body').on('click','.popup',function(){
$('.popup').remove()// .popup it can change to use this
$(".navbar-menu").css({"left":"-250px"})
})
})
0 Comments