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

2 months ago (Nov 10, 2017) 1,042 views

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

Category: Wapka by

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

Report

About Post: 22

Naim sdq

ট্রিকবিডিতে শিখতে এবং শিখাতে এসেছি।

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

  1. Saimon Saimon (Author) says:

    ভালই লিখছেন

  2. Md Shimul Md Shimul (Contributor) says:

    Code Deyoar jonno
    code
    tag use koren

  3. Mahbub Mahbub (Author) says:

    apni html code gula kon editor a likhsen??

  4. Biplop Biplop (Contributor) says:

    text area codee use kore den

  5. Jackson Jackson (Contributor) says:

    vai apner fb id link ta den..plz.

  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 (Contributor) says:

    C panel e dukte parsen na.
    pass Wrong naki age seta bolen.

Leave a Reply