বিশুদ্ধ সিএসএস / এইচটিএমএল ড্রপ ডাউন মেনু

  1. বিশুদ্ধ সিএসএস / এইচটিএমএল ড্রপ ডাউন মেনু এই টিউটোরিয়ালে আমরা বিশুদ্ধ CSS এ একটি ক্লাসিক অনুভূমিক...
  2. ইঙ্গিত করার সময় আমরা অনুভূমিক মেনু অ্যানিমেশন।
  3. সিএসএস / এইচটিএমএল ড্রপ ডাউন মেনু বর্ণনা করুন

বিশুদ্ধ সিএসএস / এইচটিএমএল ড্রপ ডাউন মেনু

এই টিউটোরিয়ালে আমরা বিশুদ্ধ CSS এ একটি ক্লাসিক অনুভূমিক মেনু তৈরি করব। এটা তালিকা আইকন আছে। একটি আইটেম নির্দেশ যখন, এটা সহজে বাটন এবং টেক্সট রঙ পরিবর্তন, একটি ছায়া যোগ করা হয়। ড্রপ-ডাউন তালিকাগুলি মাল্টি-লেভেল তৈরি করা যেতে পারে এবং মূল জিনিসটি পুরোপুরি বিশুদ্ধ CSS3 এ প্রয়োগ করা হয়।

এখানে এই পাঠের ধারাবাহিকতা - অংশ 2 মোবাইল সংস্করণ অনুভূমিক মেনু "।

পেন দেখুন POyzbW ডেনিস দ্বারা ( @Dwstroy ) উপর CodePen

পাঠ্য ব্যবহারে:

  • প্রদর্শন: ফ্লেক্স;
  • রূপান্তর ব্যবহার করুন;
  • অবস্থান সঙ্গে উপাদান অবস্থান।

এইচটিএমএল অনুভূমিক মেনু গঠন

প্রথম, অনুভূমিক মেনু নীচের মার্কআপ লিখুন। আমরা আমার ক্ষেত্রে আমাদের ডেভেলপমেন্ট এনভায়রনমেন্টটি খুলি, এটি হল পিএইচস্টরম, index.html ফাইল তৈরি করুন, ফ্রেম এইচটিএমএল নির্ধারণ করুন: 5, ল্যাং দিয়ে প্রতিস্থাপন করুন।

এনকোডিং ছাড়া সমস্ত মেটা মুছে ফেলা হবে, আমি আমার শিরোনাম " টম মেনু " নিবন্ধন করব।

শরীরের মধ্যে আমরা শিরোনাম ট্যাগ লিখি, এবং এতে ক্লাসের সাথে একটি ব্লক রয়েছে। Dws-menu যা আমাদের মেনু ধারণ করবে। পরবর্তীতে, কাঠামো নিম্নরূপ, পাঁচ টুকরা পরিমাণ তালিকা তৈরি করবে। প্রতিটি তালিকাতে href = "#" বৈশিষ্ট্য সহ একটি লিঙ্ক থাকবে। তারপর ক্লাসে আইকনে যাই .fa .fa-

<header> <nav class = "dws-menu"> ul> li * 5> একটি [href = "#"]> i.fa.fa- </ nav> </ header>

আমরা আবেদন করতে চাপুন।

এর মেনু আইটেমের নাম লিখুন ( হোম, পণ্য, পরিষেবাদি, সংবাদ, পরিচিতি )।

পরবর্তী, আইকন নির্বাচন করুন এবং সংযোগ করুন। সাইটে যান, আমরা এই মেনু আইটেমের জন্য আইকন নির্বাচন করব:

<i class = "fa fa- home "> </ i> <i class = "fa fa- shopping cart "> </ i> <i class = "fa fa- cogs "> </ i> <i class = "fa fa -th-list "> </ i> <i class = "fa fa -envelope-open "> </ i>

<i class = fa fa- home > </ i> <i class = fa fa- shopping cart > </ i> <i class = fa fa- cogs > </ i> <i class = fa fa -th-list > </ i> <i class = fa fa -envelope-open > </ i>

আইকন সহ সাইট থেকে সংরক্ষণাগারটি ডাউনলোড করুন, আপনার কম্পিউটারে তার সামগ্রীগুলি সরিয়ে নিন, ফন্ট ফোল্ডার এবং CSS ফোল্ডারটি আপনার ডেভেলপমেন্ট পরিবেশে অনুলিপি করুন।

