This article describes how I built the menu used on this website, using just css. I didn’t want to use javascript, partly because it seemed unnecessary, partly because I didn’t understand it enough. I\u2019ve tried to make this explanation as basic as possible, because I could have done with something like this myself a year or so ago.<\/p>\r\n\r\n
What I wanted was an expanding vertical menu, where the second level menu is displayed only on the “parent” first level pages and second level pages – for example this page displays the second level “Websites” pages. Subsequently, as an addition to improve navigation, I added a “flyout” menu for the other second level pages – try hovering over “Blog” on the menu here to see what I mean.<\/p>\r\n\r\n
I’ll walk through this in three stages. First I’ll create the top level menu and style it, then extend this to the second level as well, and finally cover the flyout behaviour.<\/p>\r\n\r\n
OK, let\u2019s start by creating the html, just with one level initially:<\/p>\r\n
html\r\n\r\n<div id=\"nav-menu\">\r\n<ul>\r\n<li><a href=\"#\">Home<\/a><\/li>\r\n<li><a href=\"#\">Blog<\/a><\/li>\r\n<li><a href=\"#\">Websites<\/a><\/li>\r\n<li><a href=\"#\">Photos<\/a><\/li>\r\n<\/ul>\r\n<\/div><\/pre>\r\nThe menu items are list items <li> in an unordered list <ul>. I’ve used a div to hold the menu, but I could have just applied the id to the <ul> tag. So this produces, using the default styling of the browser \u2013 that is, with no css applied:<\/p>\r\n\r\n
\r\n