如何创建：菜单图标
学习如何使用 CSS 创建菜单图标。
如果您没有使用图标库，您可以使用 CSS 创建一个基本的菜单图标：
如何创建菜单图标
প্রথম পদক্ষেপ - এইচটিএমএল যোগ করা:
দ্বিতীয় পদক্ষেপ - সিএসএস যোগ করা:
div {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
}
উদাহরণ ব্যাখ্যা:
width 和 height 属性指定每个条的宽度和高度。
我们添加了黑色背景颜色以及上下外边距，来创建每个条之间的间距。
অ্যানিমেশন আইকন
CSS এবং JavaScript ব্যবহার করে, ক্লিক করা হলে মেনু আইকনটিকে “বাতিল/মুক্ত করা” আইকনে পরিবর্তন করুন:
প্রথম পদক্ষেপ - এইচটিএমএল যোগ করা:
<div class="container" onclick="myFunction(this)"> <div class="bar1"></div> <div class="bar2"></div> <div class="bar3"></div> </div>
দ্বিতীয় পদক্ষেপ - সিএসএস যোগ করা:
.container {
display: inline-block;
cursor: pointer;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
/* য়াখন প্রথম বারটি পাশাপাশি */
.change .bar1 {
transform: translate(0, 11px) rotate(-45deg);
}
/* দ্বিতীয় বারটি ফেলে যাওয়া */
.change .bar2 {opacity: 0;}
/* য়াখন শেষ বারের পাশাপাশি */
.change .bar3 {
transform: translate(0, -11px) rotate(45deg);
}
তৃতীয় পদক্ষেপ - জেস্ক্রিপ্ট যোগ করা:
function myFunction(x) {
x.classList.toggle("change");
}
উদাহরণ ব্যাখ্যা:
HTML এবং CSS: আমরা আগের সমস্ত শৈলীকেই ব্যবহার করেছি, কিন্তু এবার প্রত্যেকটি <div> ইলেমেন্টকে একটি কনটেইনার ইলেমেন্টে রক্ষা করা হয়েছে এবং প্রত্যেক ইলেমেন্টকে একটি ক্লাস নাম নির্দিষ্ট করা হয়েছে。
কনটেইনার ইলেমেন্ট ব্যবহার করা হয়েছে যাতে ডিভ (লাইন) এর ওপর মাউস ট্যাচ করা হলে একটি পিন্ডকী সংকেত দেখানো হয়। যখন তা ক্লিক করা হয়, তখন একটি জেস্ক্রিপ্ট ফাংশন চালু হয়, যা তাকে একটি নতুন ক্লাস নাম যোগ করে, যা প্রত্যেকটি হোরিজন্টাল বারের শৈলীকে পরিবর্তন করে: প্রথম এবং শেষ লাইনগুলি “x” অক্ষরের মতো রূপান্তরিত এবং ঘূর্ণিত হয়। মধ্যবর্তী লাইনগুলি ক্রমশঃ ফেলে যাওয়া এবং অদৃশ্য হয়。
