How to create a secondary menu to filter entries?
Ok so if you are showing all of the entries by default, lets say you have 10 entires in your "work" section.

I am assuming that you have a category group(s) that each entry belongs to.
From there I would assign the category in a data attribute. This would give you a hook that you could talk to for filtering.

twig

{# Get all entries within the work section #}
{% set entries = craft.entries.section('work').find() %}

{% if entries|length %}
&lt;ul id="myNav"&gt;
    {% for entry in entries %}
        &lt;li data-category="{{ entry.category }}&gt;&lt;a href={{ entry.url }}"&gt;{{ entry.title }}&lt;/a&gt;&lt;/li&gt;
    {% endfor %}
&lt;/ul&gt;
{% endif %}

{# data-category="{{ entry.category }}" could be data-category="my-category" #}


Then I would have a drop-down, or a set of links that represented each of my categories.

twig

{# Get all categories within the work category group #}
{% set category = craft.categories.group('work') %}

&lt;select id="workFilter" name="workFilter"&gt;
    &lt;option value=""&gt;Select Location&lt;/option&gt;
    {% for cat in category %}
        &lt;option value="{{ cat.slug }}"&gt;{{ cat.title }}&lt;/option&gt;
    {% endfor %}
&lt;/select&gt;


On the javascript side, you could either listen for a click - and hide whatever nav items did not have the same data-category value.

For example: 

html

&lt;a href="javascript:void(0);" data-target="my-category" class="nav-filter"&gt;


Use a click event to check the data value, and hide whatever nav elements did not have "my-category" as the data-category attribute.

Or, a drop-down like above.

jquery

$('#workFilter').change(function (event) {
    // get the value of the drop-down. Hide all list items that do not have the same data-category value.
});


You shouldn't need any ajax or anything like that since all of your entries are already on the page. You just need a hook to show/hide them.

Hope this helps!

EDIT

Sure - give fadeOut a look.

If you are using a button/link you can listen for the click event. Then fadeOut the element. That will fade it out, then set the display to none which should remove the empty gaps for you.

Something like this...

jquery

$('nav-element').click(function(event){
    $('all-things-not-matching).fadeOut('fast', function() {
        // Animation complete.
    });

    event.preventDefault();
});


Each element that is now hidden has the css values of:

opacity: 0;
display: none;