Welcome, Guest. Please Login
Tinderbox
  News:
IMPORTANT MESSAGE! This forum has now been replaced by a new forum at http://forum.eastgate.com and no further posting or member registration is allowed. The forum is still accessible via read-only access for reference purposes. If you wish to discuss content here, please use the new forum. N.B. - posting in the new forum requires a fresh registration in the new forum (sorry - member data can't be ported).
  HomeHelpSearchLogin  
 
Pages: 1
Send Topic Print
HTML navigation menus in Tinderbox (Read 4332 times)
Rónán Kennedy
Full Member
*
Offline



Posts: 26

HTML navigation menus in Tinderbox
Jul 28th, 2010, 3:53am
 
I'm experimenting with Tinderbox as a content management system for a web site. I started with Marisa Antonaya's template, but as that didn't seem to work completely (at least for me!), I used some of the tips in Leslie Michael Orchard's tutorial (http://decafbad.com/2010/06/tinderbox-article-tutorial/article.html) and got it to function after a fashion.

One thing I couldn't figure out was how to do full-blown navigation menus. I want to put the usual menu of navigation options in a column down the left-hand side of the site. I can get a list of the top-level pages with

Code:
 ^siblings^  



but that won't list any pages a level below the top, and if I use it in a second-level page, it won't give a list of top-level pages, leaving the reader marooned.

I think I could put together a menu with a lot of complex conditional includes, but I wonder if there's a simpler way?

Thanks,

Rónán
Back to top
 
 
  IP Logged
Mark Anderson
YaBB Administrator
*
Offline

User - not staff!

Posts: 5689
Southsea, UK
Re: HTML navigation menus in Tinderbox
Reply #1 - Jul 28th, 2010, 4:49am
 
I'm sure it's possible, though if you said 'usual' HTML navigation, my mind goes to a navbar at the top of the page. So those of us helping understand what you're trying to achieve, it would help if you could define more clearly what you want in the sidebar. A list of children? Children + siblings? Or, is it that you want a traditional top navbar as a left-side column. If it's easier, just post a link to a static HTML example.

Meanwhile, have you downloaded the source TBX for aTbRef? Its templates contain a number of mechanisms for hierarchical navigation.

For a template to have sidebar (or top bar) that always contains the same navigation entries regardless of the  page being exported, you need to look at an ^include()^. This mechanism includes the exported HTML of another note - which may be anywhere in the TBX - with the additional option to specify a template other the one set - or inherited by - the included note's $HTMLExportTemplate.

For instance, you might have a note which is a bulleted (* in TB) list of all the notes to be user in the navbar. You might then use different templates with an include to sometimes style the output HTML for a left  nav bar on some pages and top or right on others. If you prefer you can use a template that just exports ^text^ and put the HTML in the nav bar note. In the note each link caption would be a TB link to another TB note. On export, the text becomes the on-screen anchor text for an HTML link to TB-link-to note's HTML page.

One proviso. Don't make nav links - or create HTML-exported links in general - to notes that are exported as includes. This is because an included note may be included in more than one other page in which case to what HTML does TB create a link?

So a TB note 'sidebar' with contents:
Code:
*HOME  (text linked to note 'home')
*BLOG  (text linked to note 'blog')
*ABOUT  (text linked to note 'about') 



...exported using a template 'exp-sidebar' with this code:
Code:
<div id="sidebar">
^text^
</div> 



...will export as:
Code:
<div id="sidebar">
<ul>
<li><a href="[relative path to]/home.html">HOME</a></li>
<li><a href="[relative path to]/blog.html">BLOG</a></li>
<li><a href="[relative path to]/about.html">ABOUT</a></li>
</ul>
</div> 



In your CSS, style id "#sidebar" as appropriate, e.g. perhaps as a left float. If the side bar is used horizontally, use CSS to style the <ul> and <li> accordingly too.

Now, your general page export template uses the sidebar thus:
Code:
<!DOCTYPE .....etc.
<html>
<head>
<title>^title^</title>
</head>
<body>
  <div id="main">
    ^include(sidebar,"exp-sidebar")^
    <div id="content">
    ^text^
   </div>
  </div>
</body>
</html> 


Note the above is pseudocode - you'll need to amend it for your use but I hope it indicates how to go about the task.
Back to top
 
 

--
Mark Anderson
TB user and Wiki Gardener
aTbRef v6
(TB consulting - email me)
WWW shoantel   IP Logged
Rónán Kennedy
Full Member
*
Offline



Posts: 26

Re: HTML navigation menus in Tinderbox
Reply #2 - Aug 8th, 2010, 9:48am
 
Mark

What I want to create is a menu in the left-hand column. I'll have a look at using a note for the menu, which should work. Thanks!

Rónán
Back to top
 
 
  IP Logged
Mark Bernstein
YaBB Administrator
*
Offline

designer of
Tinderbox

Posts: 2871
Eastgate Systems, Inc.
Re: HTML navigation menus in Tinderbox
Reply #3 - Aug 8th, 2010, 11:29am
 
If you want to create a navigation list as a sidebar, what you probably want is a structure along these lines:

BOILERPLATE
    sidebar
         Navigation List
              thing 1
              thing 2
              thing 3


A page ^include's /BOILERPLATE/sidebar, which in turn includes its ^children.

One of those children is Navigation List; its template opens an HTML list

    <ul class="sidebarMenu">
    ^children(/templates/menu Items)
    </ul>

Then each child of the Navigation List bar exports one menu item.

This can be both very simple -- just a bunch of notes and a few very small templates -- and very powerful.  Your navigation list could, for example, sort itself.  It can be a container, letting you add new things whenever you feel like it.  Or it might be an agent, cleverly organizing your site for you.
Back to top
 
 
WWW   IP Logged
Pages: 1
Send Topic Print