Overflow Box Menu

Following my initial comments on MbD’s post “Also for TA: Drop down menu in navigation bar” (comment here) and as an example of an overflow box menu, I’ve created a test menu using our member feeds, sitting right below the “regular” member feeds menu I created yesterday.

This is to show how we could use such a box as a menu (e.g., for members’ “About Me” pages or Halloween Bingo / Festive Tasks master update posts), if we wanted to provide links to those member posts / pages directly from the sidebar (instead of sending site visitors to a separate index page), regardless how many member page links we need to accommodate — AND to the extent we can’t use a drop-down menu: please note MbD’s comments in her original post (bottom line: drop-down menus too far down the sidebar may run into spacing and visibility issues).

I’ve left the pre-formatted “underlined” design of the links forming the menu in place to show that this really is just a simple list of links, stuck inside a box that is smaller than (= not as high as) the height of the actual list (which in turn is what forces the “overflow” mechanism to activate).  Like all other sidebar features, this can be changed.  (Err, at least in theory.  If we can get WP to cooperate.)

The size (height / width) of the box is customizable at will.  On my own blog I typically use heights of 300px or 350px — those would have been too large to show the “overflow” functionality with a list as short as our current number of member feeds, but they might still be the right size(s) for a “Members’ About Me Pages” menu, if we wanted to use an overflow box to link to those.  And as it is only the height of the box itself that we need to worry about in terms of the space this item takes in the sidebar,  there is no limit to the number of lines (links to member pages / master posts) that such a menu can accommodate.

ETA (for MbD):

This is what the overflow menu looks like on my screen.

Maybe it’s dependent on what browsers we use and how they are configured?

Also for TA: Drop down menu in navigation bar.

I created a drop-down menu using css/html, placing it just under the Categories drop down.  Let’s call this a “Proof of Concept”.  It’s currently linking to tag pages.


WP is finicky as hell.  It doesn’t seem to adhere to strict standards, so getting the colors to work to even the point of legibility was a challenge.

I can’t use the typical drop down menu (ie Categories, just above the test) because that uses JavaScript and I have no idea how to implement JS in a WP environment.

That’s also why the menu opens on hover; on click requires JS

The expanded menu – at least in the preview mode – isn’t recognised by the page, so if the menu expands beyond the bottom of the page, it just disappears/isn’t accessible.  This has me concerned about using it for very long lists.

It works though.  🙂

Setup for Regular Blogging AND Reading Games / Group Reads

As I said in my comments earlier, I’ve tweaked the sidebar and categories / projects setup of the blog a bit so as to show how (I think) we might be able to make use of our new group community for regular blogging (à la BookLikes) AND reading games / group reads etc.  Here are the basic new features I added:

1. “Member Feeds” Menu
I’ve added a menu that brings together our individual member feeds, culled from our respective “regular” posts.

(For the time being, it’s located between the “General Site Links” and “Bingo Pages” menus — placing of this, as well as any and all other sidebar items is, of course, subject to discussion / comments / change.)

This menu draws on the member name categories; in that respect, it does the exact same thing as the WP-auto-generated “categories” menu further below.  BUT it ONLY draws on the member name categories, not on any additional categories (e.g., Halloween Bingo).  So this would be the place where we could find every site member’s individual posts, in one feed per member — exactly the way our individual blogs used to work on BookLikes.

Right now, with only a few of us, this menu doesn’t take a lot of space; on the “actual” site, with more members, we’d probably eventually have to either design this as an “overflow” menu in the style of the “Book Reviews / Blog Posts by Author” menu (and corresponding menus for movie and music blog posts / reviews) towards the bottom of the sidebar of my blog … or as a drop-down menu if we can figure out how to code it as such (* whistles innocently and looks at MbD *).

Please note that I’ve left the original (WP / auto-generated) “Categories” menu item in place (though moved a bit further down, between “Recent Comments” and “Archives”), but I’ve turned this item into a drop-down menu using the handy formatting option that WP provides for its auto-generated “Categories” menu.  I’ve done this because we now have two different types of post categories — one to select / cull member post feeds by name, one to select / cull by reading games or similar “special purposes” (e.g., Halloween Bingo, see below) — and the auto-generated “Categories” menu item as provided by WP doesn’t allow for that distinction; we have to make it ourselves (and can easily do so, as hopefully shown in my example).

Also, if members want to create individual “About Me” pages, they can of course do so, too:

