আপডেটের সাথে, সাইটের সবকিছু অভিযোজিত হওয়া উচিত, একটি অনুভূমিক মেনু সহ, যা সমস্ত স্ক্রিনে বন্ধুত্বপূর্ণ হওয়া উচিত। যেখানে আমি ক্লাসিক নেভিগেশন বিবেচনা করার প্রস্তাব করছি, যা জেএস ব্যবহার ছাড়াই একটি বিশুদ্ধ শৈলীতে তৈরি করা হয়েছে। যেখানে, নিজস্ব উপায়ে, শৈলীটি অনেক সাইটের জন্য উপযুক্ত হতে পারে, যেহেতু এটি একটি সাধারণ, আদর্শ আকারে তৈরি করা হয়েছে, তবে প্রভাবের উপস্থিতি সহ। এছাড়াও, যদি আপনি মোবাইল মিডিয়া থেকে দেখেন, সাথে একটি বোতাম ডান দিকে, যেখানে ক্লিক করা হলে, বিভাগগুলির সম্পূর্ণ প্রস্থ প্রদর্শিত হবে না, তবে সবকিছু একই পাশে সুন্দরভাবে প্রদর্শিত হবে, যেখানে ফন্ট বোতামগুলিও দৃশ্যমানভাবে দৃশ্যমান হবে।

আপনি দেখতে পাচ্ছেন, আমরা এখানে ব্যবহার করেছি সহজ তালিকাএইচটিএমএল, এক বা অন্য বিভাগে যেতে লিঙ্কের অধীনে থাকা সমস্ত তালিকা প্রদর্শন করার জন্য। ধারণাটি হ'ল নেভিগেশন তালিকাটি একটি অনুভূমিক আকারে সংগঠিত করা ভাল, তবে যখন মোবাইল এটি স্বয়ংক্রিয়ভাবে একটি উল্লম্ব অবস্থানে পরিণত হবে, যেমনটি উপাদানের সাথে সংযুক্ত চিত্রগুলিতে দেখানো হয়েছে৷

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

1 . ডিফল্টরূপে বা পোর্টালে প্রবেশ করার সময় এটি এভাবেই চলে।

2 . আমরা ইতিমধ্যে একটি মোবাইল ডিভাইস থেকে দেখছি, কিন্তু এখনও মেনুর অধীনে এটিকে ডাকিনি৷

3 . এখানে আমরা ক্লিক করেছি এবং অনুরোধ করা সমস্ত প্রশ্ন প্রদর্শিত হয়েছে।

এর ইনস্টলেশন শুরু করা যাক:

ZORNET.RU

সিএসএস

বিভাগ(
প্রস্থ: 100%;
সর্বোচ্চ-প্রস্থ:1198px;
মার্জিন: 0px স্বয়ংক্রিয়;
প্রদর্শন: টেবিল;
অবস্থান: আপেক্ষিক;
}

হেডার(
প্রস্থ: 100%;
প্রদর্শন: টেবিল;
ব্যাকগ্রাউন্ড-রঙ: #175812;
margin-bottom:50px;
}

#কামতুকাগনপোস(
float: বাম;
ফন্ট-আকার: 25px;
টেক্সট-ট্রান্সফর্ম: বড় হাতের অক্ষর;
রঙ: #fffab2;
ফন্ট-ওজন: 600;
প্যাডিং: 19.8px 0px;
}

#kamtukagnpos:hover (
পাঠ্য-ছায়া: 0px 0px 6px rgba(255, 250, 250, 0.67);
}

Nav(
প্রস্থ: স্বয়ংক্রিয়;
float: right;
}

নভ উল(
প্রদর্শন: টেবিল;
float: right;
}

নাভুল্লি(
float:বাম;
}

নব উল লি: শেষ সন্তান (
প্যাডিং-ডান:0px;
}

নাভুল্লি এ (
রঙ: #e4f2ff;
ফন্ট-আকার: 19px;
প্যাডিং: 24px 19px;
প্রদর্শন: ইনলাইন-ব্লক;
পাঠ্য-ছায়া: 0 1px 0 #2e2f2e;
}

নভ উল লি আ: হোভার (
ব্যাকগ্রাউন্ড-রঙ: #143a06;
রঙ: #fff9c8;
রূপান্তর: সমস্ত 0.7s সহজ 0s;
পাঠ্য-ছায়া: 0 1px 0 #282b28;
}

নভ উল লি আ: হোভার আমি (
রঙ: #fdf7c9;
রূপান্তর: সমস্ত 0.7s সহজ 0s;
পাঠ্য-ছায়া: 0 1px 0 #1c1d1c;
}

নব উল লি আ আমি (
প্যাডিং-ডান: 9px;
রঙ: #f4faff;
রূপান্তর: সমস্ত 0.7s সহজ 0s;
পাঠ্য-ছায়া: 0 1px 0 #202120;
}

নেভিগেশন-মেনুসাইটা উল(
প্রদর্শন: টেবিল;
প্রস্থ: 24px;
}

নেভিগেশন-মেনুসাইটা উল লি(
প্রস্থ: 100%;
উচ্চতা: 3px;
ব্যাকগ্রাউন্ড-রঙ:#e9f0f7;
margin-bottom:4px;
}

নেভিগেশন-মেনুসাইটা উল লি:লাস্ট-চাইল্ড(
margin-bottom:0px;
}

