(HTML5 + CSS3) ব্যবহার করে মাত্র ১০ মিনিটে বানানো শিখুন একটি সুন্দর প্রফেশনাল মেনুবার।
নিচের ভিডিও টিউটোরিয়ালটি একটু খেয়াল করলে দেখতে পাবেন কোন CSS কোডটি কখন কোন কাজে ব্যবহার করা হয়েছে। আমি এই ভিডিও টিউটোরিয়ালে দেখিয়েছি (HTML5 + CSS3) ব্যবহার করে কিভাবে খুব সহজে এবং অল্প সময়ে একটি সুন্দর প্রফেশনাল মেনুবার তৈরি করা যায়।
Video টি Full Screen এ দেখতে চাইলে এখানে Click করুন
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>THIS IS MY MENU</title>
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
</head>
<body>
<div class="menu">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">PROFILE</a></li>
<li><a href="#">DOWNLOAD</a></li>
<li><a href="#">CONTACT US</a></li>
</ul>
</div>
</body>
</html>
.menu
{
width:960px;
background:#8E0505;
min-height:40px;
margin:0px auto;
}
.menu ul
{
margin:0px;
padding:0px;
}
.menu ul li
{
float:left;
list-style:none;
border-right:1px solid #730505;
border-left:1px solid #CC3232;
}
.menu ul li:hover
{
box-shadow:0px 2px 10px;
}
.menu ul li:first-child
{
border-left:0px solid;
}
.menu ul li:last-child
{
border-right:0px solid;
}
.menu ul li a
{
text-decoration:none;
padding:10px 15px;
display:block;
color:#fff;
font-family:verdana;
}
.menu ul li a:hover
{
color:blue;
}
আমি Albert Subir Mondal। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 7 বছর 2 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 37 টি টিউন ও 2 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 4 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।
