យើងរចនា Navigation Bar សម្រាប់ sample ដែលយើងប្រើជាមួយ bootstrap និង font-awesome សម្រាប់ជួយក្នុងរចនាវា ប៉ុនយើងប្រើ css សម្រាប់ customine វាទៅអ្វីដែលយើងចង់បាន
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.slim.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="stye.css">
<title>Document</title>
</head>
<body>
<div class="container-fluid navi">
<div class="container">
<div class="row">
<div class="col-xl-12 col-lg-12 menu">
<ul>
<li>
<a href=""><i class="fa-solid fa-bars"></i></a>
</li>
<li>
<a href=""><i class="fa-solid fa-house"></i></a>
</li>
<li>
<a href="">Google</a>
</li>
<li>
<a href="">Meta</a>
</li>
<li>
<a href="">Microsoft</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
h1,h2,p,ul{
padding: 0;
margin: 0;
box-sizing: border-box;
list-style-type: none;
}
div{
box-sizing: border-box;
}
.navi{
background-color: rgba(0, 0, 0, 0.738);
}
.menu ul li{
float: left;
}
.menu ul li a{
display: block;
text-decoration: none;
color: white;
padding: 20px;
}
.menu ul li a:hover{
color: antiquewhite;
background-color: black;
}
ធ្វើ Dropdowns
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 href=""><i class="fa-solid fa-bars"></i></a>
</li>
<li>
<a href=""><i class="fa-solid fa-house"></i></a>
</li>
<li>
<a href="">Google</a>
<ul class="sub-menu">
<li>
<a href="">Google 1</a>
</li>
<li>
<a href="">Google 2</a>
</li>
<li>
<a href="">Google 3</a>
</li>
</ul>
</li>
<li>
<a href="">Meta</a>
<ul class="sub-menu">
<li>
<a href="">Meta 1</a>
</li>
<li>
<a href="">Meta 2</a>
</li>
<li>
<a href="">Meta 3</a>
</li>
</ul>
</li>
<li>
<a href="">Microsoft</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
CSS
body{
background-color: aliceblue;
}
h1,h2,p,ul{
padding: 0;
margin: 0;
box-sizing: border-box;
list-style-type: none;
}
div{
box-sizing: border-box;
}
.navi{
background-color: rgba(0, 0, 0, 0.738);
}
.menu ul li{
float: left;
position: relative;
}
.menu ul li a{
display: block;
text-decoration: none;
color: white;
padding: 20px;
}
.menu ul li a:hover{
color: antiquewhite;
background-color: black;
}
.menu ul li ul.sub-menu{
width: 200px;
background-color: rgba(0, 0, 0, 0.738);
box-shadow: 1px 1px 5px rgb(165, 165, 165);
position: absolute;
top: 100%;
left: 0%;
display: none;
}
.menu ul li ul.sub-menu li{
width: 100%;
}
.menu ul li ul.sub-menu li a{
color: white;
}
.menu ul li:hover ul.sub-menu{
display: block;
}
ធ្វើ Dropdowns នៅក្នុង Dropdowns
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 href=""><i class="fa-solid fa-bars"></i></a>
</li>
<li>
<a href=""><i class="fa-solid fa-house"></i></a>
</li>
<li>
<a href="">Google</a>
<ul class="sub-menu">
<li>
<a href="">Google 1</a>
<ul class="sub-menu-2">
<li>
<a href="">Google 1-1</a>
</li>
<li>
<a href="">Google 1-2</a>
</li>
<li>
<a href="">Google 1-3</a>
</li>
</ul>
</li>
<li>
<a href="">Google 2</a>
<ul class="sub-menu-2">
<li>
<a href="">Google 2-1</a>
</li>
<li>
<a href="">Google 2-2</a>
</li>
<li>
<a href="">Google 2-3</a>
</li>
</ul>
</li>
<li>
<a href="">Google 3</a>
</li>
</ul>
</li>
<li>
<a href="">Meta</a>
</li>
<li>
<a href="">Microsoft</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
CSS
body{
background-color: aliceblue;
}
h1,h2,p,ul{
padding: 0;
margin: 0;
box-sizing: border-box;
list-style-type: none;
}
div{
box-sizing: border-box;
}
.navi{
background-color: rgba(0, 0, 0, 0.738);
}
.menu ul li{
float: left;
position: relative;
}
.menu ul li a{
display: block;
text-decoration: none;
color: white;
padding: 20px;
}
.menu ul li a:hover{
color: antiquewhite;
background-color: black;
}
.menu ul li ul.sub-menu{
width: 200px;
background-color: rgba(0, 0, 0, 0.738);
box-shadow: 1px 1px 5px rgb(165, 165, 165);
position: absolute;
top: 100%;
left: 0%;
display: none;
}
.menu ul li ul.sub-menu li{
width: 100%;
position: relative;
}
.menu ul li ul.sub-menu li a{
color: white;
}
.menu ul li:hover ul.sub-menu{
display: block;
}
/*MARK: Sub menu 2*/
.menu ul li:hover ul.sub-menu ul.sub-menu-2{
position: absolute;
width: 200px;
background-color: chocolate;
top: 0;
left: 100%;
display: none;
}
.menu ul li ul.sub-menu li:hover ul.sub-menu-2{
display: block;
}
0 Comments