ওয়েব ডিজাইনারদের জন্য জটিল ডিজাইনের একটি Navigation Bar।

2
337
ওয়েব ডিজাইনারদের জন্য জটিল ডিজাইনের একটি Navigation Bar।

এম কে এইচ তানভীর

শিখতে ভালোবাসি, আর ভালোবাসি শেখাতে। চেষ্টা করি নতুন কিছু সৃষ্টি করতে।
ওয়েব ডিজাইনারদের জন্য জটিল ডিজাইনের একটি Navigation Bar।

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

আজকেও আপনাদের ভালো কিছু উপহার দিবো আশাকরি।
সেই উপহারটি একটি জটিল ধরনের Navigation Bar
যেটার নাম দিয়েছি আমি “পানির ডেউ
নাম শুনে বুঝতেই পারছেন ডিজাইনটা কেমন হবে।
তো দেরি না করে চলুন তৈরি করে ফেলি সেই পানির ডেউ।

Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting

প্রথমে নিচের লিঙ্ক থেকে File টি ডাউনলোড করেনিন,
linkটি

এরপর Fileটিকে Extract করুন, করার পর jsfile নামের একটি ফোল্ডার পাবেন, সেই ফোল্ডারটির ভিতরে আর একটি js নামের ফোল্ডার পাবেন ওগুলো ধরার প্রয়োজন নাই। তারপর নিচের Code গুলো Copy করে সরাসরি সেই jsfile নামের ফোল্ডারটিতে index.html অথবা আপনারইচ্ছা.html এই নামে সেইভ করবেন ।
(বিঃদ্রঃ js নামের ফোল্ডারটির ভিতরে সেইভ করবেননা)

“”কোড সেইভ করার নিয়ম- আপনার কম্পিউটার এর নোটপেড ওপেন করুন কোড টি copy করে past করুন এবং Save As করুন index.html অথবা আপনারইচ্ছা.html এই নামে সেইভ করুন।””
আর অবশ্যই কিছু জানার থাকলে বা নাবুঝলে Comments করবেন।

“আর একটি কথাঃ
আপনার একটি  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>

টিউনারপেজের নতুন টিউন আপনাকে ইমেইল করব?
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting

2 মন্তব্য

  1. ভাইয়া আপনার কোথাও সমস্য হচ্ছে, এটা সহজ একটি প্রোগ্রাম।
    আপনিকি ঠিকভাবে সেইভ করতে পেরেছেন? এই প্রোগ্রাম টি ১০০% রাইট…
    ভালো ভাবে ট্রাই করুন। তার পরেও যদি না পারেন নিচের লিঙ্ক থেকে File টি ডাউনলোড করেনিন,
    http://mkhtanvirweb.tk/webd/panirdheu.zip

    এরপর Fileটিকে Extract করুন,এরপর Open করুন। এখানে আপনাকে কিছুই করতে হবেনা।
    ফাইল এর ভিতরে index.html নামের এক্তি ফাইল দেখবেন জাস্ট ওটা ওপেন করুন।

একটি উত্তর ত্যাগ

Please enter your comment!
Please enter your name here

eleven − 4 =