ওয়েব ডিজাইন শর্ট টেকনিক [পর্ব-০১] :: স্টিকি নেভিগেশন বার তৈরি করুন

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

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

ধাপ ১ :

• আপনার ওয়েব সাইটের টেমপ্লেটর  </body> অর্থাৎ body ট্যাগের ending tag খুঁজে বের করুন।
• এরপর নিচের কোডটুকু যুক্ত করুন।

1 2 3 4 5 6 7 8 9

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><script type="text/javascript">// <![CDATA[ $(document).ready(function() { var s = $("#sticker"); var pos = s.position(); $(window).scroll(function() { var windowpos = $(window).scrollTop(); if (windowpos >= pos.top) { s.addClass("stick"); } else { s.removeClass("stick"); } }); }); // ]]></script>

যদি টেমপ্লেটের অন্য কোথাও jQuery কল করা থাকে তাহলে ,

1	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

যুক্ত করার প্রয়োজন নেই।

কোড পর্যালোচনা:

উপরের কোডটুকুর কাজ হচ্ছে যে html ইলিমেন্টের sticker নামে  id থাকবে ,সেই ইলিমেন্টটিতে যখন পেজ স্ক্রল করা হবে তখন একটা stick নামে class যুক্ত হবে।

ধাপ ২ :

আমরা ইতোমধ্যেই বুঝতে পেরেছি যে , আমাদের নেভিগেশন বারকে স্টিকি করার জন্য নেভিগেশন বারটি যে div ইলিমেন্টের মধ্যে আছে সেই div ইলিমেন্টে sticker নামে একটা id যুক্ত করতে হবে।

ধাপ ৩ :

এখন টেমপ্লেটের css ফাইল ওপেন করে নিচের কোডটুকু যুক্ত করুন।

1 2 3 4 5 6 7

div#sticker { width:860px; } .stick { position:fixed; top:0px; }

সবকিছু Save করে চেক করুন ঠিক আছে কিনা । যদি width এ সমস্যা হয় div#sticker এর css পরিবর্তন করুন ।
সোর্স ফাইল ডাউনলোড করুন এখান থেকে
অথবা codepen থেকেও দেখে নিতে পারেন ।
http://codepen.io/ashim/pen/yrbJp

See the Pen Sticky Navigation Bar by ashim (@ashim) on CodePen.

আশা করছি সবাই  স্টিকি নেভিগেশন বার তৈরি করতে সক্ষম হবেন। কোন সমস্যা হলে টিউমেন্ট করুন।

সবাইকে ধন্যবাদ । শুভকামনা রইলো।