Awesome! টিউনস
সকল Awesome! টিউনস

CSS3 Gradient আর JQuery এর সাহায্যে Bounce ইফেক্ট যুক্ত ড্রপ-ডাওন মেনু তৈরি করুন।

2,957 দেখা 15 টিউমেন্টস জোসস
টিউন বিভাগ ওয়ার্ডপ্রেস
প্রকাশিত
Level New

20 টিউনস 136 টিউমেন্টস 0 ফলোয়ার

ড্রপ-ডাওন মেনু কি তা আশা করি আপনাদের বলার দরকার হবে না। প্রায় সব ওয়েবসাইটেই ড্রপ-ডাওন মেনু এক অবিচ্ছিন্ন অংশ হয়ে দাঁড়িয়েছে। তা হোক কোন ব্লগসাইট বা কোন ফোরামসাইট / কোন ডাউনলোডসাইট বা কোন নিউজসাইট। যারা ড্রপ-ডাওন মেনু শব্দটির সাথে পরিচিত নয় তাদের জন্য বলা, মূলত কোন সাইট এর উপরের অংশে যে Navigation বারটি থাকে তাকে মেনু বার বলে। আর মেনু বার টি যদি মাউস Hover এর সাথে কিছু Sub-Menu দেখায়, তবে তা হল ড্রপ-ডাওন মেনু। আমার এই টিউন এ আমি সেরকমই একটি Multi-Level ড্রপ-ডাওন মেনু তৈরি করে দেখাব।

মূল অংশে যাওয়ার আগে অল্প কিছু নোট। আমি ব্যক্তিগত ভাবে কখনই নিজেকে ওয়েব-ডিজাইনার মনে করি না। কারণটি নাই বলি। আমি এর আগে নিজে কোন কোডিং এর কাজ করি নি (২-১ টা যা আছে তাও অন্য কারও কাজ এর Modification মাত্র।) সে হিসেবে এটিই আমার প্রথম প্রোজেক্ট। এই কাজের inspiration পেয়েছি NetTut+ এর কাছ থেকে। এটি WordPress, Blogger সহ সকল ক্ষেত্রে ব্যবহার করা যাবে।

ড্রপ-ডাওন মেনুটির মূল ভিত্তি হল CSS3 (আমি বিশ্বাস করি কয়েক মাস এর মাঝে CSS2.1 সম্পূর্ণরূপে CSS3 দিয়ে প্রতিস্থাপিত হবে)। ইন্টারনেট এক্সপ্লোরার ছাড়া অন্য সকল কমন ব্রাউজার গুলোতে এটি ভাল মত কাজ করবে।

পুরো Tutorial টি তিন অংশে বলছি। প্রথমে CSS তারপর HTML markups আর শেষ এ JQuery Trigger। ইংরেজিতে Tutorial টি প্রথম প্রকাশিত হয় এখানে।

CSS


body {
font-family: helvetica, arial, sans-serif;
background: #e3e3e3;
text-align: center;
}
/* MENU */
#css3menu {
background: #e5e5e5;
float: left;
margin: 0 auto; padding: 0;
border: 1px solid white;
border-bottom: none;
}
#css3menu li a, #css3menu li {
float: left;
}
#css3menu li {
list-style: none;
position: relative;
}
#css3menu li a {
padding: 1em 2em;
text-decoration: none;
color: white;
background: #292929;
background: -moz-linear-gradient(top, black, #3c3c3c 1px, #292929 25px);
background: -webkit-gradient(linear, left top, left 25, from(black), color-stop(4%, #3c3c3c), to(#292929));
border-right: 1px solid #3c3c3c;
border-left: 1px solid #292929;
border-bottom: 1px solid #232323;
border-top: 1px solid #545454;
}
#css3menu li a:hover {
background: #2a0d65;
background: -moz-linear-gradient(#000000 1px, #00578F 25px);
background: -webkit-gradient(radial, 165 0, 52, 220 -257, 465, from(#00578F), to(#000000));
background: -webkit-radial-gradient(165 0, 52, 220 -257, 465, from(#00578F), to(#000000));
}
/* Submenu */
.hasChildren {
position: absolute;
width: 5px; height: 5px;
background: black;
right : 0;
bottom: 0;
}
#css3menu li ul {
display: none;
position: absolute;
left: 0;
top: 100%;
padding: 0; margin: 0;
}
#css3menu li:hover > ul {
display: block;
}
#css3menu li ul li, #css3menu li ul li a {
float: none;
}
#css3menu li ul li {
_display: inline; /* for IE6 */
}
#css3menu li ul li a {
width: 150px;
display: block;
}
/* SUBSUB Menu */
#css3menu li ul li ul {
display: none;
}
#css3menu li ul li:hover ul {
left: 100%;
top: 0;
}

HTML

