Slide menu

You may have noticed. Or quite possibly, not. I won’t hold it against you; it is a bit nerdy. The thing is, I’ve revamped my blog so that the “ancillary” stuff is now hidden behind a “hamburger menu” over there on the left. Click the icon (it’s known in the trade as a “hamburger”) – or, if you are on a tablet or phone, touch it – and the extra stuff about me, the site, and other information slides in, pushing the normal blog content over to the right. This is my first tentative step to being “responsive”, at least in the web sense. The rest of the responsiveness will come later, when I change how posts are rendered in the browser.

No idea what debris was flying

The extra content was always there on the site: at first it was always visible on the right, and after a while I decided to hide it all behind a popup with a label also on the right. Either solution just wasn’t great on a restricted screen, period. I did go through a period of trying to hide the extras (and the ad) depending on the browser width, but it never really worked well. So I decided to go for a slide-out panel instead. After a bit of investigation (there are, needless to say, a gazillion open-source sliding-panel libraries in JavaScript, as there are a gazillion libraries for other JavaScript functionality), I decided on jPanelMenu and I have to say, barring a quirk or two, it works just fine.

Quirks? Well, the first one is that my extras panel is long. It is no small menu as seems to be assumed by the library. Hence it gets displayed with a scrollbar. So, the first requirement was not only to “move” the panel (that is, restyle it) from the right side of the window to the left, but also to futz with the CSS so that there was enough room for a scrollbar on the right.

The next quirk is that the library duplicates the panel. For the longest time (OK, a couple of days, until I noticed), the extras content was being shown at the bottom of the page as well as in the slideout panel. Oops. A small change in CSS later (display:none to be precise) and that problem went away.

The next quirk was the way I’d originally written the extras panel: I’d used id instead of class for my element names. Since the library duplicated the HTML, that meant I suddenly had two copies of named elements that should have been unique in the DOM. The first time I noticed this was when I saw that the JavaScript that was supposed to be setting the event handlers on the Search box wasn’t actually working. Or rather it was only affecting the extras panel you couldn’t see. More changes later to remove the uniqueness requirements and everything worked fine.

So, apart from these minor quirks – and it only really took an evening’s worth of work to get it all working properly, albeit spread over a few days – I’m happy with the way the slideout panel works on this site. Even more so, the way it works nicely on a smaller, touch screen. As I said earlier: now I can think about how to display the posts more optimally on a small screen; that is, make the rest of the site more responsive.

  Loading links to posts on similar topics...