Awesome! টিউনস
সকল Awesome! টিউনস

HTML5+CSS3 ব্যবহার করে খুব সহজেই একটি Dropdown Menu / Dropdown Navigation Bar বানানো শিখুন

4,703 দেখা 0 টিউমেন্টস জোসস
টিউন বিভাগ টিউটোরিয়াল
প্রকাশিত
Level New

37 টিউনস 2 টিউমেন্টস 4 ফলোয়ার

(HTML5 + CSS3) ব্যবহার করে খুব সহজেই বানানো শিখুন একটি সুন্দর প্রফেশনাল Dropdown Menu / Dropdown Navigation Bar।
তবে এটা শেখার আগে আপনাকে প্রথমে Menu বানানো জানতে হবে। কিভাবে একটি সুন্দর প্রফেশনাল Menu বানাতে হয় সেটা আমি আমার আগের টিউটোরিয়ালে দেখিয়েছি। যারা দেখেননি নিচের লিঙ্ক থেকে দেখে নিতে পারেন।

How To Create a Menu Bar with HTML5 and CSS3 Bangla Tutorial | How To Make a Professional Menu Bar
https://www.youtube.com/watch?v=-sFwtImzhNc

Dropdown Menu / Dropdown Navigation Bar বানানোর ভিডিও টিউটোরিয়ালটি Full Screen এ দেখতে চাইলে নিচের Youtube লিঙ্কে Click করুন।
https://www.youtube.com/watch?v=-SA8j09ZSG0

//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;
}

HTML/CSS কোডগুলি ভালোভাবে বোঝার জন্য অবশ্যই আপনাদের উপরের ভিডিওটি দেখা উচিত। ভিডিওতে আমি প্রতিটি CSS এর ব্যবহার সম্পর্কে পরিষ্কার ব্যাখ্যা দেবার চেষ্টা করেছি।

Level New

আমি Albert Subir Mondal। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 7 বছর 1 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 37 টি টিউন ও 2 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 4 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।

টিউনস

আরও টিউনস

টিউনারের আরও টিউনস

টিউমেন্টস