ফন্ট ফোল্ডারটিতে আইকন ফন্ট রয়েছে, এবং CSS ফোল্ডারে তাদের শৈলী রয়েছে। সংক্ষেপিত শৈলী ফন্ট-সন্ত্রস্ত.মিন মুছে ফেলা যেতে পারে, আমরা অসম্পূর্ণ ফন্ট-awesome.css সংযোগ।

Index.html এ আমরা আইকনগুলিকে সংযুক্ত করি এবং আমরা প্রতিটি আইটেমকে নিজস্ব আইকন স্টাইল ( হোম , শপিং-কার্ট , কোগ , থ-লিস্ট , খাম খোলার ) দিয়ে নিবন্ধন করি।

আমরা প্রধান ফ্রেম তৈরি করেছি, প্রধান শৈলী বর্ণনা করার পরে একটি সাবমেনু তৈরি করেছি, এবং এখন আমরা একটি ফাইল তৈরি করব যেখানে আমরা অনুভূমিক মেনু style.css এর প্রধান শৈলী বর্ণনা করব এবং index.html এ এটি সংযুক্ত করব। শৈলী সংযুক্ত করা আছে কিনা তা পরীক্ষা করার জন্য, এটিতে একটি ইমগ ফোল্ডার তৈরি করুন, আমি পটভূমিতে একটি নির্বিচারে ছবি রাখব। এর ব্যাকগ্রাউন্ড ব্যবহার করে ছবি সংযোগ লিখুন।

শরীর {পটভূমি-চিত্র: ইউআরএল ("..//img/ ep_naturalwhite.png"); }

আমরা দেখি, সবকিছু প্রদর্শিত হয়েছে এবং তারপর আমরা শৈলী বর্ণনা এগিয়ে যেতে হবে।

সর্বোপরি, আসুন সব ইন্ডেন্ট পুনরায় সেট করি, যা বিভিন্ন ব্রাউজার ডিফল্টভাবে সেট করতে পারে:

.dws- মেনু * {মার্জিন: 0; প্যাডিং: 0; }

200 শীর্ষে শিরোনাম সেট করুন। এবং আপনি যা ডাউনলোড করতে এবং সাইটে আলাদাভাবে নিজের সাথে সংযোগ স্থাপন করতে পারেন, ঠিক ক্ষেত্রে, অতিরিক্ত ফন্ট লিখুন।

হেডার {মার্জিন: 200 পিএক্স; ফন্ট-পরিবার: কাপrum, আরিয়াল, হেলভেটিকা, সানস-সিরিফ; }

তালিকায় মার্কার লুকান:

.dws-menu উল, .dws-menu ol {তালিকা-শৈলী: none; }

তালিকা প্রদর্শন সহ অনুভূমিকভাবে প্রদর্শিত হবে: ফ্লেক্স, এবং আমরা কেন্দ্রে এটি করবো:

.dws-menu> ul {display: flex; ন্যায্যতা-বিষয়বস্তু: কেন্দ্র; }

শিরোনামে আমরা শুধুমাত্র শীর্ষে ইন্ডেন্ট করব, আমরা মার্জিন-শীর্ষ লিখব।

হেডার { মার্জিন-শীর্ষ: 200 পিএক্স; ফন্ট-পরিবার: কাপrum, আরিয়াল, হেলভেটিকা, সানস-সিরিফ; }

আসুন আমাদের মেনু ডিজাইন করি, বাটনের রং, ফন্ট ইত্যাদি সেট করি।

লিঙ্ক নির্বাচন করুন> উল লি, এবং তাদের ব্লক উপাদান তৈরি করুন। মেনু পটভূমি সেট করুন, ইন্ডেন্ট লিখুন, আকার, রঙ উল্লেখ করুন, আন্ডারস্কোরটি সরান এবং শিরোনামগুলি মূল অক্ষরে তৈরি করুন।

