বিভিন্ন সাইটে আমরা যেসব ড্রপডাউন মেনু দেখি এসব সাধারনত জাভাস্ক্রিপ্ট
বা জেকোয়েরি দিয়ে করা।যেহেতু এখানে আমি জেকোয়েরির টিউটোরিয়াল লিখছি তাই
জেকোয়েরি দিয়ে এরুপ একটি সিস্টেম তৈরী করে দেখাচ্ছি।খুব সহজ।
index.html
01.<!doctype html>
02.
03.<head>
04.
05.<title>Web Tutorial!</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.}
05.
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').slideDown(200);
04.},function(){
05.$(this).find('ul').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 দৃশ্যমান করা হয়েছে।এই মেথডটির ভিতর যে নাম্বার
দেখছেন এটা হচ্ছে গতি।যত কম নম্বর দিবেন গতি তত বেশি হবে।
**এখানে দেখুন ডট (.) দিয়ে একটা একটা করে মেথড সিলেক্টেড এলিমেন্টের
উপর চালানো হয়েছে এটা হচ্ছে মেথড চেইনিং।এভাবে ডট দিয়ে দিয়ে যতগুলি
প্রয়োজন ততগুলি মেথড চালাতে পারেন একটা সিলেক্টেড এলিমেন্টর উপর।
**প্রথম এবং দ্বিতীয় বন্ধনীর ব্যাপারটি জেকোয়েরিতে সবচেয়ে গুরত্বপূর্ন
এবং বিরক্তিকর (প্রথম প্রথম)।কয়েক ডজন কোড লেখার পর অবশ্য আর না বুঝতে
অসুবিধা হবে আর না লিখতে।
এখন মাউস সরিয়ে নিলে কি হবে এটা লেখা হয়েছে ৪ নম্বর লাইনে কমার (,)
পর।এই ফাংশনটি ঐ ul টিই খুজে বের করে slideUp() মেথড দিয়ে উপরে উঠিয়ে
নেবে।
৭ নম্বর লাইন থেকে যে কোডগুলি লিখেছি এগুলি অতিরিক্ত কিছু স্টাইলিং এর
জন্য।এখানে children() দিয়ে li এর উপর হোভার করার সময় চেক করে দেখা হচ্ছে
যে এই li এর অধীনে কোন সাবমেনু আছে কিনা।যদি থাকে তাহলে সেই li তে
rem_radius নামে একটি ক্লাস যোগ করা হয়েছে এবং সেই ক্লাস সম্বলিত li এর a
ট্যাগের বর্ডার রেডিয়াস মুছে দেয়া হয়েছে (শুধু নিচের দিকে ডানে এবং বামে)।
Labels: JQUERY
0 Comments:
Post a Comment
Subscribe to Post Comments [Atom]
<< Home