আমি web desiging এর কাজ শিখছি । HTML ও CSS শেষ করে এখন JavaScript শিকছি . ঐ দিন TECHTUNES এ একজন টিউনার Navigation menu share করেছিলেন তবে সেগুলো dropdown menu ছিলনা .
একজন comment এর মাধ্যমে dropdown menu চেয়েছিলেন . তাই এ tune টি করা . এটা techtunes এ আমার প্রথম টিউন . এরকম একটি টিউন আমি আগে tunerpage এ করেছিলাম . তবে এ menu টি আমি
নতুনভাবে design করেছি . মেনুটি তৈরী করার জন্য প্রথমে Notepade খুলুন তারপর নিচের code গুলো copy করে notepad এ paste করুন :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<head>
<title>Mahmood</title>
<style type="text/css">
body{
}
/*-----------full page---------*/
div.full_page{
background-color:yellowgreen;
width:900px;
height:1040px;
margin-left:220px;
margin-top:50px;
box-shadow:0px 0px 10px 3px silver;
margin-bottom:50px;
border-radius:8px 8px 8px 8px;
}
/*-----------main menu bar-------*/
ul{
font-family:sans-serif;
margin: 0;
padding: 0;
list-style: none;
float:left;
}
ul li{
display:block;
position:relative;
float:left;
width:180px;
text-align:center;
}
li ul{
display:none;
}
li ul li{
text-align:left;
}
ul li a{
display:block;
text-decoration:none;
color:black;
padding: 5px 15px 5px 15px;
background:-moz-linear-gradient(rgb(75,0, 130), rgb(10,10,10)) repeat scroll 0% 0% transparent;
margin-left:1px;
white-space:nowrap;
color:white;
font-weight:;
text-transform:uppercase;
}
ul li a:hover{
background:-moz-linear-gradient(rgb(249, 249, 249), rgb(229, 229, 229)) repeat scroll 0% 0% transparent;
color:black;
}
li:hover ul{
display:block;
position:absolute;
}
li:hover li{
float:none;
}
li:hover a{
color:balck;
}
li:hover li a:hover{
}
/*---------body container-------*/
div.body_container{
background-color:yellowgreen;
width:900px;
height:900px;
}
/*------logo-------*/
div.logo{
height:100px;
background-color:;
width:900px;
}
/*------------footer-------*/
div.footer{
background-color:yellowgreen;
height:40px;
width:900px;
}
</style>
</head>
<body>
<div class="full_page">
<div class="logo">
</div>
<div class="body_container">
<div class="menu">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#" >SEARCH</a>
<ul>
<li><a href="http://www.google.com/" target="_blank">GOOGLE</a></li>
<li><a href="http://www.yahoo.com/" target="_blank">YAHOO</a></li>
<li><a href="http://www.bing.com/" target="_blank">BIng</a></li>
</ul>
</li>
<li><a href="#">freelance</a>
<ul>
<li><a href="http://www.freelancer.com/" target="_blank">Freelancer</a></li>
<li><a href="http://www.odesk.com/" target="_blank">odesk</a></li>
<li><a href="http://www.guru.com/" target="_blank">guru</a></li>
<li><a href="http://www.elance.com/" target="_blank">elance</a></li>
</ul>
</li>
<li><a href="#">movie</a>
<ul>
<li><a href="#">Ra.one</a></li>
<li><a href="#">bodyguard</a></li>
<li><a href="#">ready</a></li>
<li><a href="#">agnepath</a></li>
</ul>
</li>
<li><a href="#">bangla blog</a>
<ul>
<li><a href="https://www.techtunes.io/" target="_blank">techtunes</a></li>
<li><a href="http://www.tunerpage.com/" target="_blank">tuner page</a></li>
<li><a href="http://www.tutorialbd.com/" target="_blank">tutorial bd</a></li>
<li><a href="http://www.webcoachbd.com/" target="_blank">webcoachbd</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="footer">
</div>
</div>
</body>
</html>
তারপর save as দিয়ে dropdown.html নামে save করুন । তারপর save করা file টি যেকোনো browser এ open করুন . তাহলেই dropdown menu টি দেখতে পাবেন ।
এ menu টির বিশেষত্ব হচ্ছে এ মেনুটিতে grandiat color ব্যবহার করা হয়েছে . CSS desiner রা লক্ষ করলেই বিষয়টি বুঝতে পারবেন .
যারা menu টি বানাতে পারেননি তাদের জন্য mediafire এ upload করে দিলাম .
DOWNLOAD
কেমন হল জানাবেন । সবাইকে ধন্যবাদ ।
আমি স্বপ্নবাদী সিফাত। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 12 বছর 5 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 12 টি টিউন ও 153 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 0 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।
আমার নাম মাহমুদ উর রশীদ ।আমি কুমিল্লা জিলা স্কুলের দশম শ্রেণীতে পড়ি । আমার ইচ্ছে FREELANCING করে নিজের টাকায় পড়াশোনা করা যদিও আমার মা-বাবা আর ভাইয়া আমার পড়ালেখার পেছনে টাকা-পয়সা ব্যয় করতে কোনো কার্পন্য করেন না । তাই আমি web designing ও development এর কাজ শিখে চলেছি । আমার বিশ্বাস...
ভাল হয়েছে, তবে code আর-ও সংক্ষিপ্ত করতে পারতেন। মূল ডিভ-টা বডি-তে সেন্টার position-এ দিলে আরও ভাল দেখা যেত। সবাইকে ধন্যবাদ।
কোড লেখার সময় টেকটিউনসের কোড হাইলাইটার https://www.techtunes.io/web-design/tune-id/77692/ ব্যবহার করলে খুবই ভাল হয়। ধন্যবাদ আপনাকে।
সিফাত আপনার নাম্বার বা ফেইসবুক একাউন্ট টা কি শেয়ার করা যাবে। আমি ওয়েব ডিজাইন ও ডেভেলাপ এর কোর্স করব ভাবছি । একটা সফটোয়ার ফার্ম হাউসে যোগাযোগ করেছি ।এখন আমার আপনার কাছ থেকে কিছু বিষয়ে পরামর্শ দরকার যেহেতু আপনি এই কোর্সটা করছেন। আমি একটু দ্বন্দে আছি যে এই কোর্স আমার পক্ষে করা কি উচিত হবে কি না।
আমার ফেইসবুক একাউন্টঃ http://www.facebook.com/mohd.sakib
যেই সফটওয়্যার ফার্মহাউসের কথা বলছি তাঃ http://www.itplorer.com
আশা করছি শীঘ্রই আপনার হেল্প পাব।
অনেক ভাল হয়েছে তবে কোডিং সংক্ষিপ্ত করতে চেষ্টা করবেন আর বডি স্ট্রাকচার এ আপনি মারজিন ইউজ করেছেন যদি মনিটারের পর্দা বড় হয় সে ক্ষেত্রে আপনার সাইট টিক যতটুকু মারজির/প্যাডিং দিয়েছেন ঠিক সেই পরিমান লেফট এ ফাকা দেখাবে। তাই আপনি এই খানে মারজিন অটো ইউজ করতে পারেন।
ভাই আমিও আপনার মত নেট থেকে শিখছি, নিজে নিজে চেষ্টা করছি আপনাকে পেয়ে ভালই হল । ইনশাআল্লাহ্, আশা করছি শিখতে পারব তবে একটু বেশী সময় লাগবে। ভাই আশাকরি আরো টিউন করবেন। টিউনের জন্য অসংখ্য ধন্যবাদ।
অনেক কিছু জানতে পারলাম ।