newbie question: is it possible to create a basic top menu bar without installing a plugin?

[dubtoms]

Hi everyone,

I'm new to TW and amazed by what you can do with it but I'm a bit overwhelmed by the documentation so I figured I would ask this silly question here :

I want to add a basic menu bar similar to the one found on this wiki for example to my own tw to make it more easy to navigate some categories for external viewers.

I understand there are some plugins including "menu bar" which allow this and more but the exemple listed above does not seem to use any unless I am wrong.

I tried creating a tiddler tagged with  $:/tags/TopLeftBar and copy/paste some code found in the same exemple but it does not seem to work:

<nav class="top-nav-bar tc-adjust-top-of-scroll">

<<list-links filter:"[tag[NavBar]!has[draft.of]sort[position]]">>
</nav>

Am I missing something obvious?

Thanks in advance,

Thomas

[Eric Shulman]

On Friday, June 19, 2020 at 5:19:56 AM UTC-7, dubtoms wrote:

I'm new to TW and amazed by what you can do with it but I'm a bit overwhelmed by the documentation so I figured I would ask this silly question here : 

There are no "silly" questions... only silly answers!

 

I want to add a basic menu bar similar to the one found on this wiki for example to my own tw to make it more easy to navigate some categories for external viewers.

I understand there are some plugins including "menu bar" which allow this and more but the example listed above does not seem to use any unless I am wrong.

You are not wrong.  The wiki example you cite (https://tritarget.org/) uses the native HTML <nav>...</nav> syntax, so no TW plugins are needed.

 

I tried creating a tiddler tagged with  $:/tags/TopLeftBar and copy/paste some code found in the same exemple but it does not seem to work:

<nav class="top-nav-bar tc-adjust-top-of-scroll">

<<list-links filter:"[tag[NavBar]!has[draft.of]sort[position]]">>
</nav>

Am I missing something obvious?

1) In order to indicate which Tiddler links should appear, you need to go to each of those tiddlers and add a tag, "NavBar".

2) You need to copy the following CSS and paste it into a tiddler tagged with $:/tags/Stylesheet...

2a) To style the NavBar links so they appear horizontally on a blue background:

.tc-topbar-left { top: 0; left: 0; width: 100%; background-color: #446e9b; border-color: #345578; border-width: 0 0 1px; }
.tc-topbar-left ul { list-style: none; }
.tc-topbar-left li { display: inline; margin: 0; padding: 0 20px; }
.tc-topbar-left li a { color: #ddd; }
.tc-topbar-left li a:hover { color: #fff; }

(found at https://tritarget.org/#%24%3A%2Fplugins%2Fsukima%2Ftritarget%2Fstyles)

2b) To set the height of the nav element:

.top-nav-bar { height: 40px; }

(found at https://tritarget.org/#%24%3A%2Fstyles%2Fsite)

If you add the tags in step (1) and define the CSS in steps (2a) and (2b), you should see the results you want.

Let me know how it goes...

enjoy,

-e

 

[dubtoms]

Thanks a lot for your help Eric, it's very much appreciated...

I might come back later with more questions but for the time being there only one thing I'd like to understand:

How does the filtering work here exactly ? I'd like to be able to arrange links the way I want.

<<list-links filter:"[tag[NavBar]!has[draft.of]sort[position]]">>

[Mat]

dubtoms wrote:

How does the filtering work here exactly ? I'd like to be able to arrange links the way I want.

<<list-links filter:"[tag[NavBar]!has[draft.of]sort[position]]">>

You say "arrange links" so the best is probably to change the filter to instead be "[tag[NavBar]!has[draft.of]]".

Then you can use a trick to access the ordering of these by using a tag pill, i.e type <<tag NavBar>>. If you click on the resulting tag, you can drag'n drop to change the order there which will reflect in the list-links as well.

If "arrange links" really refers to more general control over how the list is presented, you should then probably not use the list-links macro; i.e the list-links is a macro that outputs a list in a predefined format, i.e as a bullet list. It is a "skin" for the more general ListWidget that outputs lists that you can "shape" more flexibly. I strongly recommend that you get familiar with the ListWidget. It is possibly the most powerful and most useful widget in TW.

<:-)