jQuery drop down menu | SP Foundationbd

বিভিন্ন সাইটে আমরা যেসব Dropdown Menu দেখি এসব সাধারনত javascript বা jquery দিয়ে করা। যেহেতু এখানে আমি jquery tutorials লিখছি তাই jquery দিয়ে এরুপ একটি system তৈরী করে দেখাচ্ছি। খুব সহজ।

index.html

01.<!doctype html>

02.03.<head>

04.05.<title> Spfoundationbd!</title>

06.<link rel="stylesheet" href="/style.css" type="text/css"/>

07.<script src="/jquery_latest.js" type="text/javascript"></script>

08.<script src="/script.js" type="text/javascript"></script>

09.</head>

10.<body>

11.<div id="content">

12.<ul id="menu">

13.<li><a href="#">Reference</a>

14.<ul>

15.<li><a href="#">PHP</a></li>

16.<li><a href="#">MySql</a></li>

17.<li><a href="#">CakePHP</a></li>

18.</ul>

19.</li>

20.<li><a href="#">Tutorials</a>

21.<ul>

22.<li><a href="#">HTML tutorials</a></li>

23.<li><a href="#">JQuery drop down menu</a></li>

24.</ul>

25.</li>

26.<li><a href="#">About Us</a></li>

27.</ul>

28.</div>

29.</body>

30.</html>

style.css ফাইল

01.body {

02.font-family: "Lucida Sans Unicode","Lucida Grande",Sans-Serif;

03.font-size: 12px;

04.}

  1. 06. 07.#content{

08.width:800px;

09.margin:0 auto;

10.background: green;

11.padding: 15px;

12.min-height:200px;

13.}

14.#menu li{

15.float:left;

16.list-style:none;

17.position:relative;

18.margin-right:4px;

19.}

20..rem_radius a,.rem_radius a:hover{

21.border-bottom-left-radius:0!important;border-bottom-right-radius:0!important;

22.}

23.#menu li ul{

24.display:none;

25.float:left;

26.position:absolute;

27.top:36px;

28.padding:0;

29.}

30.#menu li ul li{

31.width:150px;

32.border-radius:0;

33.}

34.#menu li ul li a{

35.width:130px;

36.border-radius:0;

37.}

38.#menu li ul li:first-child a,#menu li ul li:first-child a:hover{

39.border-top-right-radius:6px!important;

40.}

41.#menu li ul li:last-child a,#menu li ul li:last-child a:hover{

42.border-bottom-left-radius:6px!important;    border-bottom-right-radius:6px!important;

43.}

44.#menu li a{

45.display:block;

46.float:left;

47.color:#fff;

48.background:#000;

49.font-weight:bold;

50.text-decoration:none;

51.padding:10px;

52.border-radius:6px;

53.}

54.#menu li a:hover{

55.background:#333;

56.border-radius:6px;

57.}

58.#menu li ul li a:hover{

59.background:#333;

60.border-radius:0;

61.}

script.js ফাইল

01.$(document).ready(function(){

02.$('#menu li').hover(function(){

03.$(this).find('ul').stop(true,true).slideDown(200);

04.},function(){

05.$(this).find('ul').stop(true,true).slideUp(200);

06.});

07.$('#menu li').hover(function(){

08.if($(this).children('ul').length > 0){

09.$(this).addClass('rem_radius');

10.}

11.}, function(){

12.$(this).removeClass('rem_radius');

13.});

14.});

ব্যাখ্যা:এখানে এইজটিএমএল এবং সিএসএস দিয়ে অনেক গুরত্বপূর্ন কাজ হয়ে গেছে তবে যেহেতু এগুলি শিখে এসেছেন তাই শুধু এখানে জেকোয়েরির কোডে যেসব নতুন মেথড ব্যবহার করেছি সেগুলির ব্যাখ্যা দিচ্ছি।

১ নম্বর লাইনে ডকুমেন্ট রেডি হয়েছে এরপর ২ নম্বর লাইনে #menu আইডি সম্বলিত যে ul আছে তার অধীনস্থ li সিলেক্ট করেছি।যখন এই li এর উপর মাউস হোভার হবে তখন শুধুমাত্র এই li এর অধীনে যদি কোন ul (অর্থ্যাৎ সাবমেনু) থাকে তাহলে সেটি find() মেথড দিয়ে খুজে বের করেছি এবং এরপর slideDown() মেথড ব্যবহার করে সেই ul দৃশ্যমান করা হয়েছে।এই মেথডটির ভিতর যে নাম্বার দেখছেন এটা হচ্ছে গতি।যত কম নম্বর দিবেন গতি তত বেশি হবে।

**এখানে দেখুন ডট (.) দিয়ে একটা একটা করে মেথড সিলেক্টেড এলিমেন্টের উপর চালানো হয়েছে এটা হচ্ছে মেথড চেইনিং।এভাবে ডট দিয়ে দিয়ে যতগুলি প্রয়োজন ততগুলি মেথড চালাতে পারেন একটা সিলেক্টেড এলিমেন্টর উপর।

**প্রথম এবং দ্বিতীয় বন্ধনীর ব্যাপারটি jquery তে সবচেয়ে গুরত্বপূর্ন এবং বিরক্তিকর (প্রথম প্রথম)।কয়েক ডজন code লেখার পর অবশ্য আর না বুঝতে অসুবিধা হবে আর না লিখতে।

এখন mouse সরিয়ে নিলে কি হবে এটা লেখা হয়েছে ৪ নম্বর লাইনে কমার (,) পর।এই function টি ঐ ul টিই খুজে বের করে slideUp() মেথড দিয়ে উপরে উঠিয়ে নেবে।

৭ নম্বর line থেকে যে code গুলি লিখেছি এগুলি অতিরিক্ত কিছু স্টাইলিং এর জন্য।এখানে children() দিয়ে li এর উপর হোভার করার সময় চেক করে দেখা হচ্ছে যে এই li এর অধীনে কোন সাবমেনু আছে কিনা।যদি থাকে তাহলে সেই li তে rem_radius নামে একটি ক্লাস যোগ করা হয়েছে এবং সেই ক্লাস সম্বলিত li এর a ট্যাগের বর্ডার Radius মুছে দেয়া হয়েছে (শুধু নিচের দিকে ডানে এবং বামে)।