ওয়েব ডিজাইনারদের জন্য জটিল ডিজাইনের একটি Navigation Bar।
টিউন করেছেন : এম কে এইচ তানভীর | প্রকাশিত হয়েছে : 5 November, 2012 on 4:52 am | 895 বার দেখা হয়েছে | 
15
15
Ads by Techtunes - tAds
সবাইকে অনেক শুভেছা জানাচ্ছি।অনেক দিন ধরে টিউন করবো করবো কিন্তু টাইম নামের কি যেন একটা আছেনা ওটাকে কোন ভাবেই যেন ধরতে পারছিলামনা। যাই হোক আজ ধরেই পেল্লাম।
আমার আজকের এই টিউনটা পরীক্ষামুলক, ওয়েব ডিজাইন এর উপর একটা ধারাবাহিক টিউনের সব কল্পনা জল্পনার অবশান ঘটিয়ে ফেলিছি, খুব শীগ্রোই আপনাদের সামনে নিয়ে আসবো ইনসাল্লাহ তালা।
আজকেও আপনাদের ভালো কিছু উপহার দিবো আশাকরি।
সেই উপহারটি একটি জটিল ধরনের Navigation Bar।
যেটার নাম দিয়েছি আমি “পানির ডেউ”
নাম শুনে বুঝতেই পারছেন ডিজাইনটা কেমন হবে।
তো দেরি না করে চলুন তৈরি করে ফেলি সেই পানির ডেউ।
প্রথমে নিচের লিঙ্ক থেকে File টি ডাউনলোড করেনিন,
linkটি
এরপর Fileটিকে Extract করুন, করার পর jsfile নামের একটি ফোল্ডার পাবেন, সেই ফোল্ডারটির ভিতরে আর একটি js নামের ফোল্ডার পাবেন ওগুলো ধরার প্রয়োজন নাই। তারপর নিচের Code গুলো Copy করে সরাসরি সেই jsfile নামের ফোল্ডারটিতে index.html অথবা আপনারইচ্ছা.html এই নামে সেইভ করবেন ।
(বিঃদ্রঃ js নামের ফোল্ডারটির ভিতরে সেইভ করবেননা)
“”কোড
সেইভ করার নিয়ম- আপনার কম্পিউটার এর নোটপেড ওপেন করুন কোড টি copy করে
past করুন এবং Save As করুন index.html অথবা আপনারইচ্ছা.html এই নামে সেইভ
করুন।”"
আর অবশ্যই কিছু জানার থাকলে বা নাবুঝলে Comments করবেন।
আর অবশ্যই কিছু জানার থাকলে বা নাবুঝলে Comments করবেন।
“আর একটি কথাঃ
আপনার একটি Comment আমাকে আনেক বেশী উৎসাহ জোগাবে আপনাকে নতুন কিছু শেখানোর ♥।”
আমার ওয়েব ডিজাইন পেইজ।
আপনার একটি 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>
<!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>
No comments:
Post a Comment