(a) Either by using the “page” formatting option; in this instance I suggest creating a separate menu collecting those pages similar to the currently-existing “Bingo Pages” menu.  (Theoretically we could include those pages as separate, possibly nested items in the “Member Feeds” menu, but IMHO that would make it too convoluted.)  Note that every newly-created “About Me” page would have to be added to the menu manually by site admin, as pages are the only type of WP contents format that can’t be categorized or tagged and doesn’t show in any type of feed, so there is no way of summarily capturing all pages of a certain type / contents and then just linking to the place where they are all collected.

(b) Or by formatting members’ “About Me” sections as either a project or a post (for feed culling purposes across the site, it would have to be unanimously one of the two formats; using both would mean we’d necessarily only capture one of the two formats in the “About Me Sections” feed).  We could then cull all of these projects / posts in a separate feed that could be summarily linked from the sidebar menu, the same way our member feeds and the special purpose feeds are (e.g., Halloween Bingo, see below).

2. Halloween Bingo Test Menu
I’ve created a test menu (below the “Bingo Pages” menu) designed to bring together essentially all types of (in this instance) Halloween Bingo-related content.  (Obviously, we could do the same thing for any other type of “special interest” posting — Festive Tasks, group reads, etc.)  This menu consists of three basic types of contents (two of these, with sub-items):

(a) The Halloween Bingo admin posts formatted as projects. and checked off as “Project Type: Halloween Bingo” in the relevant box to the right of the project drafting field.

I’ve created a “Questions?” project post to show what this separate feed would look like; as MbD had already created another “project” and categorized it as “Halloween Bingo” we now actually have a genuine test feed there.

Immediately below this main menu item, as separately-listed sub-items, there are two examples of major admin pages, plus another — individual — link to the new “Questions?” project post, (1) to show how a project can be made visible individually (next to other menus items) as well as in the context of a feed, and (2) because arguably the “Questions?” post should be easily accessible from the sidebar menu in addition to its inclusion in the overall Halloween Bingo admin feed.  Again, note that pages are the only type of WP posting formats that don’t show up in any feed, so these *need* to be included in a sidebar menu if we want to make them visible and easily accessible to everybody.  (I therefore suggest not actually using the word “Feed” in the first line of the “actual” menu on our new permanent site, i.e. the line designing the overall admin section in that menu; I’ve just used it in the test menu to show that this particular menu item draws on the admin “project” posts feed.)

(b) The Halloween Bingo players feed.

These are the game participants’ regular posts, culled from the newly-created “Halloween Bingo” category.

Taking my two test posts — and this present post — as  examples, you will see that you’ll find these three posts both in my “regular” member thread (see “Member Feeds” menu, above) AND in the topical “Halloween Bingo” feed: all I had to do to achieve this was check both my member name and “Halloween Bingo” in the “Categories” box to the right side of the post drafting field.  No duplication of posts or anything else necessary; WP does the sorting for us.

So, if we use the “projects” format (in connection with a “Project Type” named accordingly, e.g., “Halloween Bingo”, “Festive Tasks”, etc.) for admin purposes and just add the relevant topical categories (again, Halloween Bingo, Festive Tasks, etc.) to WP’s “Categories” feature for regular posts, we can have separate feeds for both — PLUS a menu bringing both the admin feed and the players’ regular posts together in the sidebar.

(c) Individual Halloween Bingo pages / master update posts, regardless in which format.

Many of us like to create master update posts / pages for their individual game, and it is easy enough to include those, too, in the sidebar menu for accessibility.  For purposes of creating these types of posts, it doesn’t matter in what format they come (posts / pages / projects).  If they are designed as pages, however, we would have to know their title so as to be able to identify them when creating this menu entry.  (Again, we would have to do this manually if everybody uses the “page” format.)  If we could get players to use a general “Halloween Bingo Master Update Posts” tag, though (or a category — though in this instance, for site organization purposes I’d prefer a tag), we could, again, create a separate feed culling all of these posts into one place and, again, just basically link to that feed in the sidebar menu.

A note on visibility: WP allows sidebar items (menus, etc.) to be restricted in visibility.  Thus, for 10 of the 12 months of the year, the “Halloween Bingo” menu need not appear on the overall sidebar at all (ditto Festive Tasks, etc.) — we would restrict visibility to the associated contents and only restore the menu to “general” visibility while the game is actually being run.

Final note: I’ve taken the liberty of moving the search bar further up in the sidebar menu (below “General Site Links”); it seemed a bit buried, being stuck in the middle.  But as with the placing of all menu items, this is just me — I’ll happily bow to majority preferences if those should be otherwise!