We set about building the bar below the gallery header. This bar has quite a job. It tells people where they are and what they are viewing (breadcrumbs, in a simple way). It also will contain pagination, a button, and all the while needs to be responsive.

This is start of what we refer to as "black bar" navigation which really becomes a thing for the rest of the sites design.

We write the markup for the bar, including using our icon font when needed for the down arrow in the dropdown menu. It's easy to quickly reference the character chart in Font Explorer X to get what value the HTML icon can be.

We use the wp_tag_cloud() function to spit out onto the page a list of tags from our custom taxonomy for the gallery. We simply style up the markup to behave like a dropdown menu. We write just a touch of JavaScript to show/hide this dropdown menu. Like we've done in the past with the site's main navigation, all we do is change a class name with the JavaScript and let the CSS do the work.

By the end we have a working dropdown menu for the Gallery, which is nice. It's really the workhorse of Gallery navigation.

Comments

  1. User Avatar
    Josh Eaton
    Permalink to comment#

    I was going to ask how you eventually go about changing your compiled JavaScript files back to a normal name without the -ck.js prefix.

    Then I saw you keep it like that on the live site.

    Then I realized that I’m probably way too OCD about things like that. :)

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag