রেস্পন্সিভ ডিজাইনের জন্য একটি স্লাইডিং ন্যাভিগেশন তৈরি

() translation by (you can also view the original English article)

এই টিউটোরিয়ালে, আপনি JavaScript এবং CSS দিয়ে বানাবেন একটি বিস্তারযোগ্য সাইড ন্যাভিগেশন মেনু। ফাইনাল প্রোডাক্ট নিচে প্রদর্শিত হলঃ

মার্কাপ

শুরু করার জন্য, চলুন আমাদের সাইড মেনুতে কিছু মার্কাপ যোগ করিঃ

  <div id="sideNavigation" class="sidenav">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
    <a href="#">About</a>
    <a href="#">Features</a>
    <a href="#">Contact Us</a>
  </div>

  <nav class="topnav">
    <a href="#" onclick="openNav()">
      <svg width="30" height="30" id="icoOpen">
          <path d="M0,5 30,5" stroke="#000" stroke-width="5"/>
          <path d="M0,14 30,14" stroke="#000" stroke-width="5"/>
          <path d="M0,23 30,23" stroke="#000" stroke-width="5"/>
      </svg>
    </a>
  </nav>
  
  <div id="main">
  <!-- Add all your websites page content here  -->
  </div>

এখানে আপনি দেখতে পাবেন আমরা একটি সাইড মেনু ডিভ তৈরি করেছি যার ক্লাস sidenav । এরপর আমরা যোগ করবো আসল ন্যাভিগেশন <nav> ট্যাগ, এবং আমরা আমাদের সাইড মেনু আইকন হিসেবে ব্যবহার করছি একটি SVG।

আইকনের onclick এট্রিবিউট এবং ক্লোজ বাটন কিছু JavaScript ট্রিগার করবে, যা আমরা পরবর্তীতে যোগ করব।

মনে রাখবেন আপনার ওয়েবসাইটের সমস্ত কন্টেন্ট div id="main" এর ভিতরে রাখবেন যাতে এটি ডানদিকে স্লাইড করে।

JavaScript

পরবর্তী, চলুন এখন JavaScript যোগ করে openNav এবং closeNav ফাংশন তৈরি করি।

<script>
function openNav() {
    document.getElementById("sideNavigation").style.width = "250px";
    document.getElementById("main").style.marginLeft = "250px";
}

function closeNav() {
    document.getElementById("sideNavigation").style.width = "0";
    document.getElementById("main").style.marginLeft = "0";
}
</script>

CSS

পরিশেষে, CSS দিয়ে আমাদের সাইড মেনু এবং লিঙ্কগুলির জন্য পেইজের শৈলি করা প্রয়োজনঃ

/* The side navigation menu */
.sidenav {
    height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 1; /* Stay on top */
    top: 0;
    left: 0;
    background-color: #111; /* Black*/
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 60px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover, .offcanvas a:focus{
    color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
    transition: margin-left .5s;
    padding: 20px;
    overflow:hidden;
    width:100%;
}
body {
  overflow-x: hidden;
}

/* Add a black background color to the top navigation */
.topnav {
    background-color: #333;
    overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
    background-color: #ddd;
    color: black;
}

/* Add a color to the active/current link */
.topnav a.active {
    background-color: #4CAF50;
    color: white;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}

a svg{
  transition:all .5s ease;

  &:hover{
    #transform:rotate(180deg);
  }
}

#ico{
  display: none;
}

.menu{
  background: #000;
  display: none;
  padding: 5px;
  width: 320px;
  @include border-radius(5px);

  #transition: all 0.5s ease;

  a{
    display: block;
    color: #fff;
    text-align: center;
    padding: 10px 2px;
    margin: 3px 0;
    text-decoration: none;
    background: #444;

    &:nth-child(1){
      margin-top: 0;
      @include border-radius(3px 3px 0 0 );
    }
    &:nth-child(5){
      margin-bottom: 0;
      @include border-radius(0 0 3px 3px);
    }

    &:hover{
      background: #555;
    }
  }
}

নোটঃ body {overflow-x: hidden;} নিশ্চিত করে যাতে একটি আনুভূমিক স্ক্রল প্রদর্শিত না হয় যখন এটি বিদ্যমান CSS এ ব্যবহার করা হচ্ছে।

আপনি এখন এক নজর দেখে নিতে পারেন আপনার মেনুটি এবং ব্রাউজারে এটি ব্যবহার করে দেখুন।

jQuery ব্যবহার

আপনি যদি সাইড মেনুর JavaScript টি jQuery তে করতে চান, আপনি এটি করতে পারবেন আমার পুর্বে দেওয়া JavaScript টি নিচের দেওয়া অধ্যায়ের সাথে প্রতিস্থাপন করেঃ

$('.topnav a').click(function(){
  $('#sideNavigation').style.width = "250px";
  $("#main").style.marginLeft = "250px";
});

$('.closebtn').click(function(){
  $('#sideNavigation').style.width = "0";
  $("#main").style.marginLeft = "0";
});

স্লাইড সরিয়ে ফেলা

মেনু প্রদর্শনের সময় স্লাইড এনিমেশন না চাইলে, কেবল CSS প্রপার্টির transition পরিবর্তন করুন, নিচে যেভাবে সংক্ষেপে দেখানো হলঃ

.sidenav {
    transition: 0s; 
}

#main {
    transition: margin-left 0s;
}

এটি মেনুকে তৎক্ষণাৎ প্রদর্শিত করবে কোনরুপ বিলম্ব ছাড়াই যা নির্দিষ্ট করে দেওয়া হয়েছে transition এ । আমরা ডিফল্ট ব্যবহার করেছিলাম 0.05s ।

উপসংহার

সাইড মেনু তৈরি করতে সামান্য কিছু লাইন কোডের প্রয়োজন হয় এবং খুব বেশি রিসোর্সের প্রয়োজন নেই। এছাড়াও যদি পেইজে jQuery থেকে থাকে অন্য কোন কাজের জন্য, কাজটি তবে আরো কম লাইন কোড লিখে করা যাবে এবং আরো কাস্টমাইজ করা যাবে।

কোড রেস্পন্সিভ করে বিভিন্ন ডিভাইসের স্ক্রিন রেজুলেশন এ কাজ করানোর ব্যাপারটি নিছক নির্দিষ্ট ক্ষেত্রে CSS এ মিডিয়া কোয়েরি যোগ করে পরিবর্তন করার ব্যাপার।

এটিকে আরো এগিয়ে নিতে, আপনি হয়ত আপনার মেনুর স্টাইল CSS ফ্রেমওয়ার্ক Bootstrap অথবা Bulma ব্যবহার করে করতে পারেন।