ইনপুট, লেবেল(
প্রদর্শন: কোনোটিই নয়;
}

@মিডিয়া শুধুমাত্র স্ক্রীন এবং (সর্বোচ্চ-প্রস্থ: 1440px)(
বিভাগ(
সর্বোচ্চ-প্রস্থ: 95%;
}
}

@মিডিয়া শুধুমাত্র স্ক্রীন এবং (সর্বোচ্চ-প্রস্থ: 980px)(
শিরোনাম(
প্যাডিং: 20px 0px;
}

#কামতুকাগনপোস(
প্যাডিং: 0px;
}

ইনপুট(
অবস্থান: পরম;
শীর্ষ: -9999px;
বাম: -9999px;
ব্যাকগ্রাউন্ড: কোনোটিই নয়;
}

ইনপুট: fous(
ব্যাকগ্রাউন্ড: কোনোটিই নয়;
}

লেবেল(
float: right;
প্যাডিং: 8px 0px;
প্রদর্শন:ইনলাইন-ব্লক;
কার্সার:পয়েন্টার;
}

ইনপুট: চেক করা ~ nav(
প্রদর্শন: ব্লক;
}

Nav(
প্রদর্শন: কোনোটিই নয়;
অবস্থান: পরম;
ডান:0px;
শীর্ষ:53px;
ব্যাকগ্রাউন্ড-রঙ:#174810;
প্যাডিং: 0px;
z-সূচক:99;
}

নভ উল(
প্রস্থ: স্বয়ংক্রিয়;
}

নাভুল্লি(
float: none;
প্যাডিং: 0px;
প্রস্থ: 100%;
প্রদর্শন: টেবিল;
}

নাভুল্লি এ(
রঙ:#f7f2f2;
ফন্ট-আকার: 15px;
প্যাডিং: 10px 20px;
প্রদর্শন: ব্লক;
বর্ডার-নিচ: 1px কঠিন rgba(204, 197, 197, 0.1);
}

নব উল লি আ আমি(
রঙ:#f9f5d5;
প্যাডিং-ডান: 13px;
}
}

@মিডিয়া শুধুমাত্র স্ক্রীন এবং (সর্বোচ্চ-প্রস্থ: 480px) (
বিভাগ (সর্বোচ্চ-প্রস্থ: 90%;)
}

@মিডিয়া শুধুমাত্র স্ক্রীন এবং (সর্বোচ্চ-প্রস্থ: 360px) (
লেবেল (প্যাডিং:5px 0px;)
#kamtukagnpos (ফন্টের আকার: 20px;)
nav(শীর্ষ:47px;)
}

ইনস্টল করার আগে, ডেমো পৃষ্ঠাটি দেখতে এবং সবকিছু কীভাবে কাজ করে তা সত্যই মূল্যায়ন করা গুরুত্বপূর্ণ, তবে বাস্তবে এমন কিছুই নেই, কেবলমাত্র সম্পদের নামে একটি প্রভাব যুক্ত করা হয়েছে, যেখানে, হোভার করা হলে, সমস্ত লক্ষণ একটি ছায়ার নীচে যান, যা অনেক উজ্জ্বল প্রদর্শিত হয়।

এই পোস্টে আমরা একটি নির্দিষ্ট পার্শ্ব তথ্য মেনু তৈরি করব। আইকন বাস্তবায়ন করতে, আমরা ফন্ট সংযোগ করব।

ধাপ 1. আইকনগুলির সাথে ফন্টটি সংযুক্ত করুন, একটি খালি নথি তৈরি করুন৷

আপনি FontAwesome ফন্টের সাথে কাজ করার বিষয়ে বিস্তারিত তথ্য এবং আমার পোস্টে নিজেই প্রকল্পের একটি লিঙ্ক পেতে পারেন।

সংযুক্ত ফাইলগুলির সাথে পৃষ্ঠাটির কোড এখানে রয়েছে:

ধাপ 2: স্থির মেনুর জন্য HTML মার্কআপ যোগ করুন

এখানে আমাদের নির্দিষ্ট মেনুর জন্য মার্কআপ কোড আছে:

আপনি লক্ষ্য করেছেন, আমি ট্যাগ ব্যবহার করেছি

ধাপ 3. সাবমেনুর জন্য HTML মার্কআপ যোগ করুন

• আপনার লিঙ্ক টেক্সট
• আপনার লিঙ্ক টেক্সট
• আপনার লিঙ্ক টেক্সট

সাবমেনু হল মূল মেনুর মতো একই তালিকা, প্লাস একটি ট্যাগ , যা "বাম দিকের গাড়ি" আইকনটি প্রদর্শন করে, এক ধরণের "লেজ" এর কার্য সম্পাদন করে, নীচের ছবিতে আরও বিশদ :)

এই উপাদানটি মেনু ব্লক এবং সাবমেনুর মধ্যে শূন্যতাকেও সংযুক্ত করে, যার ফলে আমরা ট্রানজিশন বিকল্পটি বাস্তবায়ন করতে পারি।

ধাপ 4. ফিক্সড সাইড মেনুর জন্য স্টাইল লিখুন

আমি স্টাইল কোডে মন্তব্য করার চেষ্টা করেছি যেখানে এটি গুরুত্বপূর্ণ। সাধারণভাবে, সমস্ত মন্তব্য না করা পয়েন্টগুলি ব্যাকগ্রাউন্ড, রঙ ইত্যাদির সাধারণ স্টাইলাইজেশনের সাথে সম্পর্কিত।

