রেস্পন্সিভ মেগা মেনু কিভাবে করবেন?
মেগা মেনু সাধারণত অনেক গুলো আইটেমকে মেনু আকারে প্রকাশ করার জন্য ব্যবহৃত হয়। বিশেষ কতে ই-কমার্স ওয়েবসাইট গুলোতে মেগা মেনু অধিকতর ব্যবহার হয়ে থাকে। মেগা মেনুতে আইটেমের ক্যাটেগরী সহ ছোট করে কিছু থামনেইল অথবা ভিডিও ইত্যাদী প্রকাশ করা যায়। তাছাড়া মেনু দেখে ওয়েবসাইটের আইটেম গুলো সম্পর্কে ইউজারকে একটি স্বচ্ছ ধারনা দেওয়া যায়। তাই মেগা মেনু খুবই গুরুত্বপূর্ণ একটি প্লাগিন। আমি এখানে রেস্পন্সিভ সহ একটি ছোট্ট মেগা মেনু করে দেখালাম। ডিজাইন কেমন হবে সেটা একান্ত ডিজাইনারের উপর নির্ভর করে। এই ডিজাইন'টাকে বুঝতে পারলে যে কোন ধরনের মেগা মেনু করা যাবে। আরো বিস্তারিত জানতে ভিডিও টিউটোরিয়াল'টি দেখুন।
বিস্তারিত ভিডিও সহ দেখুন
কোড উদাহরণ
<!DOCTYPE html>
<html lang="bn">
<head>
<title>Mega Menu</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="mega-menu.css">
</head>
<body>
<div class="nav">
<span class="menu-mark">☰</span>
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
<li class="dropdown"><a href="javascript:void(0);">Product <span style='font-size:16px;'>▼</span></a>
<ul class="mega-menu">
<span class="section">
<li class="mega-menu-header">Cosmetics</li>
<li><a href="#"> Face Cream</a></li>
<li><a href="#"> Lipstick</a></li>
<li><a href="#"> Hair Care</a></li>
<li><a href="#"> Eye Cosmetic</a></li>
<li><a href="#"> Skin Care</a></li>
<li><a href="#"> Makeup Box</a></li>
</span>
<span class="section">
<li class="mega-menu-header">perfume</li>
<li><a href="#"> BOOS</a></li>
<li><a href="#"> JOOP</a></li>
<li><a href="#"> LANBIN</a></li>
<li><a href="#"> GUCCI</a></li>
<li><a href="#"> D&G </a></li>
<li><a href="#"> LACOSTE</a></li>
</span>
<span class="section">
<li class="mega-menu-header">Gift Items</li>
<li><a href="#"> Flowers</a></li>
<li><a href="#"> Classic Wedding Gift</a></li>
<li><a href="#"> Dinner Set</a></li>
<li><a href="#"> Luxe Kettle</a></li>
<li><a href="#"> Stand Mixers</a></li>
<li><a href="#"> Book Set</a></li>
</span>
<span class="section">
<li class="mega-menu-header">Baby Items</li>
<li><a href="#">Bath Support</a></li>
<li><a href="#"> Snug Bouncer</a></li>
<li><a href="#"> Antilop High Chair</a></li>
<li><a href="#"> Activity Walker</a></li>
<li><a href="#"> Diaper Bag</a></li>
<li><a href="#">Baby Swing</a></li>
</span>
</ul>
</li>
</ul>
</div>
<div style="height:1000px;background:red;"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
//mega menu show hide
$(document).ready(function(){
$(".dropdown ").click(function(){
$('.mega-menu').fadeToggle();
});
$(document).on("click", function(event){
var $trigger = $(".dropdown");
if($trigger !== event.target && !$trigger.has(event.target).length){
$(".mega-menu").hide();
}
});
//mobile menu show hide
$(".menu-mark ").click(function(){
$('.menu').fadeToggle();
});
});
</script>
</body>
</html>
ডেমুতে ব্যবহ্নত সিএসএস ফাইল
*{
box-sizing:border-box;
margin:0;
padding:0;
}
body{
background:color:aliceblue;
font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
}
.nav{
height:40px;
width:100%;
background-color:#333;
position:relative;
}
.nav .menu{
height:40px;
width:100%;
background-color:#333;
border-bottom:2px solid #fff;
}
.nav .menu-mark{
color:#fff;
font-weight:bold;
font-size:28px;
line-height:40px;
float:right;
padding:0 10px;
display:none;
width:40px;
}
.nav .menu-mark:hover{
cursor:pointer;
background-color:#121212;
}
.nav ul li{
float:left;
list-style:none;
}
.nav ul li a{
padding:5px 16px;
color:#fff;
line-height:40px;
text-decoration:none;
border-right:1px solid #121212;
}
.nav ul li a:hover{
background-color:#232323;
}
.mega-menu{
min-height:100%;
width:100%;
background:#444;
left:0;
position:absolute;
padding-bottom:10px;
-webkit-box-shadow:0px 8px 9px rgba(0,0,0,0.5);
box-shadow:0px 8px 9px rgba(0,0,0,0.5);
display:none;
}
.mega-menu .mega-menu-header{
font-size:25px;
padding:10px;
color:yellow;
}
.mega-menu .section{
width:25%;
float:left;
}
.mega-menu .section li{
width:100%;
}
.mega-menu .section li a{
border:none;
}
.mega-menu .section li a:hover{
background:none;
text-decoration:underline;
}
@media screen and (max-width:736px){
.mega-menu .section{
width:50%;
}
}
@media screen and (max-width:480px){
.nav .menu{
height:240px;
display:none;
}
.nav .menu-mark{display:inline-block;}
.nav ul li{
width:100%;
}
.nav ul li a{
width:100%;
display:block;
border:none;
}
}
Keep Your Ads Here...
ঐতিহাসিক কালার থিওরি
বিস্তারিত দেখুন এইচটিএমএল আইকন
বিস্তারিত দেখুন ওয়েবের যত ফন্টস
বিস্তারিত দেখুন সিএসএস এনিমেশন
বিস্তারিত দেখুন হরেক রকম মেনু
বিস্তারিত দেখুন রকমারি বাটন
বিস্তারিত দেখুন