«

»

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

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

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

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

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

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

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

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


এ সম্পর্কিত আরো কিছু টুইট:

আপনার ওয়ার্ডপ্রেস সাইটে Social Login বাটন যোগ করুন
মাইএসকিউএল MySQL part-5 (মাইএসকউএল এর Date and Time ডাটা টাইপ)
মাইএসকিউএল MySQL part-8 (মাইএসকউএল এর Logical Operator)
নোটপ্যাড ব্যাবহার করে সহজেই কোন ইংরেজি লেখার উচ্চারণ শোনা যায়।
রেসপনসিভ ওয়েব ডিজাইন কাকে বলে এবং কি ? / What is Responsive Web Design ?
নিয়ে নিন ১টি ফ্রী ডোমেইন !! এবং হোস্টিংএও আছে $ ছাড় প্রতি মাসে !!!
সোশ্যাল বুকমার্কিং কি এবং এর সুবিধা সমূহ কি কি? সাথে ৫০ টি সাইট লিস্ট।

মন্তব্য দিনঃ

comments

About the author

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

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

শিখতে ভালোবাসি, আর ভালোবাসি শেখাতে। চেষ্টা করি নতুন কিছু সৃষ্টি করতে।

Permanent link to this article: http://techtweets.com.bd/web-developing/mkhtanvirbd/33313

3 comments

  1. Abdul Mannan Asif
    Abdul Mannan Asif

    ওয়েলকাম টু টেকটুইটস 🙂

    অনেক সুন্দর টুইটস

  2. zahid hassan

    thanks. tweet er jonno. web design niye tutorial korben asakori.

  3. sharifulislam
    sharifulislam

    tanbir vai,

    ami khub web design hoyar sok but amar kono guide line nai ai jonno parci na please amake aktu help korben ami basic html,css,php jani but amar pura sok web design hobar.এইচটি এম এল এবং সি এস এস, জাভাস্ক্রিপ্ট, ফটোশপ ওয়েব এলিমেন্টস ডিজাইন, এনিমেটেড ব্যনার ডিজাইন,সি এস এস ওয়েব টেম্পলেট ডিজাইন korthe cai.ami kon side gile valo bujthe parbo and valo sikthe parbo please bolben.are jodi na paren thahole please valo akta cossing center name bolen.

    ami sikthe cai.please help.
    amar skype id:sharifulislam9732

মন্তব্য করুন