I'm trying to build my archive page to have a row of years and a row of months. The user would then have to select a year and then select a month and a gallery of posts would be generated. I have an example image below of what I want. How could I achieve this?
I've searched online and I can't find anything similar to this. I have added a mockup html and css of how it should look, but I just can't figure out how to get it to work. Any help would be appreciated! I have a code pen of the html and css here http://codepen.io/anon/pen/egpZqr
my current page-archive.php
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<?php
get_header(); ?>
<div class="page-header">
<h1>ARCHIVE</h1>
</div>
<div class="archive-block">
<span class="archive-block__alert">
Please Select A Year First </span>
<ul class="archive-block__list archive-block__list--year">
<li class="archive-block__item ">
<span class="archive-block__selector archive-block__selector--year " data-year="2009">
2009 </span>
</li>
<li class="archive-block__item ">
<span class="archive-block__selector archive-block__selector--year " data-year="2010">
2010 </span>
</li>
<li class="archive-block__item ">
<span class="archive-block__selector archive-block__selector--year " data-year="2011">
2011 </span>
</li>
<li class="archive-block__item ">
<span class="archive-block__selector archive-block__selector--year " data-year="2012">
2012 </span>
</li>
<li class="archive-block__item ">
<span class="archive-block__selector archive-block__selector--year " data-year="2013">
2013 </span>
</li>
<li class="archive-block__item ">
<span class="archive-block__selector archive-block__selector--year " data-year="2014">
2014 </span>
</li>
<li class="archive-block__item ">
<span class="archive-block__selector archive-block__selector--year " data-year="2015">
2015 </span>
</li>
<li class="archive-block__item ">
<span class="archive-block__selector archive-block__selector--year " data-year="2016">
2016 </span>
</li>
<li class="archive-block__item ">
<span class="archive-block__selector archive-block__selector--year archive-block__selector--current-year" data-year="2017">
2017 </span>
</li>
</ul>
<ul class="archive-block__list archive-block__list--month">
<!-- printf('<option value="%u">%s</option>', $num, $name); -->
<li class="archive-block__item">
<span class="archive-block__selector archive-block__selector--month archive-block__selector--current-month" data-month="1">
Jan </span>
</li>
<!-- printf('<option value="%u">%s</option>', $num, $name); -->
<li class="archive-block__item">
<span class="archive-block__selector archive-block__selector--month " data-month="2">
Feb </span>
</li>
<!-- printf('<option value="%u">%s</option>', $num, $name); -->
<li class="archive-block__item">
<span class="archive-block__selector archive-block__selector--month " data-month="3">
Mar </span>
</li>
<!-- printf('<option value="%u">%s</option>', $num, $name); -->
<li class="archive-block__item">
<span class="archive-block__selector archive-block__selector--month " data-month="4">
Apr </span>
</li>
<!-- printf('<option value="%u">%s</option>', $num, $name); -->
<li class="archive-block__item">
<span class="archive-block__selector archive-block__selector--month " data-month="5">
May </span>
</li>
<!-- printf('<option value="%u">%s</option>', $num, $name); -->
<li class="archive-block__item">
<span class="archive-block__selector archive-block__selector--month " data-month="6">
Jun </span>
</li>
<!-- printf('<option value="%u">%s</option>', $num, $name); -->
<li class="archive-block__item">
<span class="archive-block__selector archive-block__selector--month " data-month="7">
Jul </span>
</li>
<!-- printf('<option value="%u">%s</option>', $num, $name); -->
<li class="archive-block__item">
<span class="archive-block__selector archive-block__selector--month " data-month="8">
Aug </span>
</li>
<!-- printf('<option value="%u">%s</option>', $num, $name); -->
<li class="archive-block__item">
<span class="archive-block__selector archive-block__selector--month " data-month="9">
Sep </span>
</li>
<!-- printf('<option value="%u">%s</option>', $num, $name); -->
<li class="archive-block__item">
<span class="archive-block__selector archive-block__selector--month " data-month="10">
Oct </span>
</li>
<!-- printf('<option value="%u">%s</option>', $num, $name); -->
<li class="archive-block__item">
<span class="archive-block__selector archive-block__selector--month " data-month="11">
Nov </span>
</li>
<!-- printf('<option value="%u">%s</option>', $num, $name); -->
<li class="archive-block__item">
<span class="archive-block__selector archive-block__selector--month " data-month="12">
Dec </span>
</li>
</ul>
</div>
<div class="archive-block__empty-con">
<span class="archive-block__empty">
That combination is empty! Please select a different combination </span>
</div>
<?php get_footer(); ?>
<!-- end snippet -->
and css
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.archive-block {
float: none !important;
margin: 0;
width: 100%;
max-width: 930px;
margin: 0 auto;
text-align: center;
}
.archive-block__alert {
display: none;
}
.archive-block__list {
padding-bottom: 15px;
padding-top: 15px;
display: block;
margin: 0;
}
.archive-block__list--month {
border-top: 1px solid #000000;
}
.archive-block__empty-con {
text-align: center;
}
.archive-block__item {
list-style: none;
display: inline-block;
vertical-align: top;
padding: 0 23.5px;
}
<!-- end snippet -->