如何创建：响应式底部导航菜单
学习如何使用 CSS 和 JavaScript 创建响应式底部导航菜单。
响应式底部导航
请调整浏览器窗口大小，以查看响应式导航菜单的工作方式：
创建响应式底部导航栏
第一步 - 添加 HTML：
<div class="navbar" id="myNavbar"> <a href="#home">Home</a> <a href="#news">News</a> <a href="#contact">Contact</a> <a href="#about">About</a> <a href="javascript:void(0);" class="icon" onclick="myFunction()">☰</a> </div>
带有 class="icon" 的链接用于在小屏幕上打开和关闭导航栏。
第二步 - 添加 CSS：
/* 将导航栏放在页面底部，并使其固定 */
.navbar {
background-color: #333;
overflow: hidden;
position: fixed;
bottom: 0;
width: 100%;
}
/* 设置导航栏中链接的样式 */
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* মাউস হভ হলে লিঙ্কের রঙ পরিবর্তন করুন */
.navbar a:hover {
background-color: #ddd;
color: black;
}
/* সক্রিয় লিঙ্কের জন্য গ্রীণ পটভূমি রঙ যোগ করুন */
.navbar a.active {
background-color: #04AA6D;
color: white;
}
/* ছোট স্ক্রিনে নেভিগেশন বারটি খুলা/বন্ধ করা লিঙ্ককে লুকান */
.navbar .icon {
display: none;
}
মিডিয়া কোয়াইয়ার যোগ করুন:
/* যখন স্ক্রিন প্রস্থ কম হয় 600 পিক্সেলের নীচে, প্রথম লিঙ্ক ("হোম") ছাড়া সব লিঙ্ককে লুকানো ও নেভিগেশন বারটি খুলা/বন্ধ করা লিঙ্ক দেখান */
@media screen and (max-width: 600px) {
.navbar a:not(:first-child) {display: none;}
.navbar a.icon {
float: right;
display: block;
}
}
/* যখন ব্যবহারকারী আইকন ক্লিক করবে, জেভাস্ক্রিপ্ট ব্যবহার করে "responsive" শ্রেণী নেভিগেশন বারে যোগ করুন */
এই শ্রেণী নেভিগেশন বারটির সাথে ছোট স্ক্রিনে ভালো দেখাবে (লিঙ্কগুলোকে ভারার পরিবর্তে ভিক্টিক্যাল দেখাবে) */
@media screen and (max-width: 600px) {
.navbar.responsive a.icon {
position: absolute;
right: 0;
bottom: 0;
}
.navbar.responsive a {
float: none;
display: block;
text-align: left;
}
}
তৃতীয় পদক্ষেপ - জেভাস্ক্রিপ্ট যোগ করুন:
/* যখন ব্যবহারকারী আইকন ক্লিক করবে, নেভিগেশন বারের মধ্যে "responsive" শ্রেণী যোগ করা ও অপসারণ করা এবং টুকানোর মধ্যে ট্রান্সিটিং করা */
function myFunction() {
var x = document.getElementById("myNavbar");
x.className += " responsive";
else {
}
x.className = "navbar";
}
}
