কম্পিউটার

কিভাবে CSS দিয়ে নিচের নেভিগেশন মেনু তৈরি করবেন?


নিম্নলিখিত কোডটি CSS-এর সাথে নীচের নেভিগেশন মেনু তৈরি করার জন্য −

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
   margin:0px;
   margin-top:10px;
   padding: 0px;
}
nav{
   position: fixed;
   bottom: 0;
   width: 100%;
   background-color: rgb(39, 39, 39);
   overflow: auto;
   height: auto;
}
.links {
   display: inline-block;
   text-align: center;
   padding: 14px;
   color: rgb(178, 137, 253);
   text-decoration: none;
   font-size: 17px;
}
.links:hover {
   background-color: rgb(100, 100, 100);
}
.selected{
   background-color: rgb(0, 18, 43);
}
</style>
</head>
<body>
<h2>Bottom navigation menu</h2>
<nav>
<a class="links selected" href="#"> Home</a>
<a class="links" href="#"> Login</a>
<a class="links" href="#"> Register</a>
<a class="links" href="#"> Contact Us</a>
<a class="links" href="#">More Info</a>
</nav>
</body>
</html>

আউটপুট

উপরের কোডটি নিম্নলিখিত আউটপুট −

তৈরি করবে

কিভাবে CSS দিয়ে নিচের নেভিগেশন মেনু তৈরি করবেন?


  1. কিভাবে CSS দিয়ে পেজিনেশন তৈরি করবেন?

  2. কিভাবে CSS দিয়ে ড্রপআপ মেনু তৈরি করবেন?

  3. কিভাবে CSS দিয়ে একটি পিল নেভিগেশন মেনু তৈরি করবেন?

  4. এটির ভিতরে একটি ইনপুট ক্ষেত্র সহ একটি নেভিগেশন মেনু কীভাবে তৈরি করবেন?