#সাইডবার-মেনু ( অবস্থান: স্থির; /* আমাদের মেনু ঠিক করুন */ শীর্ষ: 200px; /* ব্রাউজারের উপরের প্রান্তের সাথে সম্পর্কিত মেনুটির অবস্থান */ বাম: 0; /* মেনুটিকে বাম প্রান্তে আটকে দিন * / প্যাডিং: 10px; ব্যাকগ্রাউন্ড: #FFF; 0 8px 0; ) #sidebar-menu li ( /* সেট একটি নির্দিষ্ট আকার, উচ্চতা এবং লাইন- উচ্চতা একই হওয়া উচিত: 27px লাইন-উচ্চতা: #3CB7E7 (মার্জিন-টপ: 4px;) #সাইডবার; -মেনু b ( প্রদর্শন: কোনোটিই নয়; অবস্থান: পরম; /* বাম প্রান্তের সাথে সম্পর্কিত অবস্থান li */ left: 27px; শীর্ষ: 0; উচ্চতা: 27px; /* প্রস্থ উপাদানটির প্রস্থের সমান ব্লক মেনু এবং সাবমেনু */ প্রস্থ: 27px; ব্যাকগ্রাউন্ড: #323A45; -সারিবদ্ধ: ডান) -মেনু li > ul ( প্রদর্শন: কিছুই নয়;

অবস্থান: পরম;
শীর্ষ: -10px; বাম: 42px; 🙂

প্রস্থ: 120px;

প্যাডিং: 10px;

পটভূমি: #323A45; সীমানা-ব্যাসার্ধ: 8px; ) #sidebar-menu li:hover b, #sidebar-menu li:hover ul (display: block;) #sidebar-menu li a (display: block; padding: 4px 8px; সীমানা-ব্যাসার্ধ: 4px; রঙ: #FFF ; -webkit-ট্রানজিশন: all .2s; -o-transition: all .2s ) #sidebar-menu :hover (প্রদর্শন: ব্লক; ব্যাকগ্রাউন্ড: #3CB7E7;)আপনার যদি স্টাইলিং সম্পর্কে প্রশ্ন থাকে তবে এই পোস্টে মন্তব্যে লিখুন, আমি উত্তর দিতে পেরে খুশি হব। তাই তো!ফিক্সড সাইড মেনু প্রস্তুত এটি সাইটের বিভিন্ন পৃষ্ঠার দিকে পরিচালিত লিঙ্কগুলির একটি তালিকা৷ এটি ভাল দেখায় যখন লিঙ্কগুলির তালিকা, সাধারণ মার্কারগুলির পরিবর্তে, আইকনগুলির সাথে পরিপূরক হয় এবং এখানে গ্রাফিক্স ব্যবহার করা মোটেই প্রয়োজনীয় নয়৷ কেন অপ্রয়োজনীয় ডাটাবেস প্রশ্ন তৈরি?এইচটিএমএল কোড ট্যাগের মধ্যে li লিঙ্ক লিখুনক এটি সাইটের বিভিন্ন পৃষ্ঠার দিকে পরিচালিত লিঙ্কগুলির একটি তালিকা৷ এটি ভাল দেখায় যখন লিঙ্কগুলির তালিকা, সাধারণ মার্কারগুলির পরিবর্তে, আইকনগুলির সাথে পরিপূরক হয় এবং এখানে গ্রাফিক্স ব্যবহার করা মোটেই প্রয়োজনীয় নয়৷ কেন অপ্রয়োজনীয় ডাটাবেস প্রশ্ন তৈরি?(# অস্থায়ী স্টাব) ভিতরে দুটি ব্লক উপাদান সহ

• 
  
  
  স্প্যান
  
  


• 
  
  
  মোটরসাইকেল
  
  


• 
  
  
  বাস
  
  


• 
  
  
  গাড়ি
  
  


• 
  
  
  হেলিকপ্টার
  
  

ট্যাগের মধ্যে সংযোগ করার পর মাথাআইকন ফন্ট লিঙ্ক লিখুন- মেনু এই মত দেখায়.

CSS শৈলী

দিয়ে শুরু করতে গুগল ফন্টআমরা একটি আকর্ষণীয় ফন্ট নির্বাচন করব যা সিরিলিক সমর্থন করে যদি উল্লম্ব মেনুটি রাশিয়ান হয়।

নির্বাচিত ফন্টের সংযোগ কোডটি অনুলিপি করুন এবং উপরে পেস্ট করুন সিএসএসফাইল

@import url("https://fonts.googleapis.com/css?family=Marck+Script");

নির্বাচকের মধ্যে শরীরনির্বাচিত ফন্টের নাম লিখুন এবং এর আকার সেট করুন।

শরীর (
মার্জিন: 0;
প্যাডিং: 0;
font-family: "মার্ক স্ক্রিপ্ট", sans-serif;
ফন্ট-আকার: 20px;
}

আমরা ব্রাউজার উইন্ডোর সাপেক্ষে আমাদের মেনুকে 10% এবং বাম থেকে 20% করে পিছিয়ে রাখি। অবশ্যই, এই সংখ্যাগুলি সিলিং থেকে নেওয়া হয়;

উল (
অবস্থান: পরম;
শীর্ষ: 10%;
বাম: 20%;
}

