রেস্পন্সিভ মেনু কিভাবে করবেন?
মেনু বহুল ব্যবহৃত একটি প্লাগিন। প্রায় সকল ওয়েবসাইটে মেনু বার থাকে। বর্তমান সময়ে অবশ্যই ওয়েবসাইট রেস্পন্সিভ হতে হবে। আমি এখানে ড্রপডাউন সহ একটি সিম্পল রেস্পন্সিভ মেনু বার করে দেখালাম। ফন্ট হিসেবে গোগলের জনপ্রিয় একটি ফন্ট এবং আইকনের জন্য ফন্ট অসাম ব্যবহার করেছি। কিভাবে করেছি তা কোড উদাহরণ দেখে বুঝতে অসুবিদা হলে ভিডিও টিউটোরিয়াল'টি দেখুন। ওখানে একটি একটি করে সব ক্লিয়ার ভাবে বুঝানো হয়েছে।
বিস্তারিত ভিডিও সহ দেখুন
কোড উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>Responsive Menu Example</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Roboto"
rel="stylesheet">
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.7.0/css/all.css">
<style>
body {
font: normal 1.125em/1.5 'Roboto', sans-serif;
}
*{padding:0;margin:0;}
.menu{background:navy;height:50px;}
.menu-mobile, .fa-home{
display:none;
font-size:22px;
color:#fff;
line-height:50px;
height:50px;
width:50px;
text-align:center;
float:right;
}
.fa-home{float:left;}
.menu-mobile:hover, .fa-home:hover{
background-color:goldenrod;
cursor:pointer;
}
ul li{
list-style:none;
float:left;
height:50px;
line-height:50px;
}
ul li ul{
width:133px;
display:none;
position:absolute;
}
ul li ul li{
width:100%;
margin:0;
padding:0;
}
ul li a{
text-decoration:none;
color:#fff;
display:block;
padding:0 15px;
background-color:navy;
}
ul li a:hover{
background-color:goldenrod;
}
ul li:hover ul{
display:block;
}
@media (max-width: 600px) {
ul, ul li:first-child{display:none;}
.menu-mobile,.fa-home{display:block;}
ul li{
display:block;
width:100%;
}
ul li ul{
width:100%;
}
}
</style>
</head>
<body>
<nav class="menu">
<a href="#"><i class="fa fa-home"></i></a>
<i onclick="toggle()" title="Menu" class="fas fa-bars menu-mobile"></i>
<ul id="menu_items">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li>
<a href="javascript:void(0)">Categories <i class="fa fa-caret-down"></i></a>
<ul>
<li><a href="#">Cosmetics</a></li>
<li><a href="#">Jewellery</a></li>
<li><a href="#">Parfums</a></li>
</ul>
</li>
<li><a href="#">Services</a></li>
</ul>
</nav>
<script>
function toggle(){
var List = document.getElementById("menu_items");
if (List.style.display =='block'){
List.style.display = 'none';
return;
}
List.style.display ='block';
}
</script>
</body>
</html>
Keep Your Ads Here...
ঐতিহাসিক কালার থিওরি
বিস্তারিত দেখুন এইচটিএমএল আইকন
বিস্তারিত দেখুন ওয়েবের যত ফন্টস
বিস্তারিত দেখুন সিএসএস এনিমেশন
বিস্তারিত দেখুন হরেক রকম মেনু
বিস্তারিত দেখুন রকমারি বাটন
বিস্তারিত দেখুন