টিউটোরিয়াল
হরেক রকম মেনু (CSS Menu)
আমরা যারা ওয়েব ডিজাইন নিয়ে কাজ করি তারা সবাই কম বেশি মেনু সম্পর্কে অবগত আছি। এবং এটাও জানি যে, ওয়েব ডিজাইনের জন্য মেনু কতটা গুরুত্বপূর্ণ। মেনু একটি ওয়েবসাইটের সেবা সমুহ বা ওয়েবসাইটের আইটেম সমুহ'কে ইউজার বা গ্রাহকের সামনে সহজ ভাবে উপাস্থাপন করে। আর একারণেই
প্রায় সকল ওয়েব পেজে মেনুর উপস্থিতি লক্ষ্য করা যায়। একটি ওয়েব পেজের প্রধান সৌন্দর্য মেনুর সাজ সজ্জার উপর বেশি নির্ভর করে। তাই গ্রাহকের সামনে মেনুকে সুন্দর রূপে উপাস্থাপন করার জন্য সিএসএস, সিএসএস কিউরি এবং কিছুটা জাভাস্ক্রিপ্ট জানা থাকা আবশ্যক।
এই টিউটোরিয়াল সহ পরবর্তী কয়েক'টি টিউটোরিয়ালে পাঁচ ছয় ধরনের মেনু উদাহরণ সহ দেখিয়েছি। রেস্পন্সিভ মেনু এবং টিউটোরিয়াল'কে ছোট আকারে রাখার প্রয়োজনে কিছু মেনুকে রেস্পন্সিভ ছাড়া দেখালাম। কিছু মেনুতে আইকনের ব্যবহার ও দেখিয়েছি। ভাল সিএসএস কিউরি জানা
থাকলে যে কোন মেনুকেই আপনি রেস্পন্সিভ করতে পারবেন। যাক, নিচে মেনু গুলো সম্পর্কে একটি ধারনা দিতে চেষ্টা করেছি।
CSS Responsive Menu এই মেনুকে রেস্পন্সিভ করার জন্য সিএসএস কিউরি ব্যবহার করেছি। একটিভ মোড এবং মোবাইল, টেবলেট ভিউতে ড্রপ করার জন্য জাভাস্ক্রিপ্ট ব্যবহার করেছি।
Dark Menu এই মেনুকে রেস্পন্সিভ করা হয়নি। তবে, সিএসএস ব্যবহার করে পটোশপে'র তৈরী মেনুর মত লুক দেবার চেষ্টা করেছি। আপনি সিএসএস কিউরির মাধ্যমে রেস্পন্সিভ করতে পারবেন। আমি কেবল ডিজাইন দেখিয়েছি।
Thumbnails Dropdown Menu এই মেনু্র জন্য বুটস্ট্রাপ এবং সিএসএস ব্যবহার করে রেস্পন্সিভ করা হইয়েছে। ক্লিক করে ড্রপ ডাউন থাম্বনেইল দেখানোর জন্য জাভাস্ক্রিপ্ট ব্যবহার করা হয়েছে।
Vertical Sidebar Menu সাইডবারের জন্য উপর নিচ ভার্টিকেলি এই মেনুর জন্য সিএসএস এবং জাভাস্ক্রিপ্ট ব্যবহার করা হয়েছে।
আর এই পেজের উদাহরণে যে মেনুটি ড্রপডাউন সহ দেখানো হয়েছে, আমি গ্রাফিক্সের
কাজ তেমন বুঝি না, তবুও উদাহরণের কারণে কিছটা চেষ্টা করে দেখেছি। এই মেনু'টিকে রেস্পন্সিভ করলে টিউটোরিয়াল অনেক লম্বা হয়ে যাবে। সেই জন্য এটাকে রেস্পন্সিভ করে দেখানো হয়নি। আপনি ভাল সিএসএস কিউরি জানলে রেস্পন্সিভ করা সহজ। আরো জানতে ভিডিও টিউটোরিয়ালটি
দেখুন।
বিস্তারিত ভিডিও সহ দেখুন
কোড উদাহরণ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Assorted Menu</title>
<link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">
<style>
.header {
width:1200px;
height: 300px;
z-index: 2000;
background: url('hd6.jpg') no-repeat;
background-position: center top;
background-size:100% 100%;
margin:0 auto;
}
.nav ul.nav-inner{
margin:auto;
margin-top:55px;
width:500px;
}
.nav li {
display: inline-block;
list-style: none;
position:relative;
}
.nav li>a {
font-family: 'Poiret One', cursive;
color:#ababab;
font-weight:bold;
padding: 10px;
text-decoration:none;
font-size:18px;
}
/*-Dropdown Menu-*/
.nav ul ul{
top:35px;
height:auto;
width:220px;
margin-left:8px;
position:absolute;
display:none;
background:#565656;
-webkit-transition: all 0.40s ease-out;
-moz-transition: all 0.40s ease-out;
-moz-transition: all 0.40s ease-out;
text-align:left;
padding-left:10px;
}
.nav ul ul li{
height:30px;
display:block;
cursor:pointer;
margin-bottom:3px;
line-height:30px;
}
.nav ul ul li a{
font-size:15px;
}
.nav ul ul li:hover a{
color:#ccc;
}
.nav ul li:hover ul{
display:block;
}
.site-name{
width:100%;
text-align:center;
}
.site-name img{
cursor: pointer;
width:30%;
margin-top:35px;
}
.nav li:hover a, .nav li.active a{
color: #ffffff;
text-decoration:none;
}
</style>
</head>
<body>
<div class="header">
<div class="site-name">
<a href="#"><img src="logo.png" alt="Graphics Design"/></a>
</div>
<nav class="nav">
<ul class="nav-inner">
<li class="active"><a href="#home">Home</a></li>
<li><a href="#">Graphics Design ▾
</a>
<ul class="subMenu">
<li><a href="#">Logo Design</a></li>
<li><a href="#">Brand Identity Design</a></li>
<li><a href="#">Contemporary Print Design</a></li>
<li><a href="#">Promotional Design</a></li>
<li><a href="#">Booklets Design</a></li>
<li><a href="#">Brochures Design</a></li>
<li><a href="#">Business Card Design</a></li>
<li><a href="#">Corporate Branding Design</a></li>
<li><a href="#">Product Packing Design</a></li>
</ul>
</li>
<li><a href="#services">services</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>
</body>
</html>
ফলাফল
রঙের নাম এবং কোড
বিস্তারিত দেখুন
ঐতিহাসিক কালার থিওরি
বিস্তারিত দেখুন
http এবং https কি
বিস্তারিত দেখুন
SEO গাইড লাইন
বিস্তারিত দেখুন
সকল এইচটিএমএল ট্যাগ
বিস্তারিত দেখুন
এইচটিএমএল এট্রিবিউট
বিস্তারিত দেখুন