আমরা মেনুর প্রস্থ 200 পিক্সেলে ঠিক করি।

প্রস্থ: 200px;

আমরা তালিকা মেনু আইটেম পৌঁছেছেন. আইটেম থেকে মার্কার অপসারণ সীমানা-ব্যাসার্ধ: 8px; ) #sidebar-menu li:hover b, #sidebar-menu li:hover ul (display: block;) #sidebar-menu li a (display: block; padding: 4px 8px; সীমানা-ব্যাসার্ধ: 4px; রঙ: #FFF ; -webkit-ট্রানজিশন: all .2s; -o-transition: all .2s ) #sidebar-menu :hover (প্রদর্শন: ব্লক; ব্যাকগ্রাউন্ড: #3CB7E7;).

উলি (
list-style: none;
}

আমরা উপরের এবং নীচে ফ্রেমগুলিকে মনোনীত করি যা একে অপরের থেকে মেনু আইটেমগুলিকে আলাদা করে।

বর্ডার-টপ: 1px কঠিন #131313;
বর্ডার-নিচ: 1px কঠিন #131313;
মার্জিন: -1px 0;

আইকন এবং লিঙ্ক নামের মধ্যে পর্যাপ্ত পার্শ্ব ফ্রেম এবং বিভাজক নেই।

ট্যাগের জন্য সঠিক ফ্রেম আঁকুন তাই তো!, যা একটি ইনলাইন উপাদান, এবং আপনি একটি ইনলাইন উপাদানের চারপাশে একটি সীমানা তৈরি করতে পারবেন না। অতএব, আমরা ট্যাগ প্রদর্শন তাই তো!ব্লক উপাদান।

উল্লি আ (
প্রদর্শন: ব্লক;
}

এখন আপনি ফ্রেম সেট করতে পারেন, লিঙ্কগুলির আন্ডারলাইনিং মুছে ফেলতে পারেন এবং লিঙ্কগুলির রঙ নির্দিষ্ট করতে পারেন।

বর্ডার-ডান: 1px কঠিন #131313;
পাঠ্য-সজ্জা: কোনোটিই নয়;
রঙ: #131313;

বাম ফ্রেম এখনও অনুপস্থিত.

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

উল্লি একটি স্প্যান (
অবস্থান: আপেক্ষিক;
প্রদর্শন: ইনলাইন-ব্লক;
}

আমরা প্রথম জন্য প্রয়োজন এটি সাইটের বিভিন্ন পৃষ্ঠার দিকে পরিচালিত লিঙ্কগুলির একটি তালিকা৷ এটি ভাল দেখায় যখন লিঙ্কগুলির তালিকা, সাধারণ মার্কারগুলির পরিবর্তে, আইকনগুলির সাথে পরিপূরক হয় এবং এখানে গ্রাফিক্স ব্যবহার করা মোটেই প্রয়োজনীয় নয়৷ কেন অপ্রয়োজনীয় ডাটাবেস প্রশ্ন তৈরি?, যার ভিতরে একটি আইকন থাকবে, স্টাইল সেট করুন যা দ্বিতীয় থেকে আলাদা এটি সাইটের বিভিন্ন পৃষ্ঠার দিকে পরিচালিত লিঙ্কগুলির একটি তালিকা৷ এটি ভাল দেখায় যখন লিঙ্কগুলির তালিকা, সাধারণ মার্কারগুলির পরিবর্তে, আইকনগুলির সাথে পরিপূরক হয় এবং এখানে গ্রাফিক্স ব্যবহার করা মোটেই প্রয়োজনীয় নয়৷ কেন অপ্রয়োজনীয় ডাটাবেস প্রশ্ন তৈরি?. এই উদ্দেশ্যে প্রথম এটি সাইটের বিভিন্ন পৃষ্ঠার দিকে পরিচালিত লিঙ্কগুলির একটি তালিকা৷ এটি ভাল দেখায় যখন লিঙ্কগুলির তালিকা, সাধারণ মার্কারগুলির পরিবর্তে, আইকনগুলির সাথে পরিপূরক হয় এবং এখানে গ্রাফিক্স ব্যবহার করা মোটেই প্রয়োজনীয় নয়৷ কেন অপ্রয়োজনীয় ডাটাবেস প্রশ্ন তৈরি?ছদ্ম-শ্রেণী দ্বারা বোঝানো - span:nম-সন্তান(1)এবং আলাদাভাবে স্টাইল করুন। ডান এবং বাম ফ্রেম এবং প্রস্থ সেট করুন।

Ul li a span:nth-child(1) (
প্রস্থ: 30px;
সীমানা-বাম: 1px কঠিন #131313;
সীমানা-ডান: 1px কঠিন #131313;
}

আইকনগুলি মাঝখানে 10 পিক্সেল মার্জিন সহ সমস্ত দিক দিয়ে স্থাপন করা হবে।

পাঠ্য-সারিবদ্ধ: কেন্দ্র;
প্যাডিং: 10px;

আইকনগুলি লাল পটভূমিতে গাঢ় রঙের, 20 পিক্সেল আকারের হবে।

রঙ: #131313;
ফন্ট-আকার: 20px;
পটভূমি: #f44336;

দ্বিতীয় ছদ্ম-শ্রেণীতে, আপনাকে কেবল ক্ষেত্রগুলি সেট করতে হবে।

