Navigation Content

Navigation

Most pages on Writing.Com don't need anything more than standard links, like {item:2301571}. However, pages with multiple long sections, like this one, can benefit from more a more graphical navigation layout. An informational page, like this one, often discusses several distinct aspects of a topic. Those discussions are like chapters in a small book. It's helpful for readers to be able negotiate the various pages. Navigation provides wayfinding tools for a site of this type. Contest pages, which can have distinct sections on prompts, rules, and prizes, are another kind of page where wayfinding can be important for users.

One feature of navigational tools is that they should persist across the content, so that users can find their way back to where they started. Dropnotes persist because we never really leave the page. We just expand some content. Closing a dropnote takes you back to where you started.

There is one problem with dropnotes. Remember, we said that you couldn't put a dropnote inside another dropnote? Yet it looks like we've done exactly that, and more than once. This page, for example, opens as a dropnote you click on the "navigation button," i.e. on the image {image:2301288} The code, which also reduces the image to half-size, is

{dropnote:"{image:2301288-50%}"} {/hide}

So, what gives? There's a dropnote on this page right below here. How'd we do that?

Well, of course there's a trick.

Here's the trick, ▼

Actually, since we do this trick more than once, it's a technique.

Anyway, there's another WritingML bit that solves the problem. Its the insert tag. The context is

{insert:#######}

where ####### is the number of a static item. This only works with static items and webpages on Writing.Com. It does not work with other item types.

We've repeatedly used the insert tag on this page. We've used it precisely six times, to be exact. Each of the six little articles under the major headings are stored in separate static items. The main page has no content. It just has inserts to the desired static item. For example, this page is "Navigation Content" , inserted right after the {dropnote} tag and right before the corresponding {/dropnote}..

This is a good idea to use whenever you have a collection of articles. For this page, we've created a "design" folder in our portfolio, and put a separate "content" folder inside of it. All of the little articles are stored there as static items. The main page, the one your looking at, has no content. It just has the dropnotes for the images and insert commands. Here's what the main page looks like:
                                                           

{center}{image:2301290} {/center}


{center}
{dropnote:"{image:2301286-50%}"} {hide} ###CONTENT### {/hide}
{left}{insert:2301294}{/left}

{/dropnote}{dropnote:"{image:2301287-50%}"} {hide} ###LAYOUT### {/hide}
{left}{insert:2301393}{/left}

{/dropnote}{dropnote:"{image:2301288-50%}"} {hide} ###NAVIGATION### {/hide}
{left}{insert:2301571}{/left}

{/dropnote}

{dropnote:"{image:2301285-50%}"} {hide} ###PALETTE### {/hide}

{left}{insert:2301496}{/left}

{/dropnote}{dropnote:"{image:2301289-50%}"} {hide} ###Simplicity### {/hide}
{left}{insert:2301578}{/left}

{/dropnote}{dropnote:"{image:2301292-50%}"} {hide} ###EXAMPLES### {/hide}
{left}{insert:2301313}{/left}
{/dropnote}
{/center}

                                                           

There are no nested dropnotes because the system processes the insert file, including the dropnotes, before it places the content. The main page doesn't "know" about the dropnotes in the content pages. Magic, no?

Note that we have centered the menu items by surrounding them all with a {center} and {/center} tag. This means that all of the intervening text will be centered, even the text in the inserted files. To avoid this, we have surrounded each {insert:########} tag with {left} and {/left} tags. This aligns the inserted content for each menu item on the left.

It's also good practice any time a site contains several long articles to split things up like this, using insert tags to place your static items inside the main container page.

How is this different from navigation on websites? ▼

That's a good question. After all, the resulting page is on a website, Writing.Com, which already has a full set of navigational tools. The problem is that theese don't point to your pages.

You have at least two ways to point people to your items. One is a text link, like {item:2301281}, which gives the link: "Ideas on Page Design" .

Another way is that you can set up your an image so that when someone clicks on it, it opens a new page on the iitem you name. For example, this image takes you to our contest when you click on it (but don't click on it here):

Okay, you clicked on it, didn't you? At least you found your way back. Clicking on it opened a new page and left this one open. That's not a good thing for a navigation tool. If we'd used this linking feature of images for menus, users would quickly wind up with dozens of pages open, one for each time they clicked on a menu item. That would be so annoying no one would likely ever come back.

Another way would be to surround images with {x-link} and {/x-link} code like so:

{x-link:https://www.writing.com/main/view_item/item_id/2301281}{image:2301536}{/xlink},

Which gives (don't click on this one etiher):

 

You clicked again, didn't you? At least this time it opened this page, but, this time it replaced the window we were in. We'd lose our place if we used this technique. (There's a way around this, but it involves doubling the number of buttons *and* doubling the number container files--a real mess to maintain.)

Having menus that look like a "normal" webpage might be nice, but it's not obvious how you would efficiently do it without creating an actual web page hosted by Writing.Com. But if you want to put navigational tools on a normal item on Writing.Com, using dropnotes are the way to go.