• seguici su feed rss
  • seguici su twitter
  • seguici su linkedin
  • seguici su facebook
  • cerca

SEI GIA' REGISTRATO? EFFETTUA ADESSO IL LOGIN.



ricordami per 365 giorni

HAI DIMENTICATO LA PASSWORD? CLICCA QUI

NON SEI ANCORA REGISTRATO ? CLICCA QUI E REGISTRATI !

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

di :: 15 ottobre 2020
Come realizzare una sidebar menu in Bootstrap per il nostro sito web

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.

 
 
 
 
pay per script

Hai bisogno di uno script PHP personalizzato, di una particolare configurazione su Linux, di una gestione dei tuoi server Linux, o di una consulenza per il tuo progetto?

x

ATTENZIONE