<style>
.gallery-menu .site-navigation {
border-top: 1px solid grey;
border-bottom: 1px solid grey;
}
.gallery-menu.hide-featured-image .featured-image {
display: none;
}
.featured-image img {
background-position: center;
background-repeat: no-repeat;
height: auto;
width: 100%;
margin-bottom: 60px;
}
.flex-menu {
display: flex;
justify-content: center;
padding: 10px 0;
}
.menu li a {
color: black;
}
.menu li.active a {
background-color: initial;
color: blue;
font-weight: bold;
}
.gallery-container {
display: none;
}
.gallery-container.active {
display: block;
}
@media screen and (max-width: 768px) {
.flex-menu {
flex-direction: column;
}
}
</style>
<div class="gallery-menu ">
<div class="featured-image"><img src="http://localhost/pilarsorsogon/wp-content/uploads/2018/01/11760204_1007476499286783_1049045783108055654_n.jpg" alt=""></div>
<nav id="gallery-nav" class="site-navigation" role="navigation">
<ul class="menu flex-menu">
<li class="active" data-gallery="all"><a href="#">All</a></li>
<li data-gallery="agriculture"><a href="#">Agriculture</a></li>
<li data-gallery="awarding"><a href="#">Awarding</a></li>
<li data-gallery="christmas"><a href="#">Christmas</a></li>
<li data-gallery="event"><a href="#">Event</a></li>
<li data-gallery="fiesta"><a href="#">Fiesta</a></li>
<li data-gallery="fisheries"><a href="#">Fisheries</a></li>
<li data-gallery="health"><a href="#">Health</a></li>
<li data-gallery="programs"><a href="#">Programs</a></li>
<li data-gallery="sports"><a href="#">Sports</a></li>
<li data-gallery="training"><a href="#">Training</a></li>
<li data-gallery="other"><a href="#">Other</a></li>
</ul>
</nav>
<section id="gallery-container-all" class="gallery-container active">
[ngg src="galleries" ids="2,4,5,6,7,8,9,10,11,13,12" display="basic_thumbnail"]
</section>
<section id="gallery-container-agriculture" class="gallery-container">
[ngg src="galleries" ids="2" display="basic_thumbnail"]
</section>
<section id="gallery-container-awarding" class="gallery-container">
[ngg src="galleries" ids="4" display="basic_thumbnail"]
</section>
<section id="gallery-container-christmas" class="gallery-container">
[ngg src="galleries" ids="5" display="basic_thumbnail"]
</section>
<section id="gallery-container-event" class="gallery-container">
[ngg src="galleries" ids="6" display="basic_thumbnail"]
</section>
<section id="gallery-container-fiesta" class="gallery-container">
[ngg src="galleries" ids="7" display="basic_thumbnail"]
</section>
<section id="gallery-container-fisheries" class="gallery-container">
[ngg src="galleries" ids="8" display="basic_thumbnail"]
</section>
<section id="gallery-container-health" class="gallery-container">
[ngg src="galleries" ids="9" display="basic_thumbnail"]
</section>
<section id="gallery-container-programs" class="gallery-container">
[ngg src="galleries" ids="10" display="basic_thumbnail"]
</section>
<section id="gallery-container-sports" class="gallery-container">
[ngg src="galleries" ids="11" display="basic_thumbnail"]
</section>
<section id="gallery-container-training" class="gallery-container">
[ngg src="galleries" ids="13" display="basic_thumbnail"]
</section>
<section id="gallery-container-other" class="gallery-container">
[ngg src="galleries" ids="12" display="basic_thumbnail"]
</section>
</div>
<script>
var menuItems = document.querySelectorAll('.menu li');
var galleryContainers = document.querySelectorAll('.gallery-container');
var galleryMenu = document.querySelector('.gallery-menu');
for (var i = 0; i < menuItems.length; i++) {
menuItems[i].addEventListener('click', function() {
var galleryName = this.getAttribute('data-gallery');
var activeGalleryContainer = document.getElementById('gallery-container-' + galleryName);
for (var j = 0; j < galleryContainers.length; j++) {
galleryContainers[j].classList.remove('active');
}
activeGalleryContainer.classList.add('active');
for (var k = 0; k < menuItems.length; k++) {
menuItems[k].classList.remove('active');
}
this.classList.add('active');
galleryMenu.classList.add('hide-featured-image');
});
}
</script>
Gallery
