Home Login Register
Click here to share any of your writing

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

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

Bear Grylls › 1 month ago
সুন্দর একটা Navigation Bar ডিজাইন করুন HTML এবং Css দিয়ে


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

Code

CSS Breadcrumb Design | bengalitut.com

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 এখানে

ভালো লাগলে একটা লাইক দিবেন। কোন সমস্যা হলে কমেন্ট করে জানাবেন


About Author


Contributor
Total Post: [16]

Leave a Reply

You Must be Login or Register to Submit Comment.

AmarTips.Mobi 2017
Powered by - AmarTips.Mobi