NOTE:
Downloads reserved for members can also be made without registration with a free donation in support of the site.
List of downloadable sresources with donation
Minimize your browser window to see the effect on mobile.
Code:
List of downloadable sresources with donation
ATTENTION: Don't forget to add the vendor prefixes to the css basic codes.
Various navigation menus with different graphics and functionality.
Menù di navigazione vari con grafica e funzionalità differenti.
All menus are responsive.Minimize your browser window to see the effect on 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.
Add shadow to nav on scroll - HTML, CSS, JS
Aggiungere ombreggiatura alla barra di navigazione allo scroll- HTML, CSS, JS
Codice/Code:
<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>
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
Example:Code:
<style>
.menu span {
text-decoration:none;
}
.menu span::after {
content: " \2630";
font-size: 1.2rem;
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>
.menu span {
text-decoration:none;
}
.menu span::after {
content: " \2630";
font-size: 1.2rem;
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>
Argomenti del sito correlati: