domenica 27 Settembre 2020

Download in corso

Softwareone.it

06-01-2019

Menu Responsive in CSS

Un Menu responsive in CSS che si adatta alle dimensioni dello schermo utilizzando le Media query, ovvero dei moduli in CSS3 che permettono il rendering dei contenuti e di adattarli in base alla risoluzione dello schermo che sia un Desktop o uno smartphone.

Sintassi

@media only screen and (max-width: 500px) {
    body {
       background-color: lightblue;
           }
       }

Se la finestra del browser è più piccola di 500px, il colore di sfondo cambierà in azzurro.

Pubblicità

Creiamo un menu responsive utilizzando le Media query

La struttura del menu

<header>
   <div class="container">
   <div class="logo">
    <h1>Logo</h1>
   </div>
   <span class="toggle">
    <i class="fa fa-bars"></i>
   </span>
   
   <nav>
    <li><a><span data-hover="Home">Home</span></a></li>
    <li><a><span data-hover="Servizi">Servizi</span></a></li>
    <li><a><span data-hover="Chi siamo">Chi siamo</span></a></li>
    <li><a><span data-hover="Contattaci">Contattaci</span></a></li>
   </nav>
   
  </header>

Abbiamo un container che sarà il contenitore del menu che si trova nell header, una classe che conterrà lo stile per il logo, una classe toggle e un tag i che conterrà l’icona del menu responsivo utile per il tocco touch, in per questo ci viene in aiuto bootstrap

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet" />

aggiungiamo jQuery per attivare il menu

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

aggiungiamo lo stile del menu

header {
    height: 100px;
    width: 100%;
    position: absolute;
    z-index: 3;
    background-color: #F30;
}
.container {
    width: 1170px;
    margin: 0 auto;
}
.logo {
    float: left;
    margin-top: 10px;
}
h1 {
    color: #FFF;
    text-align: center;
    font-family: Lato;
    text-transform: uppercase;
}
.toggle {
    display: none;
    padding: 0;
    border-top: 0;
}
.toggle:hover {
    padding: 0;
    border-top: 0;
}
 
.toggle i {
    font-size: 40px;
    margin-top: 30px;
}
 
nav {
    float: right;
    margin-top: 10px;
    margin-right: 40px;
    background-color: #f30;
}
nav li {
    list-style-type:none;
    float: left;
}
nav a {
    font-family: Lato;
    font-weight: 700;
    text-transform: uppercase;
    padding: 10px;
    display: block;
    margin-top: 20px;
}
span {
    color: #FFF;
    padding-top: 3px;
    padding-bottom: 3px;
    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;
    -webkit-transition: 0.3s;
}
span:hover {
    padding-top: 10px;
    padding-bottom: 10px;
    -webkit-transition: 0.3s;
}
span::before {
    content: attr(data-hover);
    position: absolute;
    color: #36F;
    opacity: 0;
    margin-top: 10px;
    -webkit-transition: 0.3s;
}
span:hover::before {
    margin-top: 0;
    -webkit-transition: 0.3s;
    opacity: 1;
}

le media query

@media screen and (min-width: 1024px) and (max-width: 1279px) {
 .container {
     width: 980px;
 }
}
 
@media screen and (min-width: 769px) and (max-width: 1023px) {
 .container {
     width: 700px;
 }
}
 
@media screen and (max-width: 768px) {
 .container {
     width: 400px;
 }
 nav {
     display: none;
     position: absolute;
     top: 90px;
     left: 0px;
     width: 100%;
     padding-bottom: 40px;
 }
 nav li {
     float: none;
     list-style-type: none;
     padding-left: 20px;
 }
 .toggle {
     display: block;
     float: right;
 }
}

Ed infine 2 righe di jQuery utilizzando il metodo slideToggle() che controlla gli elementi selezionati per la visibilità, slideDown () viene eseguito se un elemento è nascosto slideUp () viene eseguito se un elemento è visibile

$(document).ready(function(){   
         
        $(".toggle").click(function() {
             
            $("nav").slideToggle(300);
             
        });
        
});

Risultato

Scarica Esempio

Pubblicità

I commenti sono chiusi.

Pubblicità