এখন আমাদের কিছু Unordered List (ul, li দিয়ে বানানো লিস্ট) বানাতে হবে। অংশটি অনেকটা নিচের মত।

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>untitled</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<!--[if lt IE 8]>
<script src ="http://ie7-js.googlecode.com/svn/version/2.1(beta2)/IE8.js"></script>
<![endif]-->
</head>
<body>
<ul id="css3menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">About Founder</a></li>
<li><a href="#">About Authors</a></li>
<li><a href="#">About Sponsors</a>
<ul>
<li><a href="#">Sub-Menu 1</a></li>
<li><a href="#">Sub-Menu 1</a></li>
<li><a href="#">Sub-Menu 1</a></li>
</ul>
</li>
<li><a href="#">About Readers</a></li>
</ul>
</li>
<li><a href="#">Our Works</a></li>
<li><a href="#">Contact</a>
<ul>
<li><a href="#">International</a></li>
<li><a href="#">Corporate</a>
<ul>
<li><a href="#">International</a></li>
<li><a href="#">Corporate</a></li>
<li><a href="#">Hotline</a></li>
</ul>
</li>
<li><a href="#">Offices</a></li>
</ul>
</li>
<li><a href="#">Testimonial</a></li>
</ul>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.core.js" type="text/javascript"></script>
<script type="text/javascript" src="js/scripts.js"></script>
</body>
</html>

JQuery

এইচটিএমএল কোড এ আপনারা নিশ্চয় তিনটি Java-Script দেখেছেন। দুইটি Third-Party দ্বারা হোস্ট করা আছে। অন্যটি নিচে দিলাম।

var site = function() {
this.css3menuLi = $('#css3menu li').children('ul').hide().end();
this.init();
};

site.prototype = {

init : function() {
this.setMenu();
},

// Enables the slidedown menu, and adds support for IE6

setMenu : function() {

$.each(this.css3menuLi, function() {
if ( $(this).children('ul')[0] ) {
$(this)
.append('<span />')
.children('span')
}
});

this.css3menuLi.hover(function() {
// mouseover
$(this).find('> ul').stop(true, true).slideDown('slow', 'easeOutBounce');
}, function() {
// mouseout
$(this).find('> ul').stop(true, true).hide();
});

}

}

new site();

মোটামুটি ভাবে এই হল বিষয়। এই  ড্রপ-ডাওন মেনুটি WebKit Based ব্রাউজার গুলোতে (Chrome, Safari) সবচেয়ে ভাল কাজ করে। এছাড়া ফায়ারফক্স এর জন্য ও আলাদা কোড দেওয়া আছে। ডেমো দেখতে চাইলে ফাইলটি ডাউনলোড করুন।

আমার ব্লগ ভিসিট করুন।

আমার অনন্যা Tutorial গুলো দেখুন।

Level New

আমি রিয়াদ। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 13 বছর 3 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 20 টি টিউন ও 136 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 0 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।

নিজেকে মাঝে মাঝে অপরাধী মনে হয়। যে ভাষার জন্য এত রক্তক্ষরণ টা বাদ দিয়ে আমি কিনা বিজাতীয় ইংরেজি ভাষায় ব্লগিং করছি! ছিঃ! টেকটিউনস কে ধন্যবাদ।

টিউনস

আরও টিউনস

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

টিউমেন্টস

Level 0

josss jinish! kintu amar moto jquery te newbie jara tago laiga 1 tu kothin jinish! 🙁

    Level New

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

      Level 0

      @রিয়াদ: নারে ভাই এইটা কই নাই !কপি পেস্টতো না পারার কিছু নাই! সেইটা পুরান হোক আর নতুন হোক! আমি কইতে ছাইছিলাম যে শিখার ব্যাপারটা! আপনি মাহিম ভাইয়ের কথাটা মাথায় রাইখেন! একটা চেইন টিউন দেন! অনেকে শিখতে পারবো! আমি নিজেও সিরিয়ালে আছি!! আর আপনি তো এক্সপার্ট মানুষ! সাইট টা একটু শেয়ার করলে ভালো হতো! শিখতে চায় এমন আগ্রহী কারো কাছে শেয়ার করলে উপকার হতো!! ধন্যবাদ!

    Level New

    @ফয়সাল: :p আমি ওয়েব-ডিজাইন নিয়ে চেইন টিউন করলে যা জানেন তাও ভুলে যাবেন। আর আমি ওয়েব-ডিজাইন এ এক্সপার্ট কেও না

      Level 0

      @রিয়াদ: hahahahaha moja nilen naki vai??
      kosto kore site : http://bdgeeks.com ta jodi 1 tu share korten khushi hoitam! eikhane web design plus computer programming er upore banglay tutorial deoa ace!
      valo thakben vai!

    Level New

    @ফয়সাল: আপনি নিজেই শেয়ার করতে পারেন। জাস্ট Credit টুকু দিলেই খুশি

Level 0

Very nice Brother . Vai jodi Css full janen tobe akta chain tune korban . Ate amra sobai upokrito hobo. Tobe suru korla sas korta hobe tara tare …………………………………….Carry on bro

Level 0

আরও দুইটা দিন আগে দিতে পারলেন না? একটা ক্লায়েন্টের কাজে কিছু না পেয়ে শেষপর্যন্ত পুরু জেকুয়েরি শিখে তারপর বানাতে হল।

    Level New

    @আদনান: এটা Portfolio হিসেবে ব্যবহার যোগ্য। Client এর কাজের জন্য না। Cross-Browser completable না।

Level 0

ভাল টিউন,
ধন্যাবাদ শেয়ার করার জন্য।

Level 0

দারুন হয়েছে রিয়াদ ভাই। খুবই প্রয়োজনীয় টিউন। ধন্যবাদ শেয়ার করার জন্য।

Level 0

ভাল টিউন…………………………

Level 0

nice