Come realizzare una sidebar menu in Bootstrap per il nostro sito web

di Giulio di Bari :: 15 ottobre 2020

Vediamo come realizzare un menu sidebar per il nostro sito, che sia sempre visibile in modalità desktop, e che diventi un menu hamburger in modalità mobile e tablet.

In modalità mobile e tablet sarà presente un menu harmburger, cliccato il quale si aprirà, dalla sinistra, la sidebar menu andando ad oscurare il contenuto della pagina.

Ci aiutiamo con Bootstrap, il noto framework css per la creazione di interfacce, moduli, pulsanti di un sito web, e di Font Awesome, noto toolkit di icone.

Posto subito l'html completo della nostra pagina web e dopo lo analizziamo.

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Sidebar con Bootstrap 4</title>
    <!-- Bootstrap CSS CDN -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
    <!-- Custom CSS -->
    <link rel="stylesheet" href="style.css">
    <!-- Font Awesome JS v5 -->
    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
</head>

<body>

    <div class="wrapper">

        <!-- Sidebar  -->
        <nav id="sidebar">
            <div class="sidebar-header">
                <h3>Bootstrap Sidebar</h3>
            </div>
            <ul class="list-unstyled components">
                <li><a href="#">Home</a></li>
                <li>
                    <a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Pages</a>
                    <ul class="collapse list-unstyled" id="pageSubmenu">
                        <li><a href="#">Page 1</a></li>
                        <li><a href="#">Page 2</a></li>
                        <li><a href="#">Page 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>

        <!-- Overlay  -->
        <div id="overlay">
            <div id="dismiss">
                <i class="fas fa-arrow-left"></i>
            </div>
	</div>

        <!-- Page Content  -->
        <div id="content">
            <button type="button" id="sidebarCollapse" class="btn btn-dark d-md-none">
                <i class="fas fa-align-justify"></i>
            </button>
            <h2>Lorem Ipsum Dolor</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <div class="line"></div>
            <h2>Lorem Ipsum Dolor</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
         </div>

    </div>

    <!-- jQuery CDN - Slim version (=without AJAX) -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <!-- Popper.JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    <!-- Bootstrap JS -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $('#sidebarCollapse').on('click', function () {
                $('#sidebar').toggleClass('active');
                $('#overlay').toggleClass('active');
            });

            $('#dismiss, #overlay').on('click', function () {
                $('#overlay').removeClass('active');
                $('#sidebar').removeClass('active');
            });
        });
    </script>
</body>

</html>

Analizziamo il codice di questa pagina.

Nella sezione "header" abbiamo incluso

Bootstrap: utilizziamo la CDN
un nostro file css: "style.css", che tra poco vedremo
Font Awesome: utilizzato solo per l'icona del menu hamburger

Nel "body" abbiamo alcuni blocchi di codice

wrapper: è il contenitore di tutto il codice della pagina
sidebar: è il menu di navigazione laterale realizzato con Boostrap, che contiene un menu ed un sottomenu, e un menu hamburger da visualizzare in modalità mobile e tablet
content: è il contenuto della pagina
overlay: serve ad oscurare il contenuto della pagina quando, in modalità mobile e tablet, la sidebar menu è aperta.

Al termine del body abbiamo abbiamo incluso alcuni javascript

jquery.min.js: necessario per l'esecuzione di un nostro script custom che vediamo tra poco
popper.js: richiesta da bootstrap per funzionare
bootstrap.min.js: richiesto da bootstrap

Infine abbiamo uno script custom, che richiede jquery, e che utilizziamo per:

aprire il menu sidebar, quando clicchiamo sul pulsante hamburger in modalità mobile e tablet
chiudere il menu sidebar, quando clicchiamo sull'overlay o sul pulsante di chiusura

Adesso occupiamoci del CSS necessario per far funzionare il tutto.

body {
    font-family: arial, sans-serif;
    background: #fafafa;
}

