---

Menu Responsive sempre visibile

Prova a stringere la pagina, notarai che il menù cambia aspetto e a scorrerla fino in fondo notaterai il menù sempre visibile

Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo

Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo

Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo

Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo

Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo

Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo

Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo

Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo Testo testo testo

---

Html:

<div class="menu" id="myMenu"> <a href="#home" class="active">Home</a> <a href="#news">News</a> <a href="#contact">Contact</a> <a href="#about">About</a> <a href="javascript:void(0);" class="icon" onclick="myFunction()"> <i class="fa fa-bars"></i> </a> </div>

Css:

.menu { overflow: hidden; background-color: lightgrey; position: fixed; top: 0; width: 100%; } .menu a { float: left; display: block; color: red; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } .menu a:hover { background-color: red; color: white; } .menu a.active { background-color: red; color: white; } .menu .icon { display: none; } @media screen and (max-width: 600px) { .menu a:not(:first-child) {display: none;} .menu a.icon { float: right; display: block; } } @media screen and (max-width: 600px) { .menu.responsive {position: relative;} .menu.responsive .icon { position: absolute; right: 0; top: 0; } .menu.responsive a { float: none; display: block; text-align: left; } }

Javascript:

<script> function myFunction() { var x = document.getElementById("myMenu"); if (x.className === "menu") { x.className += " responsive"; } else { x.className = "menu"; } } </script>

---