Ul li a span:nth-child(2) (
প্যাডিং: 10px;
}

এখন উল্লম্ব মেনুচূড়ান্ত রূপ নিয়েছে। সম্পূর্ণ কোড এবং ফলাফল দেখুন।

শুভ দিন, প্রিয় পাঠক। আজ আমরা বিষয়টি দেখব " কিভাবে HTML এবং CSS ব্যবহার করে একটি অনুভূমিক মেনু তৈরি করবেন" মেনু, একটি নিয়ম হিসাবে, সাইটের শিরোনামে অবস্থিত এবং সবচেয়ে গুরুত্বপূর্ণ পৃষ্ঠাগুলির লিঙ্কগুলির একটি তালিকা, এটিও বলা হয় প্রধান মেনু. ব্যবহারকারীরা ক্রমাগত এই লিঙ্কগুলিতে ক্লিক করবে। আপনি কিভাবে তাদের সাজান এবং মেনুর জন্য আপনি কোন ডিজাইন সেট করেছেন তা ব্যবহারকারীর আচরণ, রূপান্তর, তাদের প্রভাবিত করবে সাধারণ ছাপআপনার সাইট থেকে এবং, অবশ্যই, অন.

অনুভূমিক মেনুর জন্য HTML কোড

এক সময়, একটি ওয়েবসাইটের প্রধান মেনু ছবি, টেবিল, ফ্ল্যাশ এবং সম্ভবত অন্য কিছুতে তৈরি করা হত, কিন্তু আজকাল এটি সবচেয়ে জনপ্রিয় এবং এটিও সঠিক পদ্ধতি"তালিকা" ট্যাগ ব্যবহার করে একটি মেনু তৈরি করা।

ট্যাগ মেনু তৈরি করতে ব্যবহার করা হয়

,
• এবং .

নীচের কোডে একটি মেনু তৈরি করতে html ট্যাগ ব্যবহার করার একটি উদাহরণ:

• বাড়ি
• সেবা
• দাম
• পরিচিতি

অনুভূমিক মেনুর জন্য স্ট্যান্ডার্ড CSS শৈলী

ul ( তালিকা-শৈলী: কোনোটিই নয়; /*লিস্ট মার্কারগুলি সরান*/ মার্জিন: 0; /*প্যাডিং সরান*/ প্যাডিং-বাম: 0; /*প্যাডিং সরান*/ ) a (টেক্সট-সজ্জা: কিছুই নয়; /*আন্ডারলাইন সরান লিংক টেক্সট*/ ) li ( float:left; /*মেনু বাস্তবায়ন করতে তালিকাটি অনুভূমিকভাবে রাখুন*/ margin-right:5px; /*মেনু আইটেমগুলিতে ইন্ডেন্টেশন যোগ করুন*/ )

আমরা হেডারে একটি রেডিমেড টপ মেনু পাই, কোন বিশেষ স্টাইল বা ঘণ্টা এবং শিস ছাড়াই, এটিকে আপনার ভবিষ্যতের সুন্দর মেনুর ফ্রেম বলা যেতে পারে। এই html এবং css কপি পেস্ট করলে এরকম দেখাবে।

আপনার ভবিষ্যতের মেনুর জন্য একটি ফ্রেমের (টেমপ্লেট) উদাহরণ

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

float:left ছাড়াও একটি মেনুকে অনুভূমিক করতে ব্যবহার করা হয় এমন আরও বেশ কিছু CSS পদ্ধতি রয়েছে; যেমন প্রদর্শন:ইনলাইন-ব্লক; বা প্রদর্শন: flex; , তবে উপরে বর্ণিত পদ্ধতিটি ব্যবহার করার পরামর্শ দেওয়া হয়।

আমাদের মেনু টেমপ্লেট পূরণ করা যাক বিভিন্ন শৈলীএবং এর এটা করা যাক সুন্দর.

একটি ওয়েবসাইটের জন্য একটি সুন্দর অনুভূমিক মেনুর উদাহরণ

এখন আমি রেডিমেড অনুভূমিক মেনু ডিজাইন সহ বেশ কয়েকটি রেডিমেড উদাহরণ দেব।

আপনি ইন্টারনেটে অনুসন্ধানের পরিবর্তে নিজের ওয়েবসাইটের জন্য সমস্ত "সুন্দর" তৈরি করতে পারেন৷ এটি করার সবচেয়ে সহজ উপায় হল নীচের উদাহরণগুলির একটি ভিত্তি হিসাবে ব্যবহার করা।

আলাদা আইটেম সহ সাধারণ নীল মেনু

শীর্ষ মেনুর জন্য CSS শৈলী

নীচে এই মেনুর জন্য শৈলী আছে. HTML মেনু "ফ্রেমওয়ার্ক" এর মতোই থাকে।

