mobile_page_category

<!--カテゴリ表示-->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function() {
  console.log($);
  var categories;
  $.get("/categories").done(
    function(data) {
      categories = $(data).find(".entry-content ul li a");
      console.log(categories);
      categories.each(function() {
        var categoryUrl = $(this).attr("href");
        var categoryText = $(this).text();
        $("<option></option>", {
          "value": categoryUrl,
          "text": categoryText
        }).appendTo(".categories-menu select");
      });
    }
  );
  $(".categories-menu select").change(function() {
    window.location = $(this).find("option:selected").val();
  });
});
</script>

<!-- カテゴリ一覧用のHTML -->
<div class="categories-menu">
<select>
<option value="hide">--Category--</option>
</select>
<i class="fa fa-angle-down" aria-hidden="true"></i>
</div>

<!-- カテゴリ一覧のデザイン -->
<style type="text/css">
.categories-menu {
    position:relative;
    margin:3px;
    overflow: hidden;
    border:1px solid #333;
}
.categories-menu select{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background:none;
    border-radius:0;
    display:block;
    width:150%;
    padding: 0.5em 1em;
    margin:0;
    border:0;
    outline:none;
    font-size:16px;
    line-height:1.5;
}
.categories-menu .fa-angle-down {
    position:absolute;
    top:0;
    right:0;
    display:block;
    padding:0.5em 1em;
    font-size:20px;
    font-weight:bold;
    pointer-events: none;
    border-left: 1px solid #333;
}
</style>

<!-- カテゴリ一覧のデザイン -->
<style type="text/css">
.categories-menu .fa-angle-down {
    background:#3d6fb9; /* 背景色 */
    color:#fff; /* 文字色 */
}
</style>