(HTML5 + CSS3) ব্যাবহার করে খুব সহজেই বানানো শিখুন একটি সুন্দর প্রফেশনাল Dropdown Menu / Dropdown Navigation Bar।
তবে
এটা শেখার আগে আপনাকে প্রথমে Menu বানানো জানতে হবে।
কিভাবে একটি সুন্দর প্রফেশনাল Menu বানাতে হয় সেটা আমি
আমার আগের টিউটোরিয়ালে দেখিয়েছি। যারা দেখেননি নিচের লিঙ্ক থেকে দেখে নিতে পারেন।
//HTML Code
<!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>
<ul>
<li><a href="#">DMENU</a></li>
<li><a href="#">DMENU</a></li>
<li><a href="#">DMENU</a></li>
<li><a href="#">DMENU</a></li>
<li><a href="#">DMENU</a></li>
</ul>
</li>
<li><a href="#">PROFILE</a></li>
<li><a href="#">DOWNLOAD</a></li>
<li><a href="#">CONTACT US</a></li>
</ul>
</div>
</body>
</html>
//CSS Code
.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
{
position:relative;
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;
}
.menu ul li ul
{
position:absolute;
left:-999999px;
}
.menu ul li:hover ul
{
left:0px;
}
.menu ul li ul li
{
float:none;
border-bottom:1px solid #8E0505;
border-right:0px solid;
border-left:0px solid;
}
.menu ul li ul li:last-child
{
border-bottom:0px solid;
}
.menu ul li ul li a
{
background:#E40B0B;
width:250px;
}
.menu ul li ul li a:hover
{
}
HTML/CSS কোডগুলি ভালো ভাবে বোঝার জন্য নিচের video টি দেখতে পারেন।
No comments:
Post a Comment