বন্ধুরা আজকে আমি দেখাবো কিভাবে শুধুমাত্র HTML এবং Css ব্যবহার করে সুন্দর একটা Navigation Bar ডিজাইন করবেন। এই Navigation Bar টা আপনি ইচ্ছা করলে আপনার ওয়েবসাইটে ব্যবহার করতে পারবেন। তছাড়া যদি HTML,Css সম্পর্কে জানা থাকে তাহলে আপনি নিজেই এটাকে আরো কাস্টমাইজ করে নিতে পারবেন। তাহলে চলুন শুরু করা যাক। তবে এর আগে ডমো দেখে নিন।
বন্ধুরা এখানে ভিডিও দেওয়া যায়না তাই নিচের লিংক থেকে ডেমো দেখে নিন মাত্র ১০ সেকেন্ড।
Demo Here
আশা করি ভালো লেগেছে। এখন আপনি শুধু নিচে থেকে কোড গুলো কপি করে আপনার সাইটে প্রয়োজন মত জায়গায় বসান আর কোডের ভিতরে লিংক গুলো বসিয়ে নিবেন তাহলেই হবে। লিংক এর a=# এরকম দেওয়া আছে…
Code
Stylish Bcrumb Design With HTML and CSS
By Admin – 16 July, 2019
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;
}
এখান থেকে কোড যদি কপি না হয় তবে নিচের লিংক থেকে কপি করুন।
Code এখানে
ভালো লাগলে একটা লাইক দিবেন। কোন সমস্যা হলে কমেন্ট করে জানাবেন