Ul ( তালিকা-শৈলী: কোনোটিই নয়; /*লিস্ট মার্কারগুলি সরান*/ মার্জিন: 0; /*প্যাডিং সরান*/ প্যাডিং-বাম: 0; /*প্যাডিং সরান*/ মার্জিন-টপ:25px; /*প্যাডিং শীর্ষে তৈরি করুন* / ) a ( টেক্সট-ডেকোরেশন: কিছুই নয়; /*লিঙ্ক টেক্সটের আন্ডারলাইনিং সরিয়ে দিন */ প্যাডিং: 10px; /*add indent*/ font-family: arial; /* হরফ পরিবর্তন করুন*/ -moz-ট্রানজিশন: সমস্ত 0.3s 0.01s; /*একটি মসৃণ রূপান্তর করুন*/ -ও-ট্রানজিশন: সমস্ত 0.3s 0.01s সহজ; -ওয়েবকিট-ট্রানজিশন: সমস্ত 0.3s 0.01s সহজ; ) li ( float:left; /*মেনু বাস্তবায়ন করতে অনুভূমিকভাবে তালিকাটি রাখুন*/ margin-right:5px; /*মেনু আইটেমগুলিতে ইন্ডেন্টেশন যোগ করুন*/ )

প্রধান মেনু একটি লাল পটভূমি সহ একটি রঙিন লাইনে অবস্থিত

কালার লাইনে CSS মেনু শৈলী

ul ( তালিকা-শৈলী: কোনটিই নয়; /*লিস্ট মার্কারগুলি সরান*/ মার্জিন: 0; /*প্যাডিং সরান*/ প্যাডিং-বাম: 0; /*প্যাডিং সরান*/ মার্জিন-টপ:25px; /*প্যাডিং শীর্ষে তৈরি করুন* / ব্যাকগ্রাউন্ড:#FF4444; /*পুরো মেনুতে একটি পটভূমি যোগ করুন (এই প্যারামিটারটি প্রতিস্থাপন করে, আপনি পুরো মেনুর রঙ পরিবর্তন করবেন)*/ উচ্চতা: 50px; /*উচ্চতা সেট করুন*/ ) : কোনটি নয়; /*লিঙ্ক পাঠ্যের আন্ডারলাইনিং সরান:#FF4444; ; /*লিংকের রঙ পরিবর্তন করুন*/ প্যাডিং: 0px 15px / *প্যাডিং যোগ করুন*/ ফন্ট পরিবর্তন করুন*/ লাইন-উচ্চতা: 50px; বর্ডার-ডান: 1px সলিড #F36262; ) a:hover (পটভূমি:#D43737;/ *একটি হোভার প্রভাব যোগ করুন*/ ) li ( float:left; /*একটি মেনু প্রয়োগ করতে অনুভূমিকভাবে তালিকাটি রাখুন*/ )

HTML+CSS-এ ড্রপডাউন মেনু

বাস্তবায়নের জন্য সাইটে অতিরিক্ত ড্রপ-ডাউন (ড্রপ-ডাউন) মেনুযেকোনো মেনু আইটেমের জন্য, আমাদের অনুভূমিক মেনু থেকে যেকোনো লিঙ্কের জন্য HTML কোডে আইটেমগুলির একটি অতিরিক্ত তালিকা যোগ করতে হবে এবং CSS শৈলী পরিবর্তন করতে হবে। স্টাইলগুলিতে আমরা একটি সহজ কৌশল ব্যবহার করব - আমাদের প্রয়োজনীয় আইটেমটির উপর ঘোরার মাধ্যমে ড্রপ-ডাউন মেনুটির প্রদর্শন পরিবর্তন করা। শীর্ষ মেনু. উদাহরণস্বরূপ, আসুন "পরিষেবা" আইটেমটি নেওয়া যাক।

একটি সাধারণ ড্রপডাউন মেনু তৈরির উদাহরণ

ড্রপডাউন মেনু HTML কোড

• বাড়ি
• সেবা
  • সেবা 1
  • দীর্ঘ সেবা 2
  • সেবা 3
• দাম
• পরিচিতি

ড্রপডাউন মেনু CSS শৈলী

ul ( তালিকা-শৈলী: কোনটিই নয়; /*লিস্ট মার্কারগুলি সরান*/ মার্জিন: 0; /*প্যাডিং সরান*/ প্যাডিং-বাম: 0; /*প্যাডিং সরান*/ মার্জিন-টপ:25px; /*প্যাডিং শীর্ষে তৈরি করুন* / ব্যাকগ্রাউন্ড:#819A32; /*পুরো মেনুতে একটি ব্যাকগ্রাউন্ড যোগ করুন*/ উচ্চতা: /*উচ্চতা সেট করুন*/ ) a (টেক্সট-ডেকোরেশন: কোনটি নয়; /*লিঙ্ক টেক্সটের আন্ডারলাইনিং সরিয়ে দিন*/ ব্যাকগ্রাউন্ড: #819A32; /*মেনু আইটেমটিতে একটি পটভূমি যোগ করুন: #ffff; */ লাইন-উচ্চতা: 50px; বর্ডার-ডান: 1px সলিড #677B27; মসৃণ রূপান্তর*/ -ও-ট্রানজিশন: সমস্ত 0.3s 0.01s সহজ; -ওয়েবকিট-ট্রানজিশন: সমস্ত 0.3s 0.01s সহজ; :বাম; /*মেনুটি বাস্তবায়ন করতে অনুভূমিকভাবে রাখুন* / অবস্থান: আপেক্ষিক;

শীর্ষ:25px;

প্রদর্শন: কোনোটিই নয়;

) /*লুকানো অংশটিকে দৃশ্যমান করুন*/ li:hover > ul ( display:block; width:250px; /*ড্রপ-ডাউন মেনুর প্রস্থ সেট করুন*/ ) li:hover > ul > li ( float:none; /*অনুভূমিক অবস্থান সরান*/)

