0
我正在嘗試構建我的歸檔頁面，使其具有一排年和一排月份。然後，用戶將不得不選擇一年，然後選擇一個月並生成一個帖子庫。我在下面有一個我想要的示例圖片。我怎麼能做到這一點？我在網上搜索，我找不到類似的東西。我已經添加了一個模型HTML和CSS應該看起來如何，但我無法弄清楚如何讓它工作。任何幫助，將不勝感激！我有HTML和CSS這裏http://codepen.io/anon/pen/egpZqr通過選擇年份然後選擇月份來顯示歸檔文件
我想要什麼的代碼筆... 
我目前的頁面archive.php
<?php
get_header(); ?>
<div class="page-header">
<h1>ARCHIVE</h1>
</div>
<div class="archive-block">
\t <span class="archive-block__alert">
\t \t Please Select A Year First \t </span>
\t <ul class="archive-block__list archive-block__list--year">
\t \t \t \t \t <li class="archive-block__item ">
\t \t \t \t <span class="archive-block__selector archive-block__selector--year " data-year="2009">
\t \t \t \t \t 2009 \t \t \t \t </span>
\t \t \t </li>
\t \t \t \t \t <li class="archive-block__item ">
\t \t \t \t <span class="archive-block__selector archive-block__selector--year " data-year="2010">
\t \t \t \t \t 2010 \t \t \t \t </span>
\t \t \t </li>
\t \t \t \t \t <li class="archive-block__item ">
\t \t \t \t <span class="archive-block__selector archive-block__selector--year " data-year="2011">
\t \t \t \t \t 2011 \t \t \t \t </span>
\t \t \t </li>
\t \t \t \t \t <li class="archive-block__item ">
\t \t \t \t <span class="archive-block__selector archive-block__selector--year " data-year="2012">
\t \t \t \t \t 2012 \t \t \t \t </span>
\t \t \t </li>
\t \t \t \t \t <li class="archive-block__item ">
\t \t \t \t <span class="archive-block__selector archive-block__selector--year " data-year="2013">
\t \t \t \t \t 2013 \t \t \t \t </span>
\t \t \t </li>
\t \t \t \t \t <li class="archive-block__item ">
\t \t \t \t <span class="archive-block__selector archive-block__selector--year " data-year="2014">
\t \t \t \t \t 2014 \t \t \t \t </span>
\t \t \t </li>
\t \t \t \t \t <li class="archive-block__item ">
\t \t \t \t <span class="archive-block__selector archive-block__selector--year " data-year="2015">
\t \t \t \t \t 2015 \t \t \t \t </span>
\t \t \t </li>
\t \t \t \t \t <li class="archive-block__item ">
\t \t \t \t <span class="archive-block__selector archive-block__selector--year " data-year="2016">
\t \t \t \t \t 2016 \t \t \t \t </span>
\t \t \t </li>
\t \t \t \t \t <li class="archive-block__item ">
\t \t \t \t <span class="archive-block__selector archive-block__selector--year archive-block__selector--current-year" data-year="2017">
\t \t \t \t \t 2017 \t \t \t \t </span>
\t \t \t </li>
\t \t
\t </ul>
\t <ul class="archive-block__list archive-block__list--month">
\t \t \t <!-- printf('<option value="%u">%s</option>', $num, $name); -->
\t <li class="archive-block__item">
\t \t <span class="archive-block__selector archive-block__selector--month archive-block__selector--current-month" data-month="1">
\t \t \t Jan \t \t </span>
\t </li>
\t \t \t <!-- printf('<option value="%u">%s</option>', $num, $name); -->
\t <li class="archive-block__item">
\t \t <span class="archive-block__selector archive-block__selector--month " data-month="2">
\t \t \t Feb \t \t </span>
\t </li>
\t \t \t <!-- printf('<option value="%u">%s</option>', $num, $name); -->
\t <li class="archive-block__item">
\t \t <span class="archive-block__selector archive-block__selector--month " data-month="3">
\t \t \t Mar \t \t </span>
\t </li>
\t \t \t <!-- printf('<option value="%u">%s</option>', $num, $name); -->
\t <li class="archive-block__item">
\t \t <span class="archive-block__selector archive-block__selector--month " data-month="4">
\t \t \t Apr \t \t </span>
\t </li>
\t \t \t <!-- printf('<option value="%u">%s</option>', $num, $name); -->
\t <li class="archive-block__item">
\t \t <span class="archive-block__selector archive-block__selector--month " data-month="5">
\t \t \t May \t \t </span>
\t </li>
\t \t \t <!-- printf('<option value="%u">%s</option>', $num, $name); -->
\t <li class="archive-block__item">
\t \t <span class="archive-block__selector archive-block__selector--month " data-month="6">
\t \t \t Jun \t \t </span>
\t </li>
\t \t \t <!-- printf('<option value="%u">%s</option>', $num, $name); -->
\t <li class="archive-block__item">
\t \t <span class="archive-block__selector archive-block__selector--month " data-month="7">
\t \t \t Jul \t \t </span>
\t </li>
\t \t \t <!-- printf('<option value="%u">%s</option>', $num, $name); -->
\t <li class="archive-block__item">
\t \t <span class="archive-block__selector archive-block__selector--month " data-month="8">
\t \t \t Aug \t \t </span>
\t </li>
\t \t \t <!-- printf('<option value="%u">%s</option>', $num, $name); -->
\t <li class="archive-block__item">
\t \t <span class="archive-block__selector archive-block__selector--month " data-month="9">
\t \t \t Sep \t \t </span>
\t </li>
\t \t \t <!-- printf('<option value="%u">%s</option>', $num, $name); -->
\t <li class="archive-block__item">
\t \t <span class="archive-block__selector archive-block__selector--month " data-month="10">
\t \t \t Oct \t \t </span>
\t </li>
\t \t \t <!-- printf('<option value="%u">%s</option>', $num, $name); -->
\t <li class="archive-block__item">
\t \t <span class="archive-block__selector archive-block__selector--month " data-month="11">
\t \t \t Nov \t \t </span>
\t </li>
\t \t \t <!-- printf('<option value="%u">%s</option>', $num, $name); -->
\t <li class="archive-block__item">
\t \t <span class="archive-block__selector archive-block__selector--month " data-month="12">
\t \t \t Dec \t \t </span>
\t </li>
\t \t \t </ul>
</div>
<div class="archive-block__empty-con">
\t <span class="archive-block__empty">
\t \t That combination is empty! Please select a different combination \t </span>
</div>
<?php get_footer(); ?>和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;
}