Membership index

NOTA: I download riservati ai membri possono essere effettuati anche senza registrazione con una piccola donazione a sostegno del sito.

Lista delle risorse scaricabili con donazione

ATTENZIONE: Non dimenticate di aggiungere i vendor prefixes ai codici css di base.

Various navigation menus with different graphics and functionality.

Menù di navigazione vari con grafica e funzionalità differenti.

Tutti i menu sono responsive. Riduci la finestra del browser per vedere l'effetto su mobile.

---

11a-Horizontal menu with transitions - HTML, CSS

11a-Menu orizzontale con transizioni - HTML, CSS

Preview + download

11b-Horizontal dropdown menu - HTML, CSS

11b-Menu orizzontale con tendina - HTML, CSS

Preview + download

11c-Horizontal menu + hamburger menu on mobile - HTML, CSS

11c-Menu orizzontale con uscita laterale su mobile - HTML, CSS

Preview + download

11e-Advanced horizontal menu 2 - HTML, CSS, JS

11e-Menu orizzontale avanzato 2 - HTML, CSS, JS

Preview + download

11f-Vertical side disappearing menu (dx o sx) - HTML, CSS

11f-Menu verticale laterale a comparsa (dx o sx) - HTML, CSS

Preview + download

11g-Visible vertical side menu 1 - HTML, CSS

11g-Menu verticale laterale visibile 1 - HTML, CSS

Preview + download

Visible vertical side menu 2 - HTML, CSS

Menu verticale laterale visibile 2 - HTML, CSS

Preview and code

Visible vertical side menu 3 - HTML, CSS

Menu verticale laterale visibile 3 - HTML, CSS

Preview and code

11h-Sticky menu - HTML, CSS

11h-Menu sticky - HTML, CSS

Preview + download

Accordion vertical menu - HTML, CSS

Menu verticale accordion - HTML, CSS

Preview and code

11i-Vertical menu with submenu - HTML, CSS

11i-Menu verticale con sotto-menu - HTML, CSS

Preview + download

Vertical menu with submenu and transitions - HTML, CSS, jQuery

Menu verticale con sotto-menu e transizioni - HTML, CSS, jQuery

Preview and code

Usefull solutions.

Soluzioni utili.

Navbar appears on scroll - HTML, CSS, JS

La barra di navigazione appare solo allo scroll - HTML, CSS, JS

Apri codice:

<style>
/*regole di style da aggiungere a quelle di base*/
#navbar {
  position: fixed;
  top: -50px; /*valore corrispondente all'altezza della navbar*/
  transition: top 0.3s;
}
</style>

<nav id="navbar">
<!--qui il contenuto della navbar-->
</nav>

<script>
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    document.getElementById("navbar").style.top = "0";  // con uno scroll di 20px la navbar appare
  } else {
    document.getElementById("navbar").style.top = "-50px"; //valore corrispondente all'altezza della navbar
  }
}
</script>

Add shadow to nav on scroll - HTML, CSS, JS

Aggiungere ombreggiatura alla barra di navigazione allo scroll- HTML, CSS, JS

Apri codice:

<style>
html, body {
margin:0;
padding:0;
}
nav {
    width: 100%;
    position: fixed;
    z-index:9000;
    overflow: auto;
    background: #e6e6e6;
    text-align: center;
    padding: 10px 0;
    -webkit-transition: all 0.15s linear;
    -o-transition: all 0.15s linear;
    transition: all 0.15s linear;
}

nav.active {
     box-shadow: 0 0 10px rgba(0,0,0,0.4);   
}
</style>

<nav>Nav</nav>

<script>
$(window).scroll(function() {     
    var scroll = $(window).scrollTop();
    if (scroll > 0) {
        $("nav").addClass("active");
    }
    else {
        $("nav").removeClass("active");
    }
});
</script>

Menu toggle icon

Esempio:

Apri codice:

<style>
.menu span {
text-decoration:none;
}
.menu span::after {
    content: " \2630";
    font-size: 16px;
    font-weight: bold;
}
.menu .toggle::after {
    content: " \2715";
    font-size:16px;
    color:black!important;
    font-weight: bold;
}
</style>

<div class="menu">
<span onclick="this.classList.toggle('toggle');">MENU </span>
</div>

Membership index