এবং আপনার কোন পরিষেবা এবং বিভাগগুলি থাকা উচিত তা বোঝার জন্য, আমি আপনাকে উপাদানটি পড়ার পরামর্শ দিচ্ছি: .

আমি আপনাকে যতটা সম্ভব সংক্ষিপ্তভাবে বলার চেষ্টা করেছি কিভাবে একটি প্রধান অনুভূমিক মেনু তৈরি করা যায়, বেশ কয়েকটি টেমপ্লেট তৈরি করা যায়, কীভাবে এটিতে সহজ শৈলী যোগ করা যায় এবং এটিকে আরও সুন্দর করা যায়, কীভাবে আপনার সাইটের জন্য একটি ড্রপ-ডাউন মেনু তৈরি করা যায়। সুবিধার জন্য, আমি উপরে উপস্থাপিত সমস্ত মেনু একটি html ফাইলে সংগ্রহ করেছি, যা আপনি নীচে ডাউনলোড করতে পারেন। এটা স্ক্রিনশট মত দেখায়:

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

প্রদর্শন: flex;

রূপান্তর ব্যবহার করুন;

আমরা অবস্থান ব্যবহার করে উপাদানের অবস্থান করব। HTML অনুভূমিক মেনু গঠন».

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

আবেদন ক্লিক করুন.

আসুন মেনু আইটেমগুলির নাম লিখি ( বাড়ি, পণ্য, পরিষেবা, খবর, পরিচিতি).

এর পরে, আইকনগুলি নির্বাচন করুন এবং সংযোগ করুন। Font Awesome ওয়েবসাইটে যান, এই মেনু আইটেমগুলির জন্য আইকন নির্বাচন করুন:

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

ফন্ট ফোল্ডারে আইকন ফন্ট থাকে এবং CSS ফোল্ডারে তাদের শৈলী থাকে। font-awesome.min থেকে সংকুচিত শৈলীগুলি সরানো যেতে পারে, আসুন আনকমপ্রেসড font-awesome.css অন্তর্ভুক্ত করি।

index.html এ আমরা আইকনগুলিকে সংযুক্ত করি এবং প্রতিটি আইটেমের নিজস্ব আইকন শৈলী বরাদ্দ করি ( বাড়ি, শপিং কার্ট, cogs, তম তালিকা, খাম-খোলা).

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

