How can I replicate these in-post menus on my own Wordpress site?

February 3, 2015 9:44 PM

The menu at the far left of these posts.

I would appreciate anything from mere suggestions of search terms that might point me in the correct direction to explicit instructions.

I'm at a total loss - if it's a plugin, I can't find it. If it's something I need to learn how to do, that's fine - only I can't figure out what it is I need to learn to achieve these results! In fact, I fully expect that it's something that my learning-as-needed WordPress education has skipped, but I can't remedy it if I don't know what it is I need to know.

I do have the current edition of Smashing Wordpress on hand. I suspect it's something to do with post sections and headings and anchors, but I just cannot seem to go from those suspicions to an understanding of how it all goes together.

Best-case, I'll love you forever, scenario? Tell me WHAT it's called that I'm looking for, and point me at a tutorial that describes HOW to do it myself.

posted by stormyteal to Computers & Internet (4 answers total)

The site uses jQuery to dynamically add a class to the menu div only when the page is scrolled down, and has CSS for that class to change it's position from fixed to absolute. It also has CSS to animate the transition.

I'm not familiar with javascript enough to explain how it works, but you could take a look at the site's page source to see its code.
posted by Lowwen at 10:11 PM on February 3, 2015

Those menus are awful on an ipad. They either slide off-screen, such as in your two examples, or they hover over the actual content of the page, cutting off the left portion of the paragraphs.

So, when you find out how to make them, can you also find out how to make them Ipad friendly. Thanks.
posted by Kerasia at 1:09 AM on February 4, 2015 [1 favorite]

This question is relevant to my interests, and I'd be interested in your result.

I eventually found this plugin, 'Sectionizer' which looks like the one you want. (not tested by myself as yet, but will probably give it a go later tonight.)

If you still want to roll-your-own, here and here look like reasonable starting points. ('floating' was the relevant keyword to get those I think).

Also, it's beyond the depth of my knowledge, but I'm sure the iPad issue is solvable with different CSS stylesheets on a per device/user-agent basis. Something along those lines. (And there are several Wordpress plugins that can help with that if necessary.)
posted by quinndexter at 2:10 AM on February 4, 2015

According to the source it's using a jQuery plugin called Post Sections - there is a corresponding Wordpress plugin but it's not been updated in a long time and in fact gives me an error just trying to activate it. You may well be better off taking a look at quinndexter's recommendation or seeing if you can find and use the original jQuery plugin.
posted by jontyjago at 1:45 PM on February 4, 2015