[TW5] My new CSS styles for horizontal TOC. Demo

sini-Kit

unread,

Mar 26, 2016, 9:32:14 AM3/26/16

to TiddlyWiki

Hi. I always use TOC for creating left and top menu on my sites. It looks good, when it is in tiddlywiki, but when I render my wiki to many static pages, I see in pages HTML code that all labels ">" become a great part of SVG code many times repeated . So I remove all svg buttons from toc macro, and replace them by CSS styles with ::before{} Then I add some css to make toc menu multilevel and get menu, which look nice both in TW5 and single static page.

here is my top menu in static page http://heeg.ru/index.html and this menu in TW5 http://heeg.ru/heeg.html#index

You can use my menu css styles http://heeg.ru/heeg.html#%24%3A%2F_aa.giff%2FStyleSheetTopMenu and my variant of TOC http://heeg.ru/heeg.html#%24%3A%2Fcore%2Fmacros%2Ftoc

code to build TOC

<div class='tw-table-of-contents-top'  >   
<<toc "YourTopTiddler">>
</div>

BJ

unread,

Mar 26, 2016, 2:04:36 PM3/26/16

to TiddlyWiki

Hi sini-kit
looks very impressive.
how do you do a left menu?

cheer
BJ

sini-Kit

unread,

Mar 27, 2016, 1:54:17 AM3/27/16

to TiddlyWiki

left menu I do with TOC too. I use both top and left menu in my on-line stores, but not in drop-down variant. http://novye-podarki.ru/ I put them to http://novye-podarki.ru/heeg.html#%24%3A%2F_header (it has tag $:/tags/TopLeftBar) with my logo and telephone number. in static varint this menu don't have svg labels too.

суббота, 26 марта 2016 г., 21:04:36 UTC+3 пользователь BJ написал:

Reply all

Reply to author

Forward