Guida creare con i CSS

Layout con barra di navigazione comparsa




Codice HTML intera pagina web

<!DOCTYPE html>



<html>
<head>



<meta charset=utf-8 />



<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>Titolo sito</title>



<style type="text/css">



body{
 margin: 15px;
 max-width: 1000px;
}
.icona {
 width: 35px;
 height: 5px;
 background-color: black;
 margin: 6px 0;
 position: relative;
 cursor: pointer;



-webkit-transition: background-color;
 -webkit-transition-duration: 0.5s;
 -webkit-transition-timing-function: ease-in;



-moz-transition: background-color;
 -moz-transition-duration: 0.5s;
 -moz-transition-timing-function: ease-in;



-ms-transition: background-color;
 -ms-transition-duration: 0.5s;
 -ms-transition-timing-function: ease-in;



-o-transition: background-color;
 -o-transition-duration: 0.5s;
 -o-transition-timing-function: ease-in;
}



.header{
 position: relative;
 width: 100%;
 height: 200px;
 background: fixed no-repeat center;
 background-size: cover;
 background-image: url("temporale.jpg");
}



.trasparenza{
 position: absolute;
 width: 100%;
 height: 100%;
 background-color: grey;
 opacity: 0.6;
 -webkit-transition: opacity;
 -webkit-transition-duration: 1.5s ;
 -webkit-transition-timing-function: easy-in;
 -moz-transition: opacity;
 -moz-transition-duration: 1.5s ;
 -moz-transition-timing-function: easy-in;
 -ms-transition: opacity;
 -ms-transition-duration: 1.5s ;
 -ms-transition-timing-function: easy-in;
 -o-transition: opacity;
 -o-transition-duration: 1.5s ;
 -o-transition-timing-function: easy-in;
 }



.trasparenza:hover{
 opacity: 0.4;
 }



.container{
 position: absolute;
 top: 5%;
 left: 5%;
 border-radius: 100%;
 padding:1%;
 width:35px;
 border: solid 2px red;
 -webkit-transition: border-color,border-radius,padding,margin;
 -webkit-transition-duration: 0.5s,1s,1s,1s;
 -webkit-transition-timing-function: ease-out;
 -moz-transition: border-color,border-radius,padding,margin;
 -moz-transition-duration: 0.5s,1s,1s,1s;
 -moz-transition-timing-function: ease-out;
 -ms-transition: border-color,border-radius,padding,margin;
 -ms-transition-duration: 0.5s,1s,1s,1s;
 -ms-transition-timing-function: ease-out;
 -o-transition: border-color,border-radius,padding,margin;
 -o-transition-duration: 0.5s,1s,1s,1s;
 -o-transition-timing-function: ease-out;
}



.container:hover{
 margin-top: 0.5%;
 margin-left: 0.5%;
 border-radius:5%;
 border-color:black;
 padding:0.5%;
}
.container:hover .icona{
 background-color: red;
}



.overlay {
 height: 100%;
 width: 0;
 position: fixed;
 z-index: 1;
 left: 0;
 top: 0;
 background-color: rgb(0,0,0);
 background-color: rgba(0,0,0, 0.9);
 overflow-x: hidden;
 transition: 0.5s;
}



.overlay-content {
 position: relative;
 top: 25%;
 width: 20%;
 text-align: left;
 margin-top: 30px;
 margin-left: 30px;
}



.overlay a {
 padding: 8px;
 text-decoration: none;
 font-size: 25px;
 color: #818181;
 display: block;
 transition: 0.3s;
}



.overlay a:hover, .overlay a:focus {
 color: #f1f1f1;
}



.overlay .closebtn {
 position: absolute;
 top: 20px;
 left: 295px;
 font-size: 60px;
}



@media screen and (max-height: 450px) {
 .overlay a {font-size: 20px}
 .overlay .closebtn {
 font-size: 40px;
 top: 15px;
 right: 35px;
 }
}



.titolo {
 position: absolute;
 top: 40px;
 left: 50%;
 transform: translate(-50%, -50%);
 text-align: center;
 color: white;
 font-size: 48px;
}



h1, h2, h3 {
 text-align: center;
}



</style>
</head>



<body>
<!-- The overlay -->
<div id="myNav" class="overlay">



<!-- Button to close the overlay navigation -->
 <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>



<!-- Overlay content -->
 <div class="overlay-content">
 <a href="#">Informazioni</a>
 <a href="#">Servizi</a>
 <a href="#">Clienti</a>
 <a href="#">Contatti</a>
 </div>
</div>



<!-- Use any element to open/show the overlay navigation menu -->
<div class="header">
<div class="trasparenza"></div>
 <div class=titolo> Titolo sito</div>
<div class="container">
<div onclick="openNav()">
 <div class="icona"></div>
 <div class="icona"></div>
 <div class="icona"></div>
</div>
</div>
</div>
<h1>Titolo pagina web</h1>
Questo รจ il testo della nostra pagina web.
</body>
<script type="text/javascript">
/* Open when someone clicks on the span element */
function openNav() {
 document.getElementById("myNav").style.width = "350px";
}



/* Close when someone clicks on the "x" symbol inside the overlay */
function closeNav() {
 document.getElementById("myNav").style.width = "0%";
}
</script>
</html>