Turn Page List into full-blown menu.

This may come in handy:

One of the easiest way of building a menu on Your site is through a gadget called "Page List". It's referring to so called "pages" - separate sections which You can create on Your site, usually serving as a contact page, about the author/site page, etc.

By default Page List will contain links to all existing "pages" - a great advantage is that every time You create a new page, menu will be updated automatically. Besides it will mark out an active item, so that Your Visitors will always know which section they are viewing.

Page List gadget has yet another nice feature called "Add external link": with the help of this one You could place links to other things than pages of Your site. It is especially helpful if You'd like to distinguish some particular posts/articles by placing them directly on the menu.

Pages or external links?
At first glance pages seem to be quite useful: they separate content like "contact", "about (the site, the author...)", etc. - from all the rest (actual posts). But if You are a very happy user of Open Live Writer (a program with the help of which You can drive Your blog surprisingly easily, being completely independent of the admin panel) - using pages won't be a good idea because OLW can't edit them (yet?). I personally love how much time Open Live Writer saves Me - so to give up pages wasn't a big deal. You can create dedicated "section posts" which will serve as pages. Then You can separate them from all the rest by setting properly old date (so they will be placed on the very end of the posts list in the dashboard). This way You will be able to manage all content of Your site through this excellent OLW invention :) .

Back to the Page List gadget: there is some disadvantage to it: in case of external links targeting posts Blogger won't mark them out while they are displayed.

But there is more to it. The point is we could usually group our articles into several kinds, subject-wise. Then it could be great to have corresponding bookmarks in the menu as well, like - for example - one bookmark leads to all culinary recipes, another to all travel posts, and so on. Besides it could be perfect if a visitor could be always in know which kind of content (part of Your site) he or she is viewing. In order to achieve this, active sections' indicating should take place while browsing both single posts and posts' listing by labels.

So, to sum it up, You can improve Page List gadget so that it could work as a "full-blown" menu, containing not only links leading to "pages", but also to all sections (subject-wise) of Your site and "bonus posts" You find worth standing out.

How to distinguish particular posts in the menu?

1. Enter the dashboard, then "Posts" section.
2. Find a post You'd like to place in the menu - hover over its title and click (with right mouse button) "View" - then choose an option of copying the link address to the clipboard.
3. Enter the "Layout" section.
4. Find a "Page List" gadget, click "Edit" link attached to it.
5. Click "+ Add external link".
6. Fill "Page title" field with a bookmark's name - and paste the address You've copied into the "Web address (URL)" field.
7. Confirm via clicking "Save Link".
8. Optionally adjust the proper position of newly created bookmark by drag'n'drop.
9. One more time confirm by clicking "Save".

How to create a bookmark leading to a particular kind of posts (subject-wise)?

1. First You need to obtain a proper link (leading to a particular kind of posts). You can do it by right-clicking a label (representing the subject You'd like to include in the menu) - within tag/label cloud or within single post's label listing. Choose an option of copying the link address to the clipboard.
2. Enter the dashboard and follow the previous instruction from the step 3 forward.

How to make active sections always marked out?

You can easily achieve that using jQuery which can detect which section is viewed now. There are two cases worth considering:

1. Detection based on post's labels.
2. Detection based on label/tag cloud.

In the first case jQuery will mark out active sections in the menu - based on tags attached to the post which is now displayed. So in order for this solution to work right You need to properly label all Your posts first. If You've done it - take a look on following code snippet:

if ($('.post-outer .post-labels a:contains("label name")').length > 0) {
$('#PageList1 li:contains("keyword")').addClass("selected")
}

It works like this:

if a currently displayed post is labeled by label name
then mark out this keyword on the menu.

Note that You can mark out any keyword - it doesn't have to be the same as a label name.

In the second case jQuery will mark out proper items in the menu - based on tag/label cloud (Labels gadget). Keeping posts listing (by label) in mind You will also need this way of detecting active sections (because it's also a good opportunity to let Your Guests know posts under which label They are currently browsing). Here is the code:

if ($("#Label1 span.label-size:contains('a keyword')").not(":has(a)").length > 0) {
$('#PageList1 li:contains("keyword")').addClass("selected")
}

It works like this:

if tag/label cloud contains 'a keyword' without a link attached
then mark out this 'keyword' on the menu.

The reason it works is that label/tag cloud (Labels gadget) in Blogger distinguishes active label by removing link from it - so it's not clickable, and it could be easy to tell which label is active inside the cloud.

««•»»

At the end You could decide how the marked out item should look like - by defining a #PageList1 li.selected class in CSS.