সকল Web Developers দের জন্য নিয়ে আসলাম Slide Down Navigation Menu। সম্পূর্ণ ফ্রি।

শুরু করছি আজকের পোষ্ট। ট্রিকবিডিতে অনেক ওয়েব ডেভেলপার আছেন। তাই নতুনত্বকে স্বাগতম জানিয়ে আপনাদের জন্য আজকেও একটি সুন্দর Slide Down Navigation Menu নিয়ে এসেছি।

এর আগেও এনিমেশন সহ লগিন ফর্ম দিয়েছিলাম।
আপনাদের সাড়া পেলে আরও নতুন নতুন কিছু দিতে পারব। তো প্রথমে ডিমো টি দেখে নিন। তারপর না হয় কোড নিন।

মন খারাপ করবেন না। ইমেজ টা একটু লো কোয়ালিটির দিয়েছি যাতে করে আপনারা ফ্রিবেসিক্স এ দেখতে পারেন।

Navigation Menu টির সবকিছু কমপ্লিট আছে। আপনাদের শুধু সাইট লিংক বসাতে হবে । প্রয়োজনে এনিমেশন এবং কালারের জন্য একটু কাস্টমাইজ করতে পারেন। নতুন মেনু যোগ বা সরাতে কোড টির সামান্য পরিবর্তন করুন। a href লিংকে আপনার পছন্দ মত মেনু যোগ করবেন। যেমন আমি Chat Option টি দিতে ভুলে গেছি। মেনু যোগ করা মূল বিষয় না মূল বিষয় ডিজাইন। আপনারা ইচ্ছা করলেই পরিবর্তন পরিবর্ধন করতে পারবেন।

আপনার পছন্দ মত মেনু এখানে Href লিংক দিয়ে যুক্ত করবেন।

Menu Name Change করতে এখানে Change করুন। Default “Open Menu” আছে।

Animation Transition Change করতে চাইলে এখানে Time Change করুন। তবে হ্যাঁ সবকিছুর একটা আদর্শ মাপ আছে। আমার এটা ভাল মনে হয়েছে বলে দিয়েছি। আপনারা চেন্জ করলে 0.5s এর নিচে দিবেন না।

এবার কোড টি এখান থেকে কপি করুন।





+html>
+style>
body {
    margin: 1;
    font-family: 'Lato', sans-serif;
}

.overlay {
   height: 0%;
   width: 100%;
   position: fixed;
   z-index: 1;
   top: 0;
   left: 0;
   background-color: rgb(0,0,0);
   background-color: rgba(0,0,0,0.9);
   overflow-y: hidden;
   transition: 0.6s;
}

.overlay-content {
    position: relative;
    top: 25%;
    width: 100%;
    text-align: center;
    margin-top: 30px;
}

.overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
    color: #f1f1f1;
}

.overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
}

@media screen and (max-height: 450px){
  .overlay {overflow-y: auto;}
  .overlay a {font-size: 20px}
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}

+/style>
+body>

+div id="myNav" class="overlay">
  +a href="javascript:void(0)"
  class="closebtn"
  onclick="closeNav()">× 
  +div class="overlay-content">
    +a href="#">About
    +a href="#">Services
    +a href="#">Forums
    +a href="#">Contact
  +/div>
+/div>



+span style="font-size:30px;cursor:
pointer"

onclick="openNav()">☰ +b>Open Menu  +/span>

+script>
function openNav() {
 document.getElementById("myNav")
 .style.height="100%";
}

function closeNav() {
 document.getElementById("myNav")
 .style.height = "0%";
}
+/script+
     




Note: ট্রিকবিডিতে কোড দেওয়া যায় না। Starting tag “<" এর পরাবর্তে "+" ব্যবহার করা হয়েছে। এটি মাত্র 18 জায়গায় আপনাদের পরিবর্তন করতে হবে। আপনারা "+" এর পরিবর্তে "<" দিন।

সবাইকে ধন্যবাদ Trickbd-র সাথে থাকার জন্য

আমাদের ফেসবুক রিপোর্ট জোন গ্রুপ।

https://free.facebook.com/groups/128941361043057?refid=27

Messege Chat এ Member Add করা হচ্ছে।


Contact Me on Facebook

Share This Post
About MainitBD Author

শিক্ষা জাতীর মেরুদন্ড! শিখবো, না হয় শেখাবো।

Leave a Comment