সবাইকে অনেক শুভেছা জানাচ্ছি।
অনেক দিন ধরে টিউন করবো করবো কিন্তু টাইম নামের কি যেন একটা আছেনা ওটাকে কোন ভাবেই যেন ধরতে পারছিলামনা। যাই হোক আজ ধরেই পেল্লাম।
আমার আজকের এই টিউনটা পরীক্ষামুলক, ওয়েব ডিজাইন এর উপর একটা ধারাবাহিক টিউনের সব কল্পনা জল্পনার অবশান ঘটিয়ে ফেলিছি, খুব শীগ্রোই আপনাদের সামনে নিয়ে আসবো ইনসাল্লাহ তালা।
আজকেও আপনাদের ভালো কিছু উপহার দিবো আশাকরি।
সেই উপহারটি একটি জটিল ধরনের Navigation Bar।
যেটার নাম দিয়েছি আমি “পানির ডেউ”
নাম শুনে বুঝতেই পারছেন ডিজাইনটা কেমন হবে।
তো দেরি না করে চলুন তৈরি করে ফেলি সেই পানির ডেউ।
প্রথমে নিচের লিঙ্ক থেকে File টি ডাউনলোড করেনিন,
linkটি
এরপর Fileটিকে Extract করুন, করার পর jsfile নামের একটি ফোল্ডার পাবেন, সেই ফোল্ডারটির ভিতরে আর একটি js নামের ফোল্ডার পাবেন ওগুলো ধরার প্রয়োজন নাই। তারপর নিচের Code গুলো Copy করে সরাসরি সেই jsfile নামের ফোল্ডারটিতে index.html অথবা আপনারইচ্ছা.html এই নামে সেইভ করবেন ।
(বিঃদ্রঃ js নামের ফোল্ডারটির ভিতরে সেইভ করবেননা)
“আর একটি কথাঃ
আপনার একটি Comment আমাকে আনেক বেশী উৎসাহ জোগাবে আপনাকে নতুন কিছু শেখানোর ♥।”
আমার ওয়েব ডিজাইন পেইজ।
Code:
<!DOCTYPE html>
<head>
<title>facebook.com/WebsiteDevelop</title>
<link href="js/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery_002.js"></script>
<script type="text/javascript" src="js/jquery_003.js"></script>
<script type="text/javascript" src="js/jquery_004.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".logobanner").mouseover(function(){
$(".logobanner span").fadeIn("fast");
$(".logobanner span").animate({top:27},"fast");
});
});
$(document).ready(function(){
$(".logobanner").mouseout(function(){
$(".logobanner span").animate({top:25},"fast");
$(".logobanner span").fadeOut("fast");
});
});
$(function() {
$("#1, #2, #3").lavaLamp({
fx: "backout",
speed: 700,
click: function(event, menuItem) {
}
});
});
$(document).ready(function(){
$("input[type=file]").change(function(){$(this).parents(".uploader").find(".filename").val($(this).val());});
$("input[type=file]").each(function(){
if($(this).val()==""){$(this).parents(".uploader").find(".filename").val("");}
});
});
</script>
</head>
<body>
<ul id="2">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Coontact us</a></li>
<li><a href="#">Button 1</a></li>
<li><a href="#">Button 2</a></li>
<li><a href="#">Button 3</a></li>
<li><a href="#">Button 4</a></li>
<li><a href="#">Button 5</a></li>
<li><a href="#">Button 6</a></li>
</ul>
</body>
</html>
আমি এম কে এইচ তানভীর। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 12 বছর 10 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 3 টি টিউন ও 34 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 0 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।
শিখতে ভালোবাসি, আর ভালোবাসি শেখাতে। চেষ্টা করি নতুন কিছু সৃষ্টি করতে।
ব্যাপার টা আরেক টু ক্লিয়ার করবেন? কাজ করছে না। জদিও আপনার প্রচেষ্টা কে স্বাগত জানাই। সামনে অনেক টিউন আশা করছি।
আপনাদের commoents এর জন্য কৃতজ্ঞ।
ভাইয়া আপনাদের কোথাও কোন সমস্য হচ্ছে, এটা সহজ একটি প্রোগ্রাম।
আপনারাকি ঠিকভাবে সেইভ করতে পেরেছেন! এই প্রোগ্রাম টি ১০০% রাইট…
ভালো ভাবে ট্রাই করুন। তার পরেও যদি না পারেন নিচের লিঙ্ক থেকে File টি ডাউনলোড করেনিন,
http://mkhtanvirweb.tk/webd/panirdheu.zip
এরপর Fileটিকে Extract। অতঃপর Open করুন। এখানে আপনাকে কিছুই করতে হবেনা।
ফাইল এর ভিতরে index.html নামপর।একটি ফাইল দেখবেন জাস্ট ওটা ওপেন করুন।
ধন্যবাদ
![jQuery for Web Design [পর্ব-০৪] :: jQuery এর FadeIn FadeOut মেথড জানবো ও ব্যবহার করে দেখব](https://dnc.techtunes.io/tDrive/tuner/2018/04/techtunes_fee81aa370998cccf57ea2d7dc08eaa8-368x207.jpg "jQuery for Web Design [পর্ব-০৪] :: jQuery এর FadeIn FadeOut মেথড জানবো ও ব্যবহার করে দেখব")
ভাই কাজ করেনা। css ফাইলটা একটু চেক করে দেখেন। আমার মনে হয় ওখানে সমস্যা আছে।