« MOD: Category Dropdown Box »
5 Categories and Tags are a great way to organize and cross-reference content in a Squarespace Journal Module, however including them in the page layout sometimes just doesn't jive with the look you're trying to achieve -- or sometimes there's just too many to list down the side of the page if you're not a fan of mile-long webpages. A great solution is to put the categories, tags, entry titles, or even the archive date groups (ie: entries by month) in a dropdown box.
STEP 1: Create a Reference List -- Create a new sidebar section and add a Journal Index Widget to it -- select the journal you want to use, and check off the type of items you want listed in your dropdown box.
STEP 2: Create the Dropdown Box --Create another new sidebar section and place a Text/Html Widget in it, and enter in the following in Html Mode:
<form id="dropdownBox" action="../">
<select name="dropdownList" onchange="window.open(this.options[this.selectedIndex].value,'_top')">
<option selected>Search »</option>
</select>
</form>
STEP 3: Populate Your Dropdown Box From the Reference List -- Add the following script to the <head> code injection point (making sure to have proper jQuery reference and script enclosing tags, read jQuery Setup Basics for more info):
var dropdownBox = $("#dropdownBox select");
$("#sectionContent1234567 .archive-item-list-pt li a").each(function(){
var listOptionUrl = $(this).attr('href');
var listOptionTxt = $(this).text();
dropdownBox.append($("<option />").val(listOptionUrl).text(listOptionTxt));
});
$("#sectionContent1234567").remove();
*** Make sure to replace the sectionContent # with the unique number for the sidebar section that has your journal category/archive list in it -- the script will take the items from this list as reference and then copy them into the dropdown box in the proper format, then it will remove the original sidebar section with the reference list in it.
STEP 4: Hide the Reference List -- I also found it helpful to add the following into my custom css panel to make sure that the reference list did not pop into view on the page before it gets removed by the script:
#sectionContent1234567 { display: none; }
See it in action -- on this blog, to the right is a drop down box that lists all the entry titles. If you click on a main category (news, musings, mods, etc) then you will get an additional dropdown box that separates that category of entries by tags.
Also see it in action on the website Vuela developed for the Lacey Chamber of Commerce. This dropdown is used to list tags, the tags sort the entries in their business directory by type.
Good Luck! 
Reader Comments (5)
Cool tip!
Thanks! Send me a link if you use it -- I'd love to see!
Hi. I think its a great trick, but i can't get it to work. I know nothing about programming, but I need this feature on my site..(which i'm now trying to put together. )
Is there an additional jQuery step that I have to take, or is the "populate dropbox' section just cut and paste. Please help :(
note: I changed the #sectionContent to my own #
Hi Terry! In a general sense, yes the Html and jQuery snippets I provided for the dropdownbox should work to just paste in, and then change your unique sectionID number. However, the jQuery that you add to the <head> code injection point to get the dropdown to populate with the items from the reference list you made in step 1, needs to be "wrapped" by the proper information in order for it to work. The code above is the jQuery needed for this single function, it does not include the instructions for how to setup the jQuery, if you have not already, please read through this post to understand how the basic jQuery setup works.
If you already read through that post and think things are setup correctly, post the link to your site so I can look to see what is casing the problem.
Hi there. I am trying to implement the dropdown feature you did a tutorial on. I am having some problems. I followed your tute step by step (I think) but still not seeing the content in the dropdown.
here's what I have in the head code injection: The dropdown item appears on the page fine. If I remove this code from the custom CSS:
#sectionContent2998067 { display: none; } /* hide reference list in sidebar */
I can see the journal index fine, so I know the index is there. But when I look at the page and click on the dropdown, there's no content there. Am I missing something?
Thanks so much for your help.
Mark