ADs by Techtunes ADs
ADs by Techtunes ADs

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

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

ADs by Techtunes ADs

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

আজ প্রথম পর্বে থাকছে যে কোন ওয়েব সাইটে কিভাবে স্টিকি নেভিগেশন বার যুক্ত করা যায় তার শর্ট টেকনিক।

ধাপ ১ :

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

<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 যুক্ত করতে হবে।

ADs by Techtunes ADs

ধাপ ৩ :

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

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.

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

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

ADs by Techtunes ADs

ADs by Techtunes ADs
Level 0

আমি অসীম কুমার পাল। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 11 বছর 3 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 147 টি টিউন ও 471 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 16 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।

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


টিউনস


আরও টিউনস


টিউনারের আরও টিউনস


টিউমেন্টস

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

প্রিয় টিউনার,

আপনার টিউনটি টেকটিউনস চেইন টিউন হিসেবে অন্তর্ভুক্ত করা হয়েছে। অভিনন্দন আপনাকে!

টেকটিউনসে চেইন টিউন কীভাবে প্রক্রিয়া হয় তা জানতে টেকটিউনস সজিপ্র এর https://www.techtunes.co/faq “চেইন টিউন” অংশ দেখুন।

নিয়মিত চেইন টিউন করুন। এখন থেকে আপনার নতুন করা চেইন টিউন গুলো টেকটিউনস থেকে চেইন এ যুক্ত করা হবে। চেইন টিউনে যুক্ত হবার ফলে চেইনের প্রতিটি পর্ব একসাথে থাকবে।

চেইনে নতুন পর্ব যুক্ত হলে তা টেকটিউনসের প্রথম পাতায় দেখা যাবে এবং “সকল চেইন টিউনস” https://www.techtunes.co/chain-tunes/ পাতায় চেইন টিউনটি যুক্ত হবে।

নিয়মিত চেইন টিউন করে নতুন নতুন টিউন আপনার চেইনে যুক্ত করুন এবং অসম্পূর্ণ না রেখে আপনার চেইন টিউনে নিয়মিত পূর্ণাঙ্গ রূপ দিন। ধন্যবাদ আপনাকে।

মেতে থাকুন প্রযুক্তির সুরে আর নিয়মিত করুন চেইন টিউন!

Level 0

ধন্যবাদ সুন্দর টিউন এর জন্য কিন্ত আমি যদি javascript এ #sticker পরিবর্তন করে .sticker করি তাহলে কি কাজ করেবে? যদির আমি css #sticker পরিবর্তর করে .sticker করি

    @siam786: ধন্যবাদ ভাই। কাজ করা উচিৎ। চেষ্টা করে দেখেন । শুভকামনা রইলো

ভাল লিকছেন !!
চালাই জান —–

Level 0

না ভাই কাজ করছে না আমি wordpress theme try করেছিলাম

Level 0

অনেক চেষ্টার পর wordpress theme এ ‍sticky menu support করলাম functions.php তে //add support jquery
function my_scripts_method() {
wp_enqueue_script(
‘custom-script’,
get_stylesheet_directory_uri() . ‘/js/main.js’,
array( ‘jquery’ )
);
}

add_action( ‘wp_enqueue_scripts’, ‘my_scripts_method’ );
দিলাম এবং জেকুরী তে $ পরবর্তন করে JQuery দিলাম ব্যস কাজ করল stick menu.ধন্যবাদ অসীম ভাই

    @siam786: ধন্যবাদ ভাই। শুভকামনা রইলো।

    Level 0

    @siam786: আমি wordpress এ নতুন। দয়াকরে, আরেকটু বিস্তুারিত বলবেন কি। আমিও wodpress এ sticky menu add করতে চাচ্ছি।

আমরা ভাই অলস প্রকৃতির তাই কমেন্ট করতে চাই না। কিন্তু তাতে কি? আপনি লিখে যাবেন। এতে আজকে না হলেও ১মাস বা ১বছর পরে কোনো না কোনো একজন ওয়েব ডিজাইনারের কাজে আসবেই। তখন এই সিরিজ তার কাছে হবে স্বর্ণের খনি। আর লিখলে কিন্তু জ্ঞানটা পোক্ত হয়। এতে কিন্তু নিজেরই লাভ।