সিএসএস দিয়ে সহজেই তৈরী করুন ড্রপডাউন মেনু

0
472

আজ আপনাদের ছোট্র একটা টিউটোরিয়াল দিচ্ছি, আপনি যেকোন সাইট কিংবা ওয়ার্ডপ্রেসে এই মেনু ব্যবহার করতে পারবেন।

এজন্য আমরা একটি এইচটিএমএল আর একটি সিএসএস ফাইল করবো।

টিউনারপেজের নতুন টিউন আপনাকে ইমেইল করব?
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting

এইচটিএমএলটি দেখে নিই।

<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>

দিন।

Advertisement -
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting

একটি উত্তর ত্যাগ

Please enter your comment!
Please enter your name here

1 × 5 =