Fixed এবং Collapsible Sidenav

Materialize এর Navbar এবং Sidebar (Sidenav) - মেটেরিয়ালাইজ (Materialize) - Web Development

274

Sidenav বা Side Navigation হলো একটি ওয়েব ডিজাইন উপাদান যা ইউজারদের জন্য নেভিগেশন সহজ করে। এটি সাধারণত ওয়েবসাইটের পাশে স্থাপন করা হয় এবং এটি ইউজারকে বিভিন্ন পৃষ্ঠা বা সেকশনে দ্রুত নেভিগেট করতে সহায়তা করে। Materialize CSS এ Sidenav তৈরি করা খুবই সহজ এবং এটি অনেক ফিচার ও কাস্টমাইজেশনের সুযোগ প্রদান করে। এখানে আমরা Fixed এবং Collapsible Sidenav নিয়ে আলোচনা করব।

Fixed Sidenav

Fixed Sidenav হলো একটি সাইডবার যা স্ক্রোল করার সময় স্ক্রীনে ফিক্সড অবস্থানে থাকে। অর্থাৎ, ব্যবহারকারী স্ক্রোল করলেও এটি স্ক্রীনের পাশে স্থির থাকে এবং তাদের নেভিগেশন সুবিধা প্রদান করে। এটি সাধারণত বড় স্ক্রীন (ডেস্কটপ) ডিজাইনগুলিতে ব্যবহৃত হয়।

Fixed Sidenav তৈরি করা

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fixed Sidenav Example</title>
    <!-- Materialize CSS Link -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
</head>
<body>

    <!-- Fixed Sidenav -->
    <ul id="slide-out" class="sidenav fixed">
        <li><a href="#!">Home</a></li>
        <li><a href="#!">About</a></li>
        <li><a href="#!">Services</a></li>
        <li><a href="#!">Contact</a></li>
    </ul>

    <!-- Main content -->
    <div class="container">
        <h1>Welcome to Our Website</h1>
        <p>This is a fixed sidenav example.</p>
    </div>

    <!-- Materialize JS Link -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

    <!-- Initialize sidenav -->
    <script>
        $(document).ready(function(){
            $('.sidenav').sidenav();
        });
    </script>
</body>
</html>

কোড ব্যাখ্যা:

<ul id="slide-out" class="sidenav fixed">: এখানে sidenav ক্লাস দিয়ে সাইড ন্যাভিগেশন তৈরি করা হয়েছে এবং fixed ক্লাসটি সাইডবারটিকে স্ক্রীনের পাশে ফিক্সড অবস্থানে রাখে।
<li><a href="#!">Home</a></li>: এখানে সাইডবারের ভিতরে প্রতিটি লিংক দেওয়া হয়েছে।
$('.sidenav').sidenav();: এই স্ক্রিপ্টটি সাইডবারকে কার্যকর করতে ব্যবহার করা হয়।

Collapsible Sidenav

Collapsible Sidenav হলো এমন একটি সাইডবার যা ছোট স্ক্রীনে হ্যাম্বারবার আইকন ব্যবহার করে কোলোপস (collapse) করা যায় এবং বড় স্ক্রীনে এটি স্বয়ংক্রিয়ভাবে এক্সপ্যান্ডেড (expanded) থাকে। এটি সাধারণত মোবাইল এবং ট্যাবলেট ডিজাইনগুলিতে ব্যবহৃত হয়।

Collapsible Sidenav তৈরি করা

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Collapsible Sidenav Example</title>
    <!-- Materialize CSS Link -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
</head>
<body>

    <!-- Collapsible Sidenav -->
    <a href="#" data-target="mobile-nav" class="sidenav-trigger">
        <i class="material-icons">menu</i>
    </a>
    <ul id="mobile-nav" class="sidenav">
        <li><a href="#!">Home</a></li>
        <li><a href="#!">About</a></li>
        <li><a href="#!">Services</a></li>
        <li><a href="#!">Contact</a></li>
    </ul>

    <!-- Main content -->
    <div class="container">
        <h1>Welcome to Our Website</h1>
        <p>This is a collapsible sidenav example.</p>
    </div>

    <!-- Materialize JS Link -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

    <!-- Initialize sidenav -->
    <script>
        $(document).ready(function(){
            $('.sidenav').sidenav();
        });
    </script>
</body>
</html>

কোড ব্যাখ্যা:

<a href="#" data-target="mobile-nav" class="sidenav-trigger">: এই লিঙ্কটি একটি হ্যাম্বারবার আইকন প্রদর্শন করে, যা ক্লিক করলে সাইডবারটি খুলবে বা বন্ধ হবে।
<ul id="mobile-nav" class="sidenav">: এখানে sidenav ক্লাসের মাধ্যমে কলাপসিবল সাইডবার তৈরি করা হয়েছে, যা ছোট স্ক্রীনে হ্যাম্বারবার আইকনের মাধ্যমে খুলবে।
$('.sidenav').sidenav();: এই স্ক্রিপ্টটি সাইডবারটিকে কার্যকর করতে ব্যবহৃত হয়, বিশেষ করে মোবাইল ডিভাইসে।