বডি (পটভূমি-চিত্র: url(../img/ep_naturalwhite.png");)

আমরা অনুভূমিক মেনুর CSS শৈলী বর্ণনা করি

প্রথমত, বিভিন্ন ব্রাউজার ডিফল্টরূপে সেট করতে পারে এমন সমস্ত ইন্ডেন্ট রিসেট করি:

Dws-মেনু *( মার্জিন: 0; প্যাডিং: 0;)

হেডার 200 পিক্সেলে সেট করা যাক। এবং Cuprum ফন্ট বরাদ্দ করুন, যা ডাউনলোড করা যেতে পারে এবং আলাদাভাবে আপনার ওয়েবসাইটে সংযুক্ত করা যেতে পারে, শুধুমাত্র যদি আমরা অতিরিক্ত ফন্ট যোগ করব।

হেডার ( মার্জিন: 200px; ফন্ট-পরিবার: Cuprum, Arial, Helvetica, sans-serif; )

আসুন তালিকা থেকে চিহ্নিতকারীগুলিকে লুকাই:

Dws-মেনু ul, .dws-মেনু ol( তালিকা-শৈলী: কিছুই নয়; )

আসুন display:flax ব্যবহার করে তালিকাগুলি অনুভূমিকভাবে প্রদর্শন করি এবং এটিকে কেন্দ্রীভূত করি:

Dws-মেনু > ul ( প্রদর্শন: ফ্লেক্স; ন্যায্যতা-সামগ্রী: কেন্দ্র; )

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

হেডার( মার্জিন-টপ: 200px;ফন্ট-পরিবার: Cuprum, Arial, Helvetica, sans-serif; )

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

Dws-মেনু > ul li a ( প্রদর্শন: ব্লক; ব্যাকগ্রাউন্ড: #ececed; প্যাডিং: 15px 30px 15px 40px; ফন্ট-সাইজ: 14px; রঙ: #454547; পাঠ্য-সজ্জা: কিছুই নয়; পাঠ্য-রূপান্তর: বড় হাতের অক্ষর; )

তারপরে আমরা আইকনগুলি অবস্থান করি, অবস্থান নির্ধারণ করি: তালিকার সাথে সম্পর্কিত;

আইকনগুলিকে আরও কেন্দ্রীভূত করতে:

Dws-মেনু > ul li > a i.fa ( অবস্থান: পরম; শীর্ষ: 15px; বাম: 12px; ফন্ট-সাইজ: 18px; )

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

Dws-মেনু > ul li:first-child( বর্ডার-বাম: 1px solid #b2b3b5; ) .dws-মেনু > ul li:last-child (বর্ডার-ডান: 1px solid #babbbd; )

আমরা তালিকা বিভাজক LI তৈরি করি:

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

মেনু কেনা চেহারা, তারপর আপনি হোভার শৈলী বর্ণনা শুরু করতে পারেন।

হোভারে অনুভূমিক মেনু অ্যানিমেটিং করা হচ্ছে

Dws-মেনু li a:hover( পটভূমি: #454547; রঙ: #ffffff; বক্স-ছায়া: 1px 5px 10px -5px কালো; রূপান্তর: সমস্ত 0.3s সহজ; )

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

.dws-মেনু > ul li a( প্রদর্শন: ব্লক; ব্যাকগ্রাউন্ড: #ececed; প্যাডিং: 15px 30px 15px 40px; ফন্ট-সাইজ: 14px; রঙ: #454547; পাঠ্য-সজ্জা: কিছুই নয়; পাঠ্য-রূপান্তর: বড় হাতের অক্ষর;রূপান্তর: সমস্ত 0.3s সহজ;

)

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

একটি CSS/HTML ড্রপডাউন মেনু বর্ণনা করা

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

ul>li*5>a প্রয়োগ ক্লিক করুন, আইটেমগুলির নাম লিখুন ().

• পোশাক, ইলেকট্রনিক্স, খাদ্য, সরঞ্জাম, গৃহস্থালী। রসায়ন
• কাপড়
• ইলেকট্রনিক্স
• খাদ্য
• টুলস

জীবন রসায়ন

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

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

/*সাব মেনু*/ .dws-মেনু li ul( অবস্থান: পরম; সর্বনিম্ন-প্রস্থ: 150px; )

তালিকায় 1 পিকের একটি সীমানা নির্ধারণ করা যাক।

Dws-মেনু li > ul li (সীমানা: 1px কঠিন #c7c8ca; )

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

Dws-মেনু li > ul li a ( প্যাডিং: 10px; টেক্সট-ট্রান্সফর্ম: কিছুই নয়; ব্যাকগ্রাউন্ড: #e4e4e5; ) এর পরে, আরেকটি সাবমেনু তৈরি করা যাক। আসুন মার্কআপ ফাইলে যাই এবং উদাহরণস্বরূপ, "ইলেক্ট্রনিক্স" এ আমরা আগে যা করেছি তার মতো একটি মেনু তৈরি করি। আমরা অনুচ্ছেদের শিরোনাম বর্ণনা করি (ক্যামেরা, কম্পিউটার, ফোন

) এবং সংরক্ষণ করুন।

• ইলেকট্রনিক্স
• ক্যামেরা
• কম্পিউটার

ফোন

তারা প্রদর্শিত হয়, কিন্তু প্রধান মেনু অধীনে লুকানো, এখন অবস্থান: পরম;

/*সাব মেনু*/ .dws-মেনু li ul( অবস্থান: পরম; সর্বনিম্ন-প্রস্থ: 150px;প্রদর্শন: কোনোটিই নয়;

)

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

Dws-মেনু li: hover > ul ( প্রদর্শন: ব্লক; ) এখন আপনি যোগ করতে পারেনবহু-স্তরের মেনু

• বাড়ি
• শুধুমাত্র UL ব্লক অনুলিপি করে, এর পয়েন্ট পরিবর্তন করে।
  • পণ্য
    • কাপড়
    • জুতা
    • জ্যাকেট
  • ) এবং সংরক্ষণ করুন।
    • ইলেকট্রনিক্স
    • ক্যামেরা
    • ট্রাউজার্স
      • ফোন
      • স্যামসাং
      • Flf
  • ইলেকট্রনিক্স
  • খাদ্য
  • টুলস
• সেবা
  • সেবা 1
  • আপেল
  • সেবা 3
• সেবা 2
• পরিচিতি

খবর

তাহলে আসুন একটি উপাদান দিয়ে বোতামগুলিকে সাজিয়ে চূড়ান্ত পদক্ষেপগুলি সম্পূর্ণ করি। আমি একটি সিএসএস জেনারেটর ব্যবহার করি, আমি বেশ কয়েকটি প্রিসেট তৈরি করেছি, আপনি নিজের তৈরি করতে পারেন, আমার ক্ষেত্রে আমি এই কোডটি কপি করে ব্যাকগ্রাউন্ডের জায়গায় রেখেছি যা আমি আগে লিখেছিলাম। .dws-মেনু > ul li a( প্রদর্শন: ব্লক; /* পার্মালিঙ্ক - এই গ্রেডিয়েন্টটি সম্পাদনা এবং শেয়ার করতে ব্যবহার করুন: http://colorzilla.com/gradient-editor/#c9c9c9+0,f6f6f6+2,c4c5c7+98,757577+100;Custom+3 */ background: #c9c9c9 ; /* পুরানো ব্রাউজার */ ব্যাকগ্রাউন্ড: -moz-লিনিয়ার-গ্রেডিয়েন্ট(শীর্ষ, #c9c9c9 0%, #f6f6f6 2%, #c4c5c7 98%, #757577 100%); /* FF3.6-15 */ ব্যাকগ্রাউন্ড: -ওয়েবকিট-লিনিয়ার-গ্রেডিয়েন্ট(শীর্ষ, #c9c9c9 0%,#f6f6f6 2%,#c4c5c7 98%,#757577 100%); /* Chrome10-25,Safari5.1-6 */ ব্যাকগ্রাউন্ড: লিনিয়ার-গ্রেডিয়েন্ট (নীচে, #c9c9c9 0%,#f6f6f6 2%,#c4c5c7 98%,#757577 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ ফিল্টার: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c9c9c9", endColorstr="#757577", GradientType); /* IE6-9 */প্যাডিং: 15px 30px 15px 40px; ফন্ট-আকার: 14px; রঙ: #454547;

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