শুরু করছি আজকের পোষ্ট। ট্রিকবিডিতে অনেক ওয়েব ডেভেলপার আছেন। তাই নতুনত্বকে স্বাগতম জানিয়ে আপনাদের জন্য আজকেও একটি সুন্দর 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

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

  1. Saimon Saimon Author says:
    ভালই লিখছেন
    1. Naim Sdq Trickbd_sdq Author Post Creator says:
      ধন্যবাদ।
  2. Md Shimul Md Shimul Contributor says:
    Code Deyoar jonno
    code
    tag use koren
    1. Naim Sdq Trickbd_sdq Author Post Creator says:
      kaj hoi na..
  3. ⓂⒶⒽⒷⓊⒷ Mahbub Author says:
    apni html code gula kon editor a likhsen??
    1. Naim Sdq Trickbd_sdq Author Post Creator says:
      html Editor diyee..
      1. ⓂⒶⒽⒷⓊⒷ Mahbub Author says:
        Download Link den plz
  4. Biplop Biplop Contributor says:
    text area codee use kore den
    1. Naim Sdq Trickbd_sdq Author Post Creator says:
      Try koresi bro… kaj hoi na.. Half code Asena. <style. tag gula
    1. Naim Sdq Trickbd_sdq Author Post Creator says:
      ধন্যবাদ
  5. Jackson Jackson Contributor says:
    vai apner fb id link ta den..plz.
    1. Naim Sdq Trickbd_sdq Author Post Creator says:
      plz post er niche dewa ase…
  6. Hasan Boy Hasan Boy Contributor says:
    bro amar akta wapka sait ase..ai tate dokte pari na ..ai ta domen dia ante hobe…ki babe unbo ..plz link ba video .post koren…
  7. Naim Sdq Trickbd_sdq Author Post Creator says:
    C panel e dukte parsen na.
    pass Wrong naki age seta bolen.

Leave a Reply