p {
    font-size: 1.1em;
    font-weight: 300;
    line-height: 1.7em;
    color: #999;
}

a,
a:hover,
a:focus {
    color: inherit;
    text-decoration: none;
    transition: all 0.3s;
}

.navbar {
    padding: 15px 10px;
    background: #fff;
    border: none;
    border-radius: 0;
    margin-bottom: 40px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}

.navbar-btn {
    box-shadow: none;
    outline: none !important;
    border: none;
}

.line {
    width: 100%;
    height: 1px;
    border-bottom: 1px dashed #ddd;
    margin: 40px 0;
}

/* ---------------------------------------------------
    WRAPPER
----------------------------------------------------- */

.wrapper {
    display: flex;
    width: 100%;
    align-items: stretch;
}

/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */

#sidebar {
    min-width: 250px;
    max-width: 250px;
    background: #7386D5;
    color: #fff;
    transition: all 0.3s;
}

#sidebar.active {
    margin-left: -250px;
    z-index: 999;
}

#sidebar .sidebar-header {
    padding: 20px;
    background: #6d7fcc;
}

#sidebar ul.components {
    padding: 20px 0;
    border-bottom: 1px solid #47748b;
}

#sidebar ul p {
    color: #fff;
    padding: 10px;
}

#sidebar ul li a {
    padding: 10px;
    font-size: 1.1em;
    display: block;
}

#sidebar ul li a:hover {
    color: #7386D5;
    background: #fff;
}

#sidebar ul li.active>a,
a[aria-expanded="true"] {
    color: #fff;
    background: #6d7fcc;
}

a[data-toggle="collapse"] {
    position: relative;
}

.dropdown-toggle::after {
    display: block;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}

ul ul a {
    font-size: 0.9em !important;
    padding-left: 30px !important;
    background: #6d7fcc;
}

/* ---------------------------------------------------
    OVERLAY
----------------------------------------------------- */

#overlay {
    position:fixed;
    width: 100%;
    padding: 20px;
    min-height: 100vh;
    transition: all 0.3s;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    opacity: 0;
}

#overlay.active {
    display: block;
    opacity: 1;
}

/* ---------------------------------------------------
    PAGE CONTENT
----------------------------------------------------- */

#content {
    width: 100%;
    padding: 20px;
    min-height: 100vh;
    transition: all 0.3s;
}

/* ---------------------------------------------------
    DISMISS STYLE
----------------------------------------------------- */

#dismiss {
    width: 35px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    background: #7386D5;
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

#dismiss:hover {
    background: #fff;
    color: #7386D5;
}


/* ---------------------------------------------------
    MEDIA QUERIES
----------------------------------------------------- */

@media (max-width: 768px) {
    #sidebar {
        margin-left: -250px;
    }
    #sidebar.active {
        margin-left: 0;
    }
    #sidebarCollapse span {
        display: none;
    }
}

In questo CSS, che credo sufficientemente chiaro, abbiamo:

una parte iniziare relativa al layout generale della pagina
la sezione wrapper, che è il contenitore degli altri "div" della pagina "parent" abbiamo reso una flexbox usando una proprietà "display" con valore "flex", e con "align-items: stretch" facciamo in modo che tutti i div siano tutti alti quando l'altezza della pagina
la sezione sidebar, che si occupa della sidebar menu e del menu hamburger
la sezione page content, che interessa il contenuto della pagina
la sezione overlay, che serve a coprire la content, quando, in modalità mobile e tablet, si clicca sul menu hamburger
la sezione dismiss, è relativo al pulsante di chiusura della sidebar, sempre in modalità mobile e tablet
infine abbiamo delle media queries, per nascondere la sidebar fuori schermo, quando siamo in modalità mobile e tablet, cioè con una risoluzione dello schermo minore di 768 px

Puoi vedere l'esempio in azione e scaricare i file dell'esempio. Se siete su Desktop restringete la pagina in modo da poter vedere il menu hamburger in azione.

DEMO

SCARICA