Responsive Ad
Animated navigation bar design html css

সুন্দর একটা Navigation Bar ডিজাইন করুন HTML এবং Css দিয়ে

benglitut
by benglitut July 17, 2019

বন্ধুরা আজকে আমি দেখাবো কিভাবে শুধুমাত্র HTML এবং Css ব্যবহার করে সুন্দর একটা Navigation Bar ডিজাইন করবেন। এই Navigation Bar টা আপনি ইচ্ছা করলে আপনার ওয়েবসাইটে ব্যবহার করতে পারবেন। তছাড়া যদি HTML,Css সম্পর্কে জানা থাকে তাহলে আপনি নিজেই এটাকে আরো কাস্টমাইজ করে নিতে পারবেন। তাহলে চলুন শুরু করা যাক। তবে এর আগে ডমো দেখে নিন।

আশা করি ভালো লেগেছে। এখন আপনি শুধু নিচে থেকে কোড গুলো কপি করে আপনার সাইটে প্রয়োজন মত জায়গায় বসান আর কোডের ভিতরে লিংক গুলো বসিয়ে নিবেন তাহলেই হবে। লিংক এর a=# এরকম দেওয়া আছে।
Code
<!DOCTYPE html>
<!--Code By bengalitut ( https://blurboss.blogspot.com )-->
<html lang="en" >

<head>
<meta charset="UTF-8">
<title>CSS Breadcrumb Design | bengalitut.com</title>


<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>

<body>
<ul class="Bcrumb">
<li>
<a href="#">
<i class="fa fa-bar-chart" aria-hidden="true"></i>
<span class="text">CHARTS</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-html5" aria-hidden="true"></i>
<span class="text">HTML 5</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-code" aria-hidden="true"></i>
<span class="text">CODE</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-rss" aria-hidden="true"></i>
<span class="text">BLOG</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-home" aria-hidden="true"></i>

</a>
</li>
</ul>
<h1>Stylish Bcrumb Design With HTML and CSS</h1>
<span>By Admin - 16 July, 2019 <i class="fa fa-thumbs-up" aria-hidden="true"></i><i class="fa fa-twitter" aria-hidden="true"></i>

</span>

</body>
</html>
Css
body {
padding: 100px 100px;
background-color: #fff;
font-family: 'Quicksand', sans-serif;
}

ul.Bcrumb {
display: inline-block;
list-style: none;
}
ul.Bcrumb li {
float: right;
padding: 5px;
background-color: #212121;
border-radius: 50px;
position: relative;
margin-left: -50px;
transition: all 0.2s;
margin-top: 3px;
}
ul.Bcrumb li a {
overflow: hidden;
border-radius: 50px;
transition: all 0.2s;
text-decoration: none;
height: 50px;
width: 50px;
background-color: #ff4b4b;
text-align: center;
min-width: 50px;
display: block;
line-height: 50px;
padding-left: 52px;
padding-right: 33.33333px;
color: #fff;
font-size: 18px;
font-weight: 900;
}
ul.Bcrumb li a i {
display: inline-block;
}
ul.Bcrumb li a .text {
display: none;
opacity: 0;
}
ul.Bcrumb li a:hover {
width: 200px;
background-color: #e60023;
}
ul.Bcrumb li a:hover .text {
display: inline-block;
opacity: 1;
}
ul.Bcrumb li:last-child a {
padding: 0;
}
ul.Bcrumb li:last-child:hover {
padding: 3px;
margin-top: 0;
}
ul.Bcrumb li:last-child:hover a {
width: 60px;
height: 60px;
line-height: 60px;
}
span i {
margin-left: 5px;
display: inline-block;
}
span i:nth-child(1) {
color: #4267b2;
}
span i:nth-child(2) {
color: #1da1f2;
}
আজকের মত এখানেই শেষ করছি। বুঝতে সমস্যা হলে কমেন্ট করে জানাবেন।

Post a Comment

0 Comments