আজ আপনাদের ছোট্র একটা টিউটোরিয়াল দিচ্ছি , আপনি যেকোন সাইট কিংবা ওয়ার্ডপ্রেসে এই মেনু ব্যবহার করতে পারবেন ।
এজন্য আমরা একটি এইচটিএমএল আর একটি সিএসএস ফাইল করবো ।
এইচটিএমএলটি দেখে নিই ।
<html>
<head>
</head>
<body>
<nav>
<ul>
<li>
<a href="#">Home</a></li>
<li>
<a href="#">Tutorial</a>
<ul>
<li><a href="#">photoshop</a></li>
<li><a href="#">Illustration</a></li>
<li><a href="#">Web Design</a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Javascript</a></li>
</ul>
</li>
<li><a href="#">SEO</a></li>
</ul>
</li>
<li>
<a href="#">Article</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">User Experience</a></li>
</ul>
</li>
<li>
<a href="#">contact</a></li>
<li>
<a href="#">Inspiration</a></li>
<li>
<a href="#">About</a></li>
</ul>
</nav>
</body>
</html>
উপরের কোডটি আপনার কম্পিউটারের নোটপ্যাড ((কিবোর্ড থেকে Windows+R চাপুন , (run) রান কমান্ড ওপেন হবে , এবার লিখুন notepad।
নোটপ্যাড ওপেন করে উপরের কোডটুকু লিখুন ।
এবার এটিকে menu.html নাম দিয়ে সেভ করুন। menu.html ফাইলটি যেকোন ব্রাউজার (মজিলা ফায়ারফক্স ) দিয়ে ওপেন করুন ।
ব্যাখ্যা :
আমাদের মেনু আইটেম যেমন
Home
Tutorial
Article
contact
Inspiration
About
Tutorial আইটেম এ আমরা নিচের টিউটোরিয়াল আইটেমগুলো যোগ করেছি ।
photoshop
Illustration
Web Design
SEO
আবার Web Design আইটেম এ আমরা নিচের আইটেমগুলো করেছি ।
HTML
CSS
Javascript
তাহলে আমাদের মেনুটি দাড়ায় এই রকম ।
::Home
::Tutorial
>photoshop
>Illustration
>Web Design
>>HTML
>>CSS
>>Javascript
>SEO
::Article
::contact
::Inspiration
::About
এখন আমরা এটাতে ক্যাসকেডিং স্টাইলশীট (css) দিয়ে ডিজাইন করবো ।
এ ক্ষেত্রে আপনি দু ধরণের ডিজাইন প্রয়োগ করতে পারেন যথা :1. External, 2. Internal,
(আমরা জানি সিএসএস তিন প্রকার (1. External, 2. Internal 3. Inline)).
বোঝার সুবিধার্থে আমরা ইন্টারনাল সিএসএস। এবার
এজন্য উপরের কোডটির <head>**</head> এ , **এর ভেতর এই কোডটি লিখুন <style type="text/css">%%</style>, %% এর ভেতর নিচের সিএসএসটি দিন ।
nav ul ul{
display:none;
}
প্রথমে আমরা display:none;
এর মাধ্যমে সাবমেনু /আইটেমগুলোকে লুকিয়ে ফেললাম। nav ul ul এর দ্বারা বোঝায় প্র্রথম ul এর ভেতর যেসকল আছে ।
দ্বিতীয় কোড :
nav ul li:hover>ul{
display:block;
}
এই কোডটি দ্বারা বোঝায় প্রথম ul এ যেসকল li আছে তার উপর মাউজ নিলে (hover) সেটা দেখাবে। আগে আমরা display:none; দিয়ে সবগুলো লুকিয়ে ফেলেছিলাম , এবার আবার display:block; করে সবগুলো একসাথে দেখালাম। hover>ul দ্বারা শুধুমাত্র ফার্স্ট চাইল্ডটিতে এই ডিজাইনটি দেওয়া হয়েছে এর অর্থ টিউটোরিয়ালে কার্সর (মাউজ ) নিলে শুধুমাত্র টিউটোরিয়ালের ভেতরের প্রথম উপাদানগুলো ওপেন হবে , আবার ওয়েব ডিজাইনে কার্সর নিলেই কেবল ওটা ওপেন হবে। এখানেই আমারে বেসিক ডিজাইন শেষ , বাকিটা যারা সিএসএস বেসিক জানেন তারা নিজেদের মত করে ডিজাইন করে নিতে পারবেন। তবে নতুনদের জন্য আরেকটি সুখবর হলো কয়েকজন দক্ষ ফ্রিল্যান্সাররা দেশব্যাপী বিনামুল্যে অনলাইনে ফ্রিল্যান্সিং কোর্স শেখানোর উদ্যোগ নিয়েছি ।
তবুও আমি নতুনদের জন্য পুরো ডিজাইনটা করে দিচ্ছি ।
nav ul ul{
display:none;
}
nav ul li:hover>ul{
display:block;
}
nav ul {
list-style: none;
position: relative;
display: inline-table;
}
nav ul li {
background:#ddd;
float: left;
}
nav ul li:hover {
background:#eee;
}
nav ul li a {
display: block;
text-decoration: none;
padding:20px 40px;
}
nav ul ul {
background:#ddd;
padding:0;
}
nav ul ul li {
float: none;
position: relative;
}
nav ul ul li a:hover {
background: #4b545f;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
ফাইনাল ফাইল : (নিচের ফাইলটি কপি করে নোটপ্যাড ওপেন করে প্যাস্ট করুন। তারপর menu.html দিয়ে সেভ করুন। এবার ব্রাউজারে ওপেন করুন ।
<html>
<head>
<style type="text/css">
nav ul ul{
display:none;
}
nav ul li:hover>ul{
display:block;
}
nav ul {
list-style: none;
position: relative;
display: inline-table;
}
nav ul li {
background:#ddd;
float: left;
}
nav ul li:hover {
background:#eee;
}
nav ul li a {
display: block;
text-decoration: none;
padding:20px 40px;
}
nav ul ul {
background:#ddd;
padding:0;
}
nav ul ul li {
float: none;
position: relative;
}
nav ul ul li a:hover {
background: #4b545f;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
</style>
</head>
<body>
<nav>
<ul>
<li>
<a href="#">Home</a></li>
<li>
<a href="#">Tutorial</a>
<ul>
<li><a href="#">photoshop</a></li>
<li><a href="#">Illustration</a></li>
<li><a href="#">Web Design</a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Javascript</a></li>
</ul>
</li>
<li><a href="#">SEO</a></li>
</ul>
</li>
<li>
<a href="#">Article</a>
</li>
<li>
<a href="#">contact</a></li>
<li>
<a href="#">Inspiration</a></li>
<li>
<a href="#">About</a></li>
</ul>
</nav>
</body>
</html>
যারা ওয়ার্ডপ্রেসে এই মেনু ব্যবহারের জন্য সিএসএস ফাইলটিকে style.css এ প্যাস্ট করুন।
তারপর হেডারে ফাইল /ইনডেক্স /যেখানে দেখানে চান সেখানে
<nav> <?php wp_nav_menu();?></nav>
দিন ।
।
অনলাইনে ছড়িয়ে ছিটিয়ে থাকা কথা গুলোকেই সহজে জানবার সুবিধার জন্য একত্রিত করে আমাদের কথা । এখানে সংগৃহিত কথা গুলোর সত্ব (copyright) সম্পূর্ণভাবে সোর্স সাইটের লেখকের এবং আমাদের কথাতে প্রতিটা কথাতেই সোর্স সাইটের রেফারেন্স লিংক উধৃত আছে ।