এইবার HTML ও CSS দিয়েই তৈরী করুন আকর্ষনীয় DROPDOWN মেনু

6
1403

প্রথমেই সবাইকে আমার সালাম . আমি অনেকদিন যাবত TUNER PAGE এর  সাথে আছি কিন্তু কখনই  TUNE করা হয়নি .
এটা আমার প্রথম TUNE তাই ভুল হতেই পারে . আসা করি ক্ষমা সুন্দর দৃষ্টিতে দেখবেন . আমি নতুন web  designing  শিকতেছি.
আজ আমি আপনাদের দেখাবো যে কিভাবে HTML ও CSS  দিয়ে DROPDOWN  মেনু  তৈরী করতে হয়  . আমার মনে হয় অনেকেই জানেন . আমার TUNE  টা তাদের জন্য যারা জানেন না .প্রথমেই NOTEPAD ওপেন করুন  তারপর নিচের CODE গুলো 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{

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

}
/*———–full page———*/
div.full_page{
background-color:white;
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;
background-color:yellowgreen;
}
ul li a{
display:block;
text-decoration:none;
color:black;
padding: 5px 15px 5px 15px;
background:yellowgreen;
margin-left:1px;
white-space:nowrap;
color:white;
font-weight:bold;
text-transform:uppercase;
}
ul li a:hover{
background:;
}
li:hover ul{
display:block;
position:absolute;
}
li:hover li{
float:none;
}
li:hover a{
background:grey;
border-bottom:1px solid black;
border-left:1px solid black;
border-right:1px solid black;
}
li:hover li a:hover{
background-color:green;
}
/*———body container——-*/
div.body_container{
background-color:white;
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=”#”>GOOGLE</a></li>
<li><a href=”#”>YAHOO</a></li>
<li><a href=”#”>BING</a></li>
</ul>
</li>
<li><a href=”#”>freelance</a>
<ul>
<li><a href=”#”>Freelancer</a></li>
<li><a href=”#”>odesk</a></li>
<li><a href=”#”>guru</a></li>
<li><a href=”#”>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=”#”>techtunes</a></li>
<li><a href=”#”>tuner page</a></li>
<li><a href=”#”>tutorial bd</a></li>
<li><a href=”#”>webcoachbd</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class=”footer”>
</div>
</div>
</body>
</html>

এরপর  save কমান্ড দিয়ে যেকোনো নাম
দিয়ে .html  extension  দিয়ে save করুন  তারপর page  টি ওপেন  করে দেখুন .
কেমন লাগলো জানাবেন .

যারা এই মেনু টি বানাতে পারেন নি তাদের জন্য mediafire এ upload করে দিলাম .নিচের লিঙ্ক থেকে download  করে  নিন .
DOWNLOAD

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

6 মন্তব্য

  1. তবে বাকি সব ভালো হয়েছে ভালো লেগেছে
    ধন্যবাদ আবার লিখুন অন্য কিছু

  2. ভাই কি ভাবে মতামত দেই ইংলিশ এ লিখি বাংলায় হয়েযায় এ ভাবে আমার সমস্যা হয়
    যাই হোক ভাই আপনার লেখা একটু সমস্যা আছে খুযে না পেলে আমাকে বলবেন বলে দিব তবে হতাস হবার কিছু নাই ভাই তুনে করে যান সফল হবেন এ

    • ভুল ধরিয়ে দেবার জন্য ধন্যবাদ . আমার বানানো ফাইল টি mediafire এ upload করে দিয়েছি .

মন্তব্য দিন আপনার