আজ আপনাদের ছোট্র একটা টিউটোরিয়াল দিচ্ছি, আপনি যেকোন সাইট কিংবা ওয়ার্ডপ্রেসে এই মেনু ব্যবহার করতে পারবেন।
এজন্য আমরা একটি এইচটিএমএল আর একটি সিএসএস ফাইল করবো।
এইচটিএমএলটি দেখে নিই।
<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>
দিন।
দেশের যেকোন প্রান্ত থেকে ঘরে বসেই লাইভ কোর্স করুন
অফিস প্রোগ্রাম ও কম্পিউটার অপারেটর
Original price was: ৳3,000.00.৳2,500.00Current price is: ৳2,500.00. 358
জাভাস্ক্রিপ্ট শুরু থেকে শেষ পর্যন্ত
Original price was: ৳6,000.00.৳4,000.00Current price is: ৳4,000.00. 291
0 responses on "সিএসএস দিয়ে সহজেই তৈরী করুন ড্রপডাউন মেনু"