Salve a tutti,
ho creato una pagina html con una serie di article contenenti video. Vorrei creare un menù a tendina per selezionare solo determinate categorie (ad esempio, solo i video di giocoleria)
Come posso fare?
<!DOCTYPE html>
<html lang="it">
<head>
<title>Foto</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<link href='' rel='stylesheet' type='text/css' />
<link rel="stylesheet" href="
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--[if lt IE 9]>
<script src=">
<![endif]-->
</head>
<body>
<!--Header-->
<header>
<nav class="social">
<ul>
<li><a href="#"class="fa fa-facebook"></a></li>
<li><a href="#" class="fa fa-twitter"></a></li>
<li><a href="#" class="fa fa-instagram"></a></li>
<li><a href="#" class="fa fa-youtube"></a></li>
</ul>
</nav>
<div class="form-top">
<form>Registrati alla Newsletter
<input type="email">
<input type="submit" id="submit">
</form>
</div>
<img src="image/banner.jpg" class="small" alt="logo"/>
<!--Menu di navigazione-->
<div class="topnav" id="myTopnav">
<a href="index.html">Home</a>
<a href="#">Progetto</a>
<a href="iniziative.html">Iniziative</a>
<a href="#">News</a>
<a href="#">Foto e video</a>
<a href="#">Come partecipare</a>
<a href="#">Registrati</a>
<a href="#">Contatti</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">☰</a>
</div>
</header>
<div id="content">
<div class="responsive">
<div class="gallery">
<video width="600" height="600" controls>
<source src="video/giocoleria1.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="desc">Circo Inzir Torino 20 maggio 2016</div>
<iframe src="" width="100%" height="20" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
</div>
</div>
<div class="responsive">
<div class="gallery">
<video width="600" height="600" controls>
<source src="video/giocoleria2.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="desc">Circo Inzir Torino 20 maggio 2016</div>
<iframe src="" width="100%" height="20" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
</div>
</div>
<div class="responsive">
<div class="gallery">
<video width="600" height="600" controls>
<source src="video/giocoleria4.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="desc">Circo Inzir Torino 20 maggio 2016</div>
<iframe src="" width="100%" height="20" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
</div>
</div>
<div class="responsive">
<div class="gallery">
<video width="600" height="600" controls>
<source src="video/giocoleria5.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="desc">Circo Inzir Torino 20 maggio 2016</div>
<iframe src="" width="100%" height="20" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
</div>
</div>
<div class="clearfix"></div>
<div class="responsive">
<div class="gallery">
<video width="600" height="600" controls>
<source src="video/giocoleria6.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="desc">Circo Inzir Torino 20 maggio 2016</div>
<iframe src="" width="100%" height="20" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
</div>
</div>
<div class="responsive">
<div class="gallery">
<video width="600" height="600" controls>
<source src="video/giocoleria7.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="desc">Circo Inzir Torino 20 maggio 2016</div>
<iframe src="" width="100%" height="20" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
</div>
</div>
<div class="responsive">
<div class="gallery">
<video width="600" height="600" controls>
<source src="video/giocoleria8.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="desc">Circo Inzir Torino 20 maggio 2016</div>
<iframe src="" width="100%" height="20" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
</div>
</div>
<div class="responsive">
<div class="gallery">
<video width="600" height="600" controls>
<source src="video/giocoleria9.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="desc">Artisti in Piazza 2017-Pennabilli</div>
<iframe src="" width="100%" height="20" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
</div>
</div>
<div class="clearfix"></div>
</div>
<!--Footer-->
<footer>
<p>FNAS - federazione nazionale arti in strada | sede legale: Via di Villa Patrizi 10, 00161 Roma - C.F. 96395280587 - P.Iva 07510401008</p>
</footer>
<script>
<!--Rende la topnav responsive-->
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
</html>