.dws-menu> ul li a {display: block; পটভূমি: # গোপন; প্যাডিং: 15px 30px 15px 40px; ফন্ট সাইজ: 14px; রঙ: # 454547; টেক্সট সজ্জা: কেউ না; টেক্সট রূপান্তর: বড় হাতের অক্ষর; }

তারপর আইকন অবস্থান, অবস্থানে তালিকা বরাদ্দ: আপেক্ষিক; আইকনের আরও সারিবদ্ধকরণের জন্য:

.dws-menu> ul li {অবস্থান: আপেক্ষিক; }

পরবর্তীতে, আমরা আইকন নির্বাচন করি, একেবারে অবস্থান করি, উপরে থেকে 15 টি শিখর উপরে ইন্ডেন্টেন্ট বানান, বাম 1২ শিখর থেকে আকার 18 শূন্যে বাড়ান।

.dws-menu> ul li> একটি i.fa {অবস্থান: পরম; শীর্ষ: 15px; বাম: 12px; ফন্ট সাইজ: 18px; }

বিভাজককে সীমানা রূপে তালিকাতে সন্নিবেশ করান, প্রথম এলি উপাদানটি নির্বাচন করুন, সীমানা নির্ধারণ করুন। আমরা শেষ উপাদান LI নির্বাচন করুন এবং এটি একটি অনুরূপ সীমানা বরাদ্দ।

.dws-menu> ul li: প্রথম-শিশু {সীমানা-বাম: 1px কঠিন # b2b3b5; } .dws-menu> ul li: শেষ-বাচ্চা {সীমানা-ডান: 1 পিপিএস কঠিন # বিবিবিডি; }

LI তালিকা জন্য delimiters তৈরি করা:

.dws-menu> ul li {অবস্থান: আপেক্ষিক; সীমানা-ডান: 1px কঠিন # c7c8ca; }

মেনু উপস্থিতি অর্জন করেছে, তারপর আপনি হভার সময় শৈলী বিবরণ এগিয়ে যেতে পারেন।

ইঙ্গিত করার সময় আমরা অনুভূমিক মেনু অ্যানিমেশন।

লিঙ্কগুলি নির্বাচন করুন এবং ব্লকটিতে একটি রঙ বরাদ্দ করুন এবং সাদা রঙের আইকনের সাথে লিঙ্কটির রঙটি নির্দিষ্ট করুন। এর আরেকটি অন্ধকার ছায়া যোগ করুন। 0.3 সেকেন্ডের মধ্যে সংক্রমণের সাহায্যে আমরা একটি মসৃণ চেহারা তৈরি করব:

.dws-menu li a: হভার {পটভূমি: # 454547; রঙ: #ffffff; বক্স-ছায়া: 1 পিএক্স 5 পিএক্স 10 পিএক্স -5 পিএক্স কালো; সংক্রমণ: সব 0.3s আরাম; }

এবং এই প্রভাবটি সহজে অদৃশ্য হয়ে যাওয়ার জন্য, এই শৈলীটিকে সহজে লিঙ্কটিতে জুড়ুন:

.dws-menu> ul li a {display: block; পটভূমি: # গোপন; প্যাডিং: 15px 30px 15px 40px; ফন্ট সাইজ: 14px; রঙ: # 454547; টেক্সট সজ্জা: কেউ না; টেক্সট রূপান্তর: বড় হাতের অক্ষর; সংক্রমণ: সব 0.3s আরাম; }

প্রধান মেনুটি শেষ হয়ে গেছে এবং আপনি সাবমেনু এবং তাদের মধ্যে এম্বেডযুক্ত সাবমেনুসের বিবরণে এগিয়ে যেতে পারেন।

সিএসএস / এইচটিএমএল ড্রপ ডাউন মেনু বর্ণনা করুন

আমরা index.html খুলি এবং উদাহরণস্বরূপ, পণ্যগুলিতে অতিরিক্ত মেনু যোগ করি। LI তালিকাগুলির মধ্যে UL প্রবেশ করান এবং এতে পাঁচটি তালিকা লিখুন, যার মধ্যে হার্ফ = "#" বৈশিষ্ট্যটি লিঙ্ক থাকবে।

ul> li * 5> একটি [href = "#"]

আমরা আবেদন করার জন্য চাপুন, আইটেমগুলির নাম লিখুন ( পোশাক, ইলেক্ট্রনিক্স, খাদ্য, সরঞ্জাম, জীবন। রসায়ন )।

<ul> <li> <a href="#"> পোশাক </a> </ li> <li> <a href="#"> ইলেকট্রনিক্স </a> </ li> <li> <a href = "#"> খাদ্য </a> </ li> <li> <a href="#"> সরঞ্জাম </a> </ li> <li> <a href="#"> জীবন। রসায়ন </a> </ li> </ ul>

তারপর style.css খুলুন এবং সাবমেনু শৈলী বর্ণনা।

আমরা দ্বিতীয় তালিকা নির্বাচন এবং এটি অবস্থান বরাদ্দ: পরম; , সর্বনিম্ন প্রস্থ 150 পিক্স সেট করা যাক।

/ * সাব মেনু * / .ws-menu li li {অবস্থান: পরম; মিনি-প্রস্থ: 150px; }

আসুন 1 শীর্ষে সীমান্ত তালিকা লিখি।

.dws-menu li> ul li {border: 1px solid # c7c8ca; }

সাবমেনুতে লিঙ্কগুলির জন্য, আমরা 10 টি শীর্ষে ইন্ডেন্ট সেট করব।, পাঠ্য রূপান্তরটি সরান এবং ব্যাকগ্রাউন্ডটিকে কয়েকটি টোন গাঢ় ব্যাকগ্রাউন্ড তৈরি করুন: # e4e4e5; ।

.dws-menu li> ul li a {প্যাডিং: 10px; টেক্সট রূপান্তর: কেউ না; পটভূমি: # e4e4e5; }

তারপর আরেকটি সাবমেনু তৈরি করুন। মার্কআপ ফাইলটিতে যান এবং উদাহরণস্বরূপ উদাহরণস্বরূপ "ইলেক্ট্রনিক্স" ফর্মটি উপমা মেনু দ্বারা যা আমরা আগে করেছি। আমরা আইটেম ( ক্যামেরা, কম্পিউটার, টেলিফোন ) শিরোনাম বর্ণনা এবং সংরক্ষণ।

<li> <a href="#"> ইলেকট্রনিক্স </a> <ul> <li> <a href="#"> ক্যামেরা </a> </ li> <li> <a href="#"> কম্পিউটার </a> </ li> <li> <a href="#"> ফোন </a> </ li> </ ul> </ li>

তারা আনা হয়, কিন্তু প্রধান মেনু অধীনে লুকানো, এখন অবস্থান: পরম; nested UL এবং 150 শিখর এটি সরানো। পাশে

.dws-menu li> ul li ul {অবস্থান: পরম; ডান: -150 পিএক্স; শীর্ষ: 0; }

এরপরে, উপরের মেনুগুলির মূল আইটেমগুলিকে লক্ষ্য করার সময় আমরা সাবমেনু প্রদর্শিত করব, এর জন্য আমরা প্রদর্শন যোগ করি: none; এবং যার ফলে সব অভ্যন্তরীণ পয়েন্ট লুকান।

/ * সাব মেনু * / .ws-menu li li {অবস্থান: পরম; মিনি-প্রস্থ: 150px; প্রদর্শন: কেউ না; }

এবং তাদের উপস্থিতি জন্য, আমরা হোভারের তালিকা নির্বাচন করব এবং প্রদর্শনের সাহায্যে তাদের প্রদর্শন করব: ব্লক; ।

.dws-menu li: hover> ul {display: block; }

এখন আপনি কেবলমাত্র UL ব্লক অনুলিপি করে, তার আইটেমগুলি পরিবর্তন করে মাল্টি লেভেল মেনু যুক্ত করতে পারেন।

<ul> <li> <a href="#"> <i class = "fa fa-home"> </ i> হোম </a> </ li> <li> <a href="#"> < আমি শ্রেণী = "fa fa-shopping-cart"> </ i> পণ্য </a> <ul> <li> <a href="#"> পোশাক </a> <ul> <li> <a href = "#"> জুতা </a> </ li> <li> <a href="#"> জ্যাকেট </a> </ li> <li> <a href="#"> ট্রাউজার্স </a> < / li> </ ul> </ li> <li> <a href="#"> ইলেকট্রনিক্স </a> <ul> <li> <a href="#"> ক্যামেরা </a> </ li> <li> <a href="#"> কম্পিউটার </a> </ li> <li> <a href="#"> ফোন </a> <ul> <li> <a href="#"> স্যামসাং </a> </ li> <li> <a href="#"> ফ্লফ </a> </ li> <li> <a href="#"> অ্যাপল </a> </ li> < / ul> </ li> </ ul> </ li> <li> <a href="#"> খাদ্য </a> </ li> <li> <a href="#"> সরঞ্জাম </ h একটি> </ li> <li> <a href="#"> জেন। রসায়ন </a> </ li> </ ul> </ li> <li> <a href="#"> <i class = "fa fa-cogs"> </ i> পরিষেবাদি </a> <ul > <li> <a href="#"> পরিষেবা 1 </a> </ li> <li> <a href="#"> পরিষেবা 2 </a> </ li> <li> <a href = "#"> সেবা 3 </a> </ li> </ ul> </ li> <li> <a href="#"> <i class = "fa fa-th-list"> </ i> সংবাদ </a> </ li> <li> <a href="#"> <i class = "fa fa-envelope-open"> </ i> পরিচিতি </a> </ li> </ ul>

তারপর বোতাম সঙ্গে বোতাম শেষ করা যাক। আমি ব্যবহার করেছি, আমি বেশ কয়েকটি প্রিসেট তৈরি করেছি, আপনি নিজের তৈরি করতে পারেন, আমার ক্ষেত্রে, আমি শুধু এই কোডটি অনুলিপি করে রেখেছি এবং এটির পটভূমির জায়গায় রেখেছি যা আমি আগে লিখেছি।

.dws-menu> ul li a {display: block; / * পারমলিংক - এই গ্রেডিয়েন্ট: http://colorzilla.com/gradient-editor/#c9c9c9+0,f6f6f6+2,c4c5c7+98.757577+100; কাস্টম +3 * / পটভূমি: # c9c9c9 ; / * পুরানো ব্রাউজার * / পটভূমি: -মুজ-রৈখিক-গ্রেডিয়েন্ট (শীর্ষ, # c9c9c9 0%, # f6f6f6 2%, # c4c5c7 98%, # 757577 100%); / * FF3.6-15 * / পটভূমি: -webkit- রৈখিক-গ্রেডিয়েন্ট (শীর্ষ, # c9c9c9 0%, # f6f6f6 2%, # c4c5c7 98%, # 757577 100%); / * ক্রোম 10-25, সাফারি 5.1-6 * / পটভূমি: রৈখিক-গ্রেডিয়েন্ট (নীচে, # c9c9c9 0%, # f6f6f6 2%, # c4c5c7 98%, # 757577 100%); / * W3C, IE10 +, FF16 +, Chrome26 +, Opera12 +, Safari7 + * / ফিল্টার: প্রোগিড: DXImageTransform.Microsoft.gradient (startColorstr = '# c9c9c9', endColorstr = '# 757577', GradientType = 0); / * IE6-9 * / প্যাডিং: 15px 30px 15px 40px; ফন্ট সাইজ: 14px; রঙ: # 454547; টেক্সট সজ্জা: কেউ না; টেক্সট রূপান্তর: বড় হাতের অক্ষর; সংক্রমণ: সব 0.3s আরাম; } .dws-menu li a: hover {/ * permalink - এই গ্রেডিয়েন্ট: http://colorzilla.com/gradient-editor/#e0e1e5+0.454547+2.454547+98,e0e1e5+100 * / পটভূমি: # e0e1e5; / * পুরানো ব্রাউজার * / পটভূমি: -মুজ-রৈখিক-গ্রেডিয়েন্ট (শীর্ষ, # ই 0e1e5 0%, # 454547 2%, # 454547 98%, # e0e1e5 100%); / * FF3.6-15 * / পটভূমি: -webkit- রৈখিক-গ্রেডিয়েন্ট (শীর্ষ, # ই 0e1e5 0%, # 454547 2%, # 454547 98%, # e0e1e5 100%); / * ক্রোম 10-25, সাফারি 5.1-6 * / পটভূমি: রৈখিক-গ্রেডিয়েন্ট (নীচে, # e0e1e5 0%, # 454547 2%, # 454547 98%, # e0e1e5 100%); / * W3C, IE10 +, FF16 +, Chrome26 +, Opera12 +, Safari7 + * / ফিল্টার: প্রোগিড: DXImageTransform.Microsoft.gradient (startColorstr = '# e0e1e5', endColorstr = '# e0e1e5', GradientType = 0); / * IE6-9 * / রঙ: #ffffff; বক্স-ছায়া: 1 পিএক্স 5 পিএক্স 10 পিএক্স -5 পিএক্স কালো; সংক্রমণ: সব 0.3s আরাম; } dws-menu> ul li a {display: block;  / * পারমলিংক - এই গ্রেডিয়েন্ট: http://colorzilla

আপনি যদি চান তবে এই মেনুটিকে আপনার সাইটে উপযুক্ত উপযুক্ত শৈলীটির জন্য ডিজাইন করা যেতে পারে, এটি কেবল একটি রঙ তৈরি করতে এবং কোডটিতে এটি প্রতিস্থাপনের জন্য যথেষ্ট। এটি একটি সহজ এবং একই সময়ে সুন্দর অনুভূমিক মেনু, বিশুদ্ধ CSS এ তৈরি।

একটি মন্তব্য করুন: