As you may have noticed that there are some marks on the right edge, which are the "Right-side navigation" as what I'd call it. They serve as like Table of Contents.
For now, it's three levels:
I hope this will encourage people to go through the headings and may be interested in reading more if you don't have to scroll down a page in order to skim over the content, but simply hover their cursors over these marks.
At first, I was planning a list-like at top-right corner as opposite to the settings at top-left corner. It would look like an automatic Table of Content, which I'd wanted for long time, but never started to write it.
However, I got this idea that visualizes the logical position of the heading in the page on the right side.
I wrote first changeset for post titles only, because I was afraid that subheadings might crowd the navigation. Later, subheadings were added in second changeset and the navigation looks fine, not over-crowded at all.
I didn't add a switch for this new navigation yet, I might or not. If you think this navigation doesn't look good, please complain in comment, so I can be motivated to add a switch for it for you to shut it off.
When you click on one mark, the page will scroll to the heading smoothly, not just jump to it directly. This reminds me of my jQuery jk navigation plugin, which also uses smoothing scroll and was installed briefly on this blog long time ago. I seriously want to add it back, so visitors can not only click on the right-side navigation with mouse, but also use keyboard to navigate.
I believe that I am not the first one to implement such navigation style, if you know someone has implemented similar feature for a page, or as a plugin or script, please post the link.
I think this it worth to make it as a jQuery plugin, if you would like to use it, please do let me know. I may create one based on these code and generalize it for broad usages.
I have only tested it on Firefox, so if you see any bugs, I am sure you will, please leave a comment with what browser you are using. Also, any feedback are welcome!
For now, it's three levels:
- Post title,
- First heading level in the post, and
- Second heading level.
I hope this will encourage people to go through the headings and may be interested in reading more if you don't have to scroll down a page in order to skim over the content, but simply hover their cursors over these marks.
At first, I was planning a list-like at top-right corner as opposite to the settings at top-left corner. It would look like an automatic Table of Content, which I'd wanted for long time, but never started to write it.
However, I got this idea that visualizes the logical position of the heading in the page on the right side.
I wrote first changeset for post titles only, because I was afraid that subheadings might crowd the navigation. Later, subheadings were added in second changeset and the navigation looks fine, not over-crowded at all.
I didn't add a switch for this new navigation yet, I might or not. If you think this navigation doesn't look good, please complain in comment, so I can be motivated to add a switch for it for you to shut it off.
When you click on one mark, the page will scroll to the heading smoothly, not just jump to it directly. This reminds me of my jQuery jk navigation plugin, which also uses smoothing scroll and was installed briefly on this blog long time ago. I seriously want to add it back, so visitors can not only click on the right-side navigation with mouse, but also use keyboard to navigate.
I believe that I am not the first one to implement such navigation style, if you know someone has implemented similar feature for a page, or as a plugin or script, please post the link.
I think this it worth to make it as a jQuery plugin, if you would like to use it, please do let me know. I may create one based on these code and generalize it for broad usages.
I have only tested it on Firefox, so if you see any bugs, I am sure you will, please leave a comment with what browser you are using. Also, any feedback are welcome!
0 comments:
Post a Comment