Menu a Tendina Html e Css

Scarica gratuitamente il menu a tendina HTML e CSS. Il menu responsive dal design semplice si adatta a schermi Mobile e Desktop senza utiliazzare Javascript.

by Andrea Biagi

HTML

<!DOCTYPE html>
<html hreflang="it">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The Chef's Menu</title>
<meta name="description" content="#" />
        
<meta name="author" content="Chef Studio" />
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="style.css" /> 
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab&display=swap" rel="stylesheet">
	
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0">
	
</head>
	
<body>
<input type="checkbox" id="hamburger"/>
<label class="menuicon" for="hamburger">
  <span></span>
</label>

<div id="bar"> 
 	<div id="logo">
    <a href="#"><img src="img/your-logo.png" alt="your logo" title="your logo" height="54"></a>
	</div> <!--/fine logo-->   
</div><!--/fine bar--> 
	
<nav class="menu-visibility">
            	<ul>
                	 <li><a class="active" href="#">HOME</a></li>
                     <li><a class="submenu" href="#">PRODOTTI</a>
						<ul>
                    		<li><a href="#">Prodotto 1</a></li>
					 		<li><a href="#">Prodotto 2</a></li>		
							<li><a href="#">Prodotto 3</a></li>
							<li><a href="#">Prodotto 4</a></li>
						</ul> 
                     </li>
					 <li><a class="submenu" href="#">SERVIZI</a>
                     	<ul>
                            <li><a href="#">Servizio 1</a></li>
							<li><a href="#">Servizio 2</a></li>
							<li><a href="#">Servizio 3</a></li>
    					</ul>
                    </li>
					<li><a href="#">CHI SIAMO</a></li>
					<li><a href="#">CONTATTI</a></li>
					<li class="lingua"><a href="#">Lingua</a>
                     	<ul>
                            <li><a href="#">It - italiano</a></li>
							<li><a href="#">Fr - français </a></li>
							<li><a href="#">En - english</a></li>  
    					</ul>
                     </li>
              	</ul>
</nav>

			
<div class="contenitore">

	<div...

CSS

@charset "utf-8";
/* CSS Document */

/* -------------reset----------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

input:focus, button:focus {outline:0;}

img {
    vertical-align: middle;
}

a{
	text-decoration:none;
}

ul li{ 
	list-style:none;
}

html,body{
	font-family: 'Roboto Slab', serif;
	color:#666 /*color-text*/;
	height:100%;
	width:100%;
}

h1{
	font-size: 1.5em;
	text-align:left;
	font-weight: bold;
	color:#A24038/* primary color*/;
}

/* -----------------contenitore e contenuto ------------------ */

.contenitore .contenuto{
	max-width:1200px;
	margin:auto;
	padding: 70px 10px;
}

.contenitore .contenuto a{
	color:#A24038/* primary color*/;
	text-decoration: underline;
	font-weight: bold;
}

.contenitore .contenuto a:hover{
	color:#B3453E/* primary lightcolor*/;
}

/* -----------------Menu nella versione mobile-----------------*/

.active{
	color:#FFFFFF/* primary super-lightcolor*/;
	background-color: #B3453E/* primary lightcolor*/;
}
	
.active-dropdown{
	color:#FFFFFF /* primary super-lightcolor*/;
	background-color:#B3453E/* primary lightcolor*/;
}

nav{
	height:100%;
	background-color:#A24038;/* primary lightcolor* /* sfondo menu mobile*/
	position:fixed;
	width:100%;
	margin-top:54px;
	visibility:hidden;
	overflow:auto;/* permette lo scroll quando il menu è aperto*/
	   
}

nav ul{
	padding-bottom:54px;
}

nav ul li a {
	padding: 16px 0 16px 32px;
	display:block;
	color:#fbfafa;
	font-size:16px;
	transition: background-color 0.3s ease;
}

.submenu{
	color:#FF6759 /* primary...