search

IUBLibTech / newton_chymistry

New version of 'The Chymistry of Isaac Newton', using XProc pipelines to generate a website based on TEI XML encodings of Newton's alchemical manuscripts, and Apache Solr as a search engine.
2 stars 0 forks source link

Allow for a two-level menu structure (main & subnavigation) #3

Closed Conal-Tuohy closed 5 years ago

Conal-Tuohy commented 5 years ago

Improve the menu structure so that it's slicker and more intuitive

Conal-Tuohy commented 5 years ago

I have introduced a menu configuration file menus.json which controls the menus; the main menu at the top of each page, and its drop-down sub-menus; the sectional navigation menu on pages which belong to one of the sub-menus, the menus in the footer, and the site index page. The file is a JSON object which maps menu titles to URLs. Since the URLs are all part of the site, I've specified them in a site-relative form; i.e. starting with /.

I have converted the menu to a more familiar "drop down" style. I've used the HTML 5 <details> element, which provides a popup (or drop-down) functionality. I added a JavaScript event listener to drop the sub-menu down when you hover over the top-level menu, so you don't have to actually click to drop it down.

The site-index page was easy to keep since it's a straightforward representation of menus.json

Conal-Tuohy commented 5 years ago

I have revised the menus to drop down vertically.

I've also rendered them in the footer, and slightly adjusted the way they were rendered in side-bar panels on the various pages of the site (i.e. as the list of links that reiterates the sub-menu to which the current page belongs).

I've fixed a CSS bug which caused the ⯆ and ⯈ icons next to the top-level menus not to display in some browsers, and another which caused the drop-down menu to drop down underneath the image slideshow on the home page (i.e. the menu was mostly obscured by the pictures).