Connect with us

চলুন HTML ও CSS দিয়ে একটা সুন্দর ন্যাভিগ্যাশন বার তৈরি করি।

ডেভেলপমেন্ট

চলুন HTML ও CSS দিয়ে একটা সুন্দর ন্যাভিগ্যাশন বার তৈরি করি।

ধন্যবাদ সবাইকে  আমার আজকের পোষ্টে। তো আজকে আমরা HTML CSS দিয়ে একটা ন্যাভিগ্যাশন বার তৈরি করব। ন্যাভিগ্যাশন বার প্রায় সব ব্লগেই থাকে যেমন এই ব্লগেও আছে।  এর জন্য আপনাকে অবশ্যই এইচটিএমএল ও সিএসএস সমন্ধ্যে বেসিক ধারনা থাকতে হবে।

যদি  কোন অভিজ্ঞ দাদা/ভাই থাকেন তাহলে এই পোষ্টটা পড়ে আপনার সময় নষ্ট করবেন না।কারন এটি শুধু আমার মতো যারা এই লাইনে নতুন তাদের জন্য।

তো চলুন কাজে নেমে পড়ি। প্রথমে দেখে আসি আমাদের ন্যাভিগ্যাশন বারটা দেখতে কেমন হবে।

preview

preview

 

 

ডেমো দেখতে এখানে যান।

উপরের ছবিতে লক্ষ করলে বুঝতে পারবেন এখানে কি কি করা আছে কি বুঝতে পারছেন না, তাহলে আসেন গভীরে ঝাপ দেয় ….. না আপনাকে জলে ঝাপ দিতে বলছি না এমনিতেই ঠান্ডার দিন।

কোডিং করার জন্য আমি নতুনদের নোটপ্যাড ++ ব্যাবহার করতে বলব। এ বিষয়ে এখানে আমার একটা পোষ্ট আছে দেখে নিতে পারেন এখানে

HTML preview

HTML preview

 

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

CSS preview

CSS preview

 

body{background:#3A6EA5; font-family:verdana; font-weight:bold; font-size:15px;}

প্রথমে আমরা বডিকে  স্টাইলাইজ করেছি। বডির একটা ব্যাকগ্রাউন্ড দিয়েছি তারপর কিছু ফন্টের কাজ করেছি আশা করি বুঝতে পেরেছেন।

.nav{margin:30px auto;width:960px;}

এটা দিয়ে আমরা যে nav নামে একটা ডিভ নিয়েছিলাম তাকে কল করেছি।

.nav ul{list-style:none;}

.nav ul li{float:left;background:#D4D0C8;border-left:1px solid #F0EADF;border-right:1px solid #92908B;display:block;}

.nav ul li:first-child{border-left:0px solid;}

.nav ul li:last-child{border-right:0px solid;}

.nav ul li a{color:#000;padding:15px;text-decoration:none;display:block;}

সাধারনত সবাই এইভাবেই ন্যাভমেনু স্টাইলাইজ করে থাকে তাই আমরাও এভাবে করব।

.nav ul{list-style:none;}

এটা দিয়ে লিষ্ট ষ্টাইল নান করেছি। মানে লিষ্ট হবে না।

.nav ul li{float:left;background:#D4D0C8;border-left:1px solid #F0EADF;border-right:1px solid #92908B;display:block;}

লিষ্টের আইটেম গুলো বামদিকে নিয়ে গেছি, তারপর লিষ্টের একটা ব্যাকগ্রাউন্ড দিয়েছি, তারপর বামে ও ডানে একটা বডার দিয়েছি যার ফলে প্রত্যেক লিষ্ট আইটেমের মাঝে একটা বডার দেখা যাচ্ছে যেটা দেখতে কিছুটা ভিতরের দিকে ঢুকে গেছে, তারপর ডিসপ্লে ব্লক করেছি।

.nav ul li:first-child{border-left:0px solid;}

.nav ul li:last-child{border-right:0px solid;}

এর দ্বারা আমাদের লিষ্ট আইটেমের একেবারে ডানে ও বামে যে বডার থাকে সেটা কেটে দিয়েছি।

.nav ul li a{color:#000;padding:15px;text-decoration:none;display:block;}

আমরা যে নাম গুলো নিয়েছিলাম তার কিছু স্টাইল করেছি। যেমন কালার – কালা, প্যাডিং – ১৫পিক্সেল, টেক্স ডেকোরেশন – নিচে যে দাগ আসে সেটা কেটে দিয়েছি পরেরটা বুঝতে পেরেছেন আশা করি।

.nav ul li a:hover{background:#0A246A;color:#fff;}

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

আমাদের সব কাজ শেষ এবার যেকোন ফোল্ডারে একটা index.html  ও একটা style.css নামে ফাইল নিয়ে এইচটিএমএল কোড গুলো index.html এ ও সিএসএস কোড গুলো style.css এ পেস্ট করুন, তারপর সেভ করে যে কোন ব্রাউজার  দিয়ে ওপেন করুন দেখুন মজা।

এটা হলো একটা বেসিক ন্যাভিগ্যাশন বার চাইলে আপনি আরো স্টাইলাইজ করতে পারবেন।

ধন্যবাদ সবাইকে। আজকের মতো বিদায় ।  সবাই ভালো থাকবেন।

সোর্স ফাইল এখানে

আর যদি কোন ভুল হয়ে থাকে তাহলে ভুলগুলো ধরিয়ে দিবেন। কারন ভুল করেই মানুষ শেখে আর আমিও এব্যাপারে খুবই নতুন ।

আমাকে পাবেন

facebook

facebook

Continue Reading
blank

প্রযুক্তি আমার পেশা না এটা আমার নেশা তাই সবসময় নতুন কিছু শেখার চেষ্টা করি । বেশি কিছু জানিনা তবে যেটুকু জানি সেটাই সবাই সাথে শেয়ার করার চেষ্টা করি।

Click to comment

You must be logged in to post a comment Login

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

More in ডেভেলপমেন্ট

Advertisement

বিভাগ সমূহ

টেক-বেঙ্গল পোল

"বাঙালীরা এখনো তথ্য প্রযুক্তি -তে পিছিয়ে" আপনি কি মনে করেন ?

View Results

Loading ... Loading ...

সেরা টেক বাঙালী

To Top