Mulit-Level / Drilldown-Menu for TW
353 views
Skip to first unread message
Jan
Dec 16, 2016, 8:50:02 AM12/16/16
to TiddlyWiki
Hi,
I have wanted to have a Menu with drilldown-functionality for years now,
because it makes it much easier to organize a big number of Tiddlers,
especially if you also want to to use the Tiddlywiki on a mobile.
I was fascinated to see this example
demo: https://tympanus.net/Blueprints/MultiLevelMenu/
documantarion: http://tympanus.net/codrops/2015/11/17/multi-level-menu/
Besides the fact it looks so sleek, it has the advantage that it does
not use libraries like jquery and appeared to be pretty lightwight.
The Menu was quite easily implemented in a html-website, so I tried to
import the .css and .js to a Tiddlywiki and see whether I can get them
to work there...In effect, the result visible in
http://drilldown.tiddlyspot.com is disappointing...Nothing works at all.
The example works (or should work in this case) with a class-swapping
.js and modernizr.js which seems to make the animations browser-proof.
Do you think it would be possible to do a lighter version of a
DrillDownMenu which would provide the basic function without visual
candy in just css and WikiText?
Thanks Jan
I have wanted to have a Menu with drilldown-functionality for years now,
because it makes it much easier to organize a big number of Tiddlers,
especially if you also want to to use the Tiddlywiki on a mobile.
I was fascinated to see this example
demo: https://tympanus.net/Blueprints/MultiLevelMenu/
documantarion: http://tympanus.net/codrops/2015/11/17/multi-level-menu/
Besides the fact it looks so sleek, it has the advantage that it does
not use libraries like jquery and appeared to be pretty lightwight.
The Menu was quite easily implemented in a html-website, so I tried to
import the .css and .js to a Tiddlywiki and see whether I can get them
to work there...In effect, the result visible in
http://drilldown.tiddlyspot.com is disappointing...Nothing works at all.
The example works (or should work in this case) with a class-swapping
.js and modernizr.js which seems to make the animations browser-proof.
Do you think it would be possible to do a lighter version of a
DrillDownMenu which would provide the basic function without visual
candy in just css and WikiText?
Thanks Jan
Riz
Dec 16, 2016, 9:12:42 AM12/16/16
to TiddlyWiki
That is an interesting attempt.
Yes, I think it can be done, possible even with eye candy. Forget those javascripts - try animate.css. Use reveal widgets whose state is controlled by those buttons - like the accordion example in tiddlywiki.com.
Jed Carty
Dec 16, 2016, 12:38:41 PM12/16/16
to TiddlyWiki
I made these a while ago, they are pretty close to what you are talking about I think: http://ooktech.com/jed/ExampleWikis/Text%20Menus/
Jan
Dec 16, 2016, 4:32:43 PM12/16/16
to tiddl...@googlegroups.com
Hi Riz,
Wow this is the sleekest Menu I've ever seen on TW! Thanks so much. It took me a little fully to understood how the menu is constructed but I think this can be the perfect mobile menu for TW and especially the best mobile one.
Since you have done all this work: Do you want to publish this as a theme? The honor is all yours.
Yours Jan
Wow this is the sleekest Menu I've ever seen on TW! Thanks so much. It took me a little fully to understood how the menu is constructed but I think this can be the perfect mobile menu for TW and especially the best mobile one.
Since you have done all this work: Do you want to publish this as a theme? The honor is all yours.
Yours Jan
Am 16.12.2016 um 18:36 schrieb Riz:
Not as smooth as your example, but here is a semi-working stuff. It can repeat the patterns to have as many levels as you want. All the necessary stylesheets and tiddlers are under the sidebar tab - "multi".
--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/f1d071fd-6a23-4342-b158-3e4a0f238e35%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
Jan
Dec 16, 2016, 4:58:51 PM12/16/16
to tiddl...@googlegroups.com
Hi Jed,
thanks for the Text-Menu. I saw it some time ago but did not perceive its capacities then,
I think because there are in fact four Menu-Example, I did not realize the drilldown-function.
If i had i would have adopted it at once...
Yours Jan
thanks for the Text-Menu. I saw it some time ago but did not perceive its capacities then,
I think because there are in fact four Menu-Example, I did not realize the drilldown-function.
If i had i would have adopted it at once...
Yours Jan
Am 16.12.2016 um 18:38 schrieb Jed Carty:
I made these a while ago, they are pretty close to what you are talking about I think: http://ooktech.com/jed/ExampleWikis/Text%20Menus/
--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/20e514e7-611c-4a9e-ad66-3065b5893763%40googlegroups.com.
Riz
Dec 17, 2016, 1:35:42 AM12/17/16
to TiddlyWiki
Glad you liked it.
My TW5 to do list is already too long. My already limited spare time for hobbies is split between reddit and others. You go ahead if you want to. If you would please post it to reddit and drop in there from time to time, that would be cool.
sincerely
Riz
Tobias Beer
Dec 17, 2016, 2:17:03 AM12/17/16
to TiddlyWiki
Hi Jed,
I made these a while ago, they are pretty close to what you are talking about I think: http://ooktech.com/jed/ExampleWikis/Text%20Menus/
Neat stuff. How would you address the need to do both these things in your menu:
- drill down the hierarchy
- actually open a tiddler corresponding to any one item in the tree
I have the impression that your examples only demonstrate the drill down... and I'm thinking that:
- drilling down should happen using the arrows
- opening a tiddler should happen by clicking a title
Otherwise, what's the point of drilling down to some nested ...title?
Best wishes,
Tobias.
Jed Carty
Dec 17, 2016, 4:54:51 AM12/17/16
to TiddlyWiki
Tobias,
As with almost anything I make the documentation is the problem. The table of contents in the menu on the right opens a tiddler when you click on the title and navigate through the menu when you click on the arrows next to the titles. I am not sure what to do with it which is one reason I haven't done anything with it. The middle menu on the left shows tiddler subtitles and contents in the menu so it would be a way to navigate through a wiki using just the menu, but I don't have any specific use case for it. I made it in response to a request and I don't know if the person who asked for it ever actually used the menus.
As with almost anything I make the documentation is the problem. The table of contents in the menu on the right opens a tiddler when you click on the title and navigate through the menu when you click on the arrows next to the titles. I am not sure what to do with it which is one reason I haven't done anything with it. The middle menu on the left shows tiddler subtitles and contents in the menu so it would be a way to navigate through a wiki using just the menu, but I don't have any specific use case for it. I made it in response to a request and I don't know if the person who asked for it ever actually used the menus.
Jan
Dec 17, 2016, 8:24:22 PM12/17/16
to tiddl...@googlegroups.com
Hi Riz,
I will be very honored to continue this.
First I will replace my attempt on http://drilldown.tiddlyspot.com with your version.
I am beginning to understand and continue tinkering.
I think I will start working on the breadcrumbmechanism.
I will write if got somewhere.
Thanks again,
Yours Jan
I will be very honored to continue this.
First I will replace my attempt on http://drilldown.tiddlyspot.com with your version.
I am beginning to understand and continue tinkering.
I think I will start working on the breadcrumbmechanism.
I will write if got somewhere.
Thanks again,
Yours Jan
--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/ed40b25a-42e0-4522-b63c-be5730548b39%40googlegroups.com.
Riz
Dec 17, 2016, 8:40:02 PM12/17/16
to TiddlyWiki
Sure. Here is an outline of what I did.
The basic Idea is to have a container for the menu - like the left menu tiddler, a state tiddler - like the Cache in the example, and different levels of buttons. Each button should pass two parameters to the state tiddler, the next level to appear and which button was clicked.
The breadcrumbs is also based on the same mechanism. Although it might require more state tiddlers in place if you want it to show more than two levels at once.
The basic Idea is to have a container for the menu - like the left menu tiddler, a state tiddler - like the Cache in the example, and different levels of buttons. Each button should pass two parameters to the state tiddler, the next level to appear and which button was clicked.
The breadcrumbs is also based on the same mechanism. Although it might require more state tiddlers in place if you want it to show more than two levels at once.
Jan
Dec 17, 2016, 10:08:56 PM12/17/16
to tiddl...@googlegroups.com
Hi Riz,
I think I'll be going a slightly different way for ToC and breadcrumbs.
I just refreshed the drilldown.tiddlyspot.com but it is rather a description oft the concept so far.
Yours Jan
I think I'll be going a slightly different way for ToC and breadcrumbs.
I just refreshed the drilldown.tiddlyspot.com but it is rather a description oft the concept so far.
Yours Jan
--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/db2c4135-6199-4881-a047-11d3fe77bc07%40googlegroups.com.
Tobias Beer
Dec 19, 2016, 2:15:25 PM12/19/16
to TiddlyWiki
Hi Jed,
As with almost anything I make the documentation is the problem.
The table of contents in the menu on the right opens a tiddler when you click on the title and navigate through the menu when you click on the arrows next to the titles.
Ha! I only tested the one to the left.
Question answered. ;-)
Best wishes,
Tobias.
Jan
Dec 19, 2016, 8:45:47 PM12/19/16
to tiddl...@googlegroups.com
Hi Riz, Hi everybody...
I made new breadcrumbs and a new TOC Mechanism based on the Tags for the MultiMenu.
Go for the apples to find out.
If you open [[Old Variants]] you can see that the TOC can even be altered by drag and drop.
Now I got three questions...
Using different classes to get a more flexible menu, I ruined the clear look of your solution.
I would be happy if you could give it back some style...
The result is going to be fingerfriendly...when I finally will have made the button to show/hide the menu on a mobile . What is state of the art to do this? Removing the pagetemplate tag?
I would like to show the searchresults directly below the searchfield, without a pop-up, so that the other items simply shift down. How can I show them?
I made new breadcrumbs and a new TOC Mechanism based on the Tags for the MultiMenu.
Go for the apples to find out.
If you open [[Old Variants]] you can see that the TOC can even be altered by drag and drop.
Now I got three questions...
Using different classes to get a more flexible menu, I ruined the clear look of your solution.
I would be happy if you could give it back some style...
The result is going to be fingerfriendly...when I finally will have made the button to show/hide the menu on a mobile . What is state of the art to do this? Removing the pagetemplate tag?
I would like to show the searchresults directly below the searchfield, without a pop-up, so that the other items simply shift down. How can I show them?
Yours Jan
Am 18.12.2016 um 02:40 schrieb Riz:
--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/db2c4135-6199-4881-a047-11d3fe77bc07%40googlegroups.com.
Reply all
Reply to author
Forward
0 new messages