title: How to Create a Drop Down List for Filtered Items
body: <p>So, I'm kind of new to this, so i'm hoping I provide enough information for you.</p>
  
  <p>Currently, on this page <a href="http://klarolinefanficdirectory.tumblr.com/categories-2" rel="nofollow">http://klarolinefanficdirectory.tumblr.com/categories-2</a> (working example: <a href="http://romanoffsbite.tumblr.com/fanfic-recs" rel="nofollow">http://romanoffsbite.tumblr.com/fanfic-recs</a>) you can see a ton of filters/categories at the top (there are even more that haven't been added yet). Obviously, when you click on one of them, then the blocks of content are filter to display just that category.</p>
  
  <p>What I would like to do is, instead of having all categories just listed, to have a drop down list right above the content area that would then include all of the necessary "categories" that individuals can select from.</p>
  
  <p>Is this possible to do? I've searched and searched and googled and googled and I just can't seem to find anything that is related to the 2 aspects I would like to accomplish.</p>
  
  <p>Here is the code for the "Filter Links"</p>
  
  <pre><code>&lt;!-- FILTER LINKS --&gt;
  
  &lt;center&gt;&lt;div class="top2"&gt;
      &lt;div id="sort"&gt;
  &lt;ul id="filters" class="option-set clearfix" data-option-key="filter"&gt;
  
  &lt;!-- CHOOSE A FILTER NAME FOR EACH TYPE OF EVENT. DONT TOUCH THE FIRST LINK .story THIS IS YOUR MAIN FILTER FOR EVERY EVENT. CHANGE THE NAME OF YOUR FILTER: EX .smt or .festival --&gt;
  &lt;a href="#filter" data-option-filter=".story"&gt;All&lt;/a&gt;
  &lt;a href="#filter" data-option-filter=".10cent"&gt;10th Century&lt;/a&gt;
  &lt;a href="#filter" data-option-filter=".1920s"&gt;1920s&lt;/a&gt;
  &lt;a href="#filter" data-option-filter=".ah"&gt;All Human&lt;/a&gt;
  &lt;a href="#filter" data-option-filter=".alternate"&gt;Alternate Dimension&lt;/a&gt;
  &lt;a href="#filter" data-option-filter=".amnesia"&gt;Amnesia&lt;/a&gt;
  </code></pre>
  
  <p>Here is the code for the drop down list styling I was looking to use:</p>
  
  <pre><code>&lt;select style="width: 150px; border: 0px solid; padding: 3px; color: #000; background-color: #f1f1f1;  font-family: calibri; text-transform: uppercase; font-size: 8px; letter-spacing: 1px;" onChange="location.href=this.options[this.selectedIndex].value;"&gt;
  &lt;option value="/"&gt;CATEGORY&lt;/option&gt;
  &lt;option value="URL GOES HERE"&gt;NAME GOES HERE&lt;/option&gt;
  &lt;option value="URL GOES HERE"&gt;NAME GOES HERE&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>Here is the code for the <code>&lt;body&gt;</code> section of the page, if this helps at all...</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
  
      &lt;!-----------
  
  EVENT PAGE by clumhood
  
  :&gt; ------------&gt;
  
      &lt;title&gt;FANFIC RECS&lt;/title&gt;
          &lt;link rel="shortcut icon" href="{Favicon}"&gt;
          &lt;link rel="alternate" type="application/rss+xml" href="{RSS}"&gt;
          &lt;link rel="apple-touch-icon" href="{PortraitURL-128}"/&gt;
  
          &lt;link href='http://fonts.googleapis.com/css?family=Roboto:700,400' rel='stylesheet' type='text/css'&gt;
  
          &lt;link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"&gt;
  
          &lt;script type="text/javascript"&gt;
    WebFontConfig = {
      google: { families: [ 'Roboto:700,400:latin' ] }
    };
    (function() {
      var wf = document.createElement('script');
      wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
        '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
      wf.type = 'text/javascript';
      wf.async = 'true';
      var s = document.getElementsByTagName('script')[0];
      s.parentNode.insertBefore(wf, s);
    })(); &lt;/script&gt;
  
    &lt;!------- filter scripts --------&gt;
   &lt;script src="http://static.tumblr.com/fuu6t9w/kh8ml0pl9/jquery-1.7.1.min.js"&gt;&lt;/script&gt;
   &lt;script src="http://static.tumblr.com/fuu6t9w/eubml0pm0/jquery.isotope.min.js"&gt;&lt;/script&gt;
   &lt;script&gt;
   $(function(){
  
   &lt;!------- filter scripts --------&gt;
   &lt;script src="http://static.tumblr.com/fuu6t9w/kh8ml0pl9/jquery-1.7.1.min.js"&gt;&lt;/script&gt;
   &lt;script src="http://static.tumblr.com/fuu6t9w/eubml0pm0/jquery.isotope.min.js"&gt;&lt;/script&gt;
   &lt;script&gt;
   $(function(){
  
   var $container = $('#container');
  
   $container.isotope({
   itemSelector : '.story'
   });
  
  
   var $optionSets = $('#sort .option-set'),
   $optionLinks = $optionSets.find('a');
  
   $optionLinks.click(function(){
   var $this = $(this);
   // don't proceed if already selected
   if ( $this.hasClass('selected') ) {
   return false;
   }
   var $optionSet = $this.parents('.option-set');
   $optionSet.find('.selected').removeClass('selected');
   $this.addClass('selected');
  
   // make option object dynamically, i.e. { filter: '.my-filter-class' }
   var options = {},
   key = $optionSet.attr('data-option-key'),
   value = $this.attr('data-option-filter');
   // parse 'false' as false boolean
   value = value === 'false' ? false : value;
   options[ key ] = value;
   if ( key === 'layoutMode' &amp;&amp; typeof changeLayoutMode === 'function' ) {
   // changes in layout modes need extra logic
   changeLayoutMode( $this, options )
   } else {
   // otherwise, apply new options
   $container.isotope( options );
   }
  
   return false;
   });
  
  
   });
   &lt;/script&gt;
  
   &lt;!-----end filter scripts------&gt;
  
   &lt;!-----end filter scripts------&gt;
  
          &lt;style type="text/css"&gt;
  
  body {
      font-family:arial;
      font-size:12px;
      background:#f8f8f8; /**this is the color of the bg.*/
  
  }
  
  a {
      color:#008997; /**this is the color of the links.*/
      text-decoration:none;
  }
  
  ::-webkit-scrollbar {
  background-color: white;
  height:8px;
  width:5px
  }
  
  ::-webkit-scrollbar-thumb:vertical {
  background-color:#f8f8f8;
  height:50px
  }
  
  ::-webkit-scrollbar-thumb:horizontal {
  background-color:#505050;
  height:8px!important
  }
  
  
  .top {
      text-align:left;
      padding-bottom:0px;
      margin-bottom:10px;
      margin-top:-9px;
      margin-left:-7px;
  }
  
  
  .top2 {
      width:1080px;
      background:white; /**this is the color of the filter titles topbar background.*/
      text-align:left;
      padding-bottom:0px;
      margin-bottom:10px;
      margin-top:10px;
      margin-left:-7px;
      line-height:20px;
  
  }
  
  #sort {
      padding:10px;
      text-align:center;
      font-family:'roboto', sans-serif;
      font-size:10px;
      text-transform:uppercase;
  }
  
  #sort a {
      margin-left:20px;
  }
  
  #sort a:hover {
      color:#bb2576; /**this is the color of the filter links when you hover over them.*/
  }
  
  .title {
      float:left;
      padding:15px;
      padding-top:20px;
      font-family:'roboto', sans-serif;
      font-size:12px;
      color:#bb2576;
      font-weight:normal;
  }
  
  .links {
      width:1100px;
      text-align:center;
      padding:30px;
  
  
  }
  
  .links a {
      font-family:'roboto', sans-serif;
      font-size:11px;
      text-transform:uppercase;
      padding:30px;
      margin-left:-3px;
  
  
  }
  
  .links a:hover {
      color:#b60079; /**this is the color of the links when you hover over them.*/
  
  }
  
  .links a:last-child {
  }
  
  
  #container {
      width:1080px;
      margin-top:10px;
  }
  
  #content {
      margin:10px;
      overflow:hidden;
      width:250px;
      height:250px;
      float:center;
      box-shadow:0px 3px 10px rgba(0,0,0,.15);
      text-align:left;
      line-height:150%;
      background:white; /**this is the color of the background of each event.*/
      transition-duration:1s;
      -moz-transition-duration:1s;
      -webkit-transition-duration:1s;
      -o-transition-duration:1s;
  }
  
  
  
  .desc {
      padding:10px;
      margin-top:10px;
      font-size:11px;
  }
  
  
  #content2 {
      margin:10px;
      overflow:hidden;
      width:250px;
      height:250px;
      float:left;
      box-shadow:0px 3px 10px rgba(0,0,0,.15);
      text-align:left;
      line-height:150%;
      background:#ffffff; /**this is the color of the background of each past event.*/
      transition-duration:1s;
      -moz-transition-duration:1s;
      -webkit-transition-duration:1s;
      -o-transition-duration:1s;
  }
  
          &lt;/style&gt;
          &lt;/head&gt;
  
      &lt;body&gt;
  </code></pre>
  
  <p>So, really, any assistance at all would be amazing! I'm trying to help someone out with their resource blog and I want it to be easy to navigate :)</p>