{"id":131,"date":"2009-07-19T10:36:54","date_gmt":"2009-07-19T09:36:54","guid":{"rendered":"http:\/\/www.simonbattersby.com\/blog\/?page_id=131"},"modified":"2010-11-11T12:18:05","modified_gmt":"2010-11-11T11:18:05","slug":"building-a-css-vertical-expanding-menu-with-flyouts-stage-2","status":"publish","type":"page","link":"https:\/\/www.simonbattersby.com\/blog\/building-a-css-vertical-expanding-menu-with-flyouts-stage-2\/","title":{"rendered":"Building a css vertical expanding menu with flyouts &#8211; stage 2"},"content":{"rendered":"<p><a title=\"Part 1\" href=\"\/blog\/building-a-css-vertical-expanding-menu-with-flyouts-stage-1\/\">Click here for Part 1<\/a><\/p>\r\n\r\n<p>OK, now to add the second level menu to the html. For the purposes of this I&#8217;ll add a couple of menu items under each of &#8220;Blog&#8221; and &#8220;Websites&#8221;:<\/p>\r\n<pre>html\r\n&lt;div id=\"nav-menu\"&gt;\r\n&lt;ul&gt;\r\n&lt;li&gt;&lt;a href=\"#\"&gt;Home&lt;\/a&gt;&lt;\/li&gt;\r\n&lt;li&gt;&lt;a href=\"#\"&gt;Blog&lt;\/a&gt;\r\n\t<span class=\"code_highlight\">&lt;ul&gt;\r\n\t&lt;li&gt;&lt;a href=\"#\"&gt;Blog 1&lt;\/a&gt;&lt;\/li&gt;\r\n\t&lt;li&gt;&lt;a href=\"#\"&gt;Blog 2&lt;\/a&gt;&lt;\/li&gt;\r\n\t&lt;\/ul&gt;<\/span>\r\n&lt;\/li&gt;\r\n&lt;li&gt;&lt;a href=\"#\"&gt;Websites&lt;\/a&gt;\r\n<span class=\"code_highlight\">\t&lt;ul&gt;\r\n\t&lt;li&gt;&lt;a href=\"#\"&gt;Websites 1&lt;\/a&gt;&lt;\/li&gt;\r\n\t&lt;li&gt;&lt;a href=\"#\"&gt;Websites 2&lt;\/a&gt;&lt;\/li&gt;\r\n\t&lt;\/ul&gt;<\/span>\r\n&lt;\/li&gt;\r\n&lt;li&gt;&lt;a href=\"#\"&gt;Photos&lt;\/a&gt;&lt;\/li&gt;\r\n&lt;\/ul&gt;\r\n&lt;\/div&gt;<\/pre>\r\n\r\n<p>Note that the new entries need to be enclosed within the existing &lt;li&gt; tags. So this gives us:<\/p>\r\n\r\n<div class=\"greybox\">\r\n<ul id=\"menu11\">\r\n<li><a href=\"#\">Home<\/a><\/li>\r\n<li><a href=\"#\">Blog<\/a>\r\n<ul>\r\n<li><a href=\"#\">Blog 1<\/a><\/li>\r\n<li><a href=\"#\">Blog 2<\/a><\/li>\r\n<\/ul>\r\n<\/li>\r\n<li><a href=\"#\">Websites<\/a>\r\n<ul>\r\n<li><a href=\"#\">Websites 1<\/a><\/li>\r\n<li><a href=\"#\">Websites 2<\/a><\/li>\r\n<\/ul>\r\n<\/li>\r\n<li><a href=\"#\">Photos<\/a><\/li>\r\n<\/ul>\r\n<\/div>\r\n\r\n<p>Now the second level menu items are all showing as expected (I&#8217;ll hide them a bit later on). First let&#8217;s make them look a bit different so it&#8217;s clear which level is which.<\/p>\r\n\r\n<pre>css\r\n\r\n#nav-menu ul\r\n {list-style-type:none;\r\n  margin:0px;\r\n  padding:0px}\r\n\r\n#nav-menu ul a\r\n{text-decoration:none;\r\n border:1px solid #303030;\r\n width:170px;\r\n display:block;\r\n text-align:center;\r\n font-size:14pt;\r\n line-height:2em;\r\n background:url(Images\/Buttons\/Button_top.gif) repeat-x left;\r\n font-family:Arial, Helvetica, sans-serif;\r\n color:white}\r\n\r\n<span class=\"code_highlight\">#nav-menu ul ul li a\r\n{border:1px solid #888888;\r\n border-bottom: none;\r\n font-size:12pt;\r\n line-height: 1.6em;\r\n color:#303030;\r\n background-color:#a5a5a5;\r\n background-image:none;}<\/span><\/pre>\r\n\r\n<p>So here I&#8217;ve applied slightly different styling to the second level menu items. I&#8217;ve applied a different colour border, a different font-size, line-height and text colour, and this time I&#8217;ve applied a plain background colour (light grey #303030) instead of the background image.<\/p>\r\n\r\n<p>A couple of things to note here. I don&#8217;t need to re-apply the width, display:block and text-align at this stage because they are inherited from the earlier declarations for <code>#nav-menu ul a<\/code>.<\/p>\r\n\r\n<p>However, because the background-image will  be inherited in the same way, and I don&#8217;t want this, I have to specifically define <code>background-image:none<\/code> for my second level menu.<\/p>\r\n\r\n<p>The last point is a cosmetic one really. If my second level menu items have borders all round, I&#8217;ll get two borders between the menu items which looks a bit ugly, so I set no bottom border by the <code>border-bottom:none<\/code> statement.<\/p>\r\n\r\n<p>So I now have:<\/p>\r\n\r\n<div class=\"greybox\">\r\n<ul id=\"menu12\">\r\n<li><a href=\"#\">Home<\/a><\/li>\r\n<li><a href=\"#\">Blog<\/a>\r\n<ul>\r\n<li><a href=\"#\">Blog 1<\/a><\/li>\r\n<li><a href=\"#\">Blog 2<\/a><\/li>\r\n<\/ul>\r\n<\/li>\r\n<li><a href=\"#\">Websites<\/a>\r\n<ul>\r\n<li><a href=\"#\">Websites 1<\/a><\/li>\r\n<li><a href=\"#\">Websites 2<\/a><\/li>\r\n<\/ul>\r\n<\/li>\r\n<li><a href=\"#\">Photos<\/a><\/li>\r\n<\/ul>\r\n<\/div>\r\n\r\n<p>Right, this looks something like what I want but I\u2019ve still always got the second level menu displayed. I&#8217;m going to change this so the second level is only displayed when a first level page is displayed \u2013 so I only see the \u201cBlog 1 \u201d link when I&#8217;m  on a blog page. First off I&#8217;ll going to hide all the second level menus.<\/p>\r\n\r\n<pre>css\r\n\r\n#nav-menu ul\r\n {list-style-type:none;\r\n  margin:0px;\r\n  padding:0px}\r\n\r\n#nav-menu ul a\r\n{text-decoration:none;\r\n border:1px solid #303030;\r\n width:170px;\r\n display:block;\r\n text-align:center;\r\n font-size:14pt;\r\n line-height:2em;\r\n background:url(Images\/Buttons\/Button_top.gif) repeat-x left;\r\n font-family:Arial, Helvetica, sans-serif;\r\n color:white}\r\n\r\n<span class=\"code_highlight\">#nav-menu ul ul\r\n{display:none}<\/span> \r\n\r\n#nav-menu ul ul li a\r\n{border:1px solid #888888;\r\n border-bottom: none;\r\n font-size:12pt;\r\n line-height: 1.6em;\r\n color:#303030;\r\n background-color:#a5a5a5;\r\n background-image:none;}<\/pre>\r\n\r\n<p>The browser now displays, as expected:<\/p>\r\n\r\n<div class=\"greybox\">\r\n<ul id=\"menu13\">\r\n<li><a href=\"#\">Home<\/a><\/li>\r\n<li><a href=\"#\">Blog<\/a>\r\n<ul>\r\n<li><a href=\"#\">Blog 1<\/a><\/li>\r\n<li><a href=\"#\">Blog 2<\/a><\/li>\r\n<\/ul>\r\n<\/li>\r\n<li><a href=\"#\">Websites<\/a>\r\n<ul>\r\n<li><a href=\"#\">Websites 1<\/a><\/li>\r\n<li><a href=\"#\">Websites 2<\/a><\/li>\r\n<\/ul>\r\n<\/li>\r\n<li><a href=\"#\">Photos<\/a><\/li>\r\n<\/ul>\r\n<\/div>\r\n\r\n<p>Here&#8217;s the clever bit. I&#8217;m  now going to display the second level only on the appropriate pages. First I need to identify the pages  in the html, and I can do this by assigning a class to the body tag on each page. So, on the Blog pages I assign the page a class in the body tag:<\/p>\r\n\r\n<pre>html\r\n\r\n&lt;body class=\"blog\"&gt;<\/pre>\r\nand similarly for the website pages:\r\n<pre>html\r\n\r\n&lt;body class=\"web\"&gt;<\/pre>\r\nNote that  I leave the Home Page and the Photo pages unchanged, as in this example there&#8217;s no second level pages for these:\r\n<pre>html\r\n\r\n&lt;body&gt;<\/pre>\r\n\r\n<p>Next I need to mark up the html controlling the menu with matching classes:<\/p>\r\n\r\n<pre>html\r\n\r\n&lt;div id=\"nav-menu\"&gt;\r\n&lt;ul&gt;\r\n&lt;li&gt;&lt;a href=\"#\"&gt;Home&lt;\/a&gt;&lt;\/li&gt;\r\n&lt;li&gt;&lt;a href=\"#\"&gt;Blog&lt;\/a&gt;\r\n\t&lt;ul <span class=\"code_highlight\">class=\"blog\"<\/span>&gt;\r\n\t&lt;li&gt;&lt;a href=\"#\"&gt;Blog 1&lt;\/a&gt;&lt;\/li&gt;\r\n\t&lt;li&gt;&lt;a href=\"#\"&gt;Blog 2&lt;\/a&gt;&lt;\/li&gt;\r\n\t&lt;\/ul&gt;\r\n&lt;\/li&gt;\r\n&lt;li&gt;&lt;a href=\"#\"&gt;Websites&lt;\/a&gt;\r\n\t&lt;ul <span class=\"code_highlight\">class=\"web\"<\/span>&gt;\r\n\t&lt;li&gt;&lt;a href=\"#\"&gt;Websites 1&lt;\/a&gt;&lt;\/li&gt;\r\n\t&lt;li&gt;&lt;a href=\"#\"&gt;Websites 2&lt;\/a&gt;&lt;\/li&gt;\r\n\t&lt;\/ul&gt;&gt;\r\n&lt;\/li&gt;\r\n&lt;li&gt;&lt;a href=\"#\"&gt;Photos&lt;\/a&gt;&lt;\/li&gt;\r\n&lt;\/ul&gt;\r\n&lt;\/div&gt;<\/pre>\r\n\r\n<p>Note that it\u2019s the second level <code>&lt;ul&gt;<\/code> tags to which I assign the class. Now I can add a line to the css so that the menu items are displayed only when I want them to be. The css looks like this:<\/p>\r\n\r\n<pre>css\r\n\r\n#nav-menu ul\r\n {list-style-type:none;\r\n  margin:0px;\r\n  padding:0px}\r\n\r\n#nav-menu ul a\r\n{text-decoration:none;\r\n border:1px solid #303030;\r\n width:170px;\r\n display:block;\r\n text-align:center;\r\n font-size:14pt;\r\n line-height:2em;\r\n background:url(Images\/Buttons\/Button_top.gif) repeat-x left;\r\n font-family:Arial, Helvetica, sans-serif;\r\n color:white}\r\n\r\n#nav-menu ul ul\r\n{display:none} \r\n\r\n<span class=\"code_highlight\">body.blog #nav-menu ul ul.blog, \r\nbody.web #nav-menu ul ul.web\r\n{display:block}<\/span>\r\n\r\n#nav-menu ul ul li a\r\n{border:1px solid #888888;\r\n border-bottom: none;\r\n font-size:12pt;\r\n line-height: 1.6em;\r\n color:#303030;\r\n background-color:#a5a5a5;\r\n background-image:none;}<\/pre>\r\n\r\n<p>To explain this, what I&#8217;m saying here is that if the page  has a class of \u201cblog\u201d , defined by the statement <code>body.blog<\/code> and the second level menu has a class of \u201cblog\u201d, defined by <code>#nav-menu ul ul.blog<\/code> then the menu should be displayed (<code>display:block<\/code>). A similar statement applies to the web menu.<\/p>\r\n\r\n<p>Now, if we look at the Home Page it looks like this:<\/p>\r\n\r\n<div class=\"greybox\">\r\n<ul id=\"menu13a\">\r\n<li><a href=\"#\">Home<\/a><\/li>\r\n<li><a href=\"#\">Blog<\/a>\r\n<ul>\r\n<li><a href=\"#\">Blog 1<\/a><\/li>\r\n<li><a href=\"#\">Blog 2<\/a><\/li>\r\n<\/ul>\r\n<\/li>\r\n<li><a href=\"#\">Websites<\/a>\r\n<ul>\r\n<li><a href=\"#\">Websites 1<\/a><\/li>\r\n<li><a href=\"#\">Websites 2<\/a><\/li>\r\n<\/ul>\r\n<\/li>\r\n<li><a href=\"#\">Photos<\/a><\/li>\r\n<\/ul>\r\n\r\n<\/div>\r\n\r\n<p>And the Blog pages look like this:<\/p>\r\n\r\n<div class=\"greybox\">\r\n<ul id=\"menu14\">\r\n<li><a href=\"#\">Home<\/a><\/li>\r\n<li><a href=\"#\">Blog<\/a>\r\n<ul style=\"display:block\">\r\n<li><a href=\"#\">Blog 1<\/a><\/li>\r\n<li><a href=\"#\">Blog 2<\/a><\/li>\r\n<\/ul>\r\n<\/li>\r\n<li><a href=\"#\">Websites<\/a>\r\n<ul>\r\n<li><a href=\"#\">Websites 1<\/a><\/li>\r\n<li><a href=\"#\">Websites 2<\/a><\/li>\r\n<\/ul>\r\n<\/li>\r\n<li><a href=\"#\">Photos<\/a><\/li>\r\n<\/ul>\r\n\r\n<\/div>\r\n\r\n<p>And the Website pages look like this:<\/p>\r\n\r\n<div class=\"greybox\">\r\n<ul id=\"menu15\">\r\n<li><a href=\"#\">Home<\/a><\/li>\r\n<li><a href=\"#\">Blog<\/a>\r\n<ul>\r\n<li><a href=\"#\">Blog 1<\/a><\/li>\r\n<li><a href=\"#\">Blog 2<\/a><\/li>\r\n<\/ul>\r\n<\/li>\r\n<li><a href=\"#\">Websites<\/a>\r\n<ul  style=\"display:block\">\r\n<li><a href=\"#\">Websites 1<\/a><\/li>\r\n<li><a href=\"#\">Websites 2<\/a><\/li>\r\n<\/ul>\r\n<\/li>\r\n<li><a href=\"#\">Photos<\/a><\/li>\r\n<\/ul>\r\n\r\n<\/div>\r\n\r\n<p>So now I have a vertical expanding menu using css only. This was my original aim, but when I was testing I thought it would aid the navigation if you could get quickly to a second level page either from the Home page or from a different page. If you&#8217;re still interested, read on:<\/p>\r\n\r\n<p><a title=\"Part 3\" href=\"\/blog\/building-a-css-vertical-expanding-menu-with-flyouts-stage-3\/\">Click here for Part 3<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>Click here for Part 1 OK, now to add the second level menu to the html. For the purposes of this I&#8217;ll add a couple of menu items under each of &#8220;Blog&#8221; and &#8220;Websites&#8221;: html &lt;div id=&#8221;nav-menu&#8221;&gt; &lt;ul&gt; &lt;li&gt;&lt;a href=&#8221;#&#8221;&gt;Home&lt;\/a&gt;&lt;\/li&gt; &lt;li&gt;&lt;a href=&#8221;#&#8221;&gt;Blog&lt;\/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href=&#8221;#&#8221;&gt;Blog 1&lt;\/a&gt;&lt;\/li&gt; &lt;li&gt;&lt;a href=&#8221;#&#8221;&gt;Blog 2&lt;\/a&gt;&lt;\/li&gt; &lt;\/ul&gt; &lt;\/li&gt; &lt;li&gt;&lt;a href=&#8221;#&#8221;&gt;Websites&lt;\/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-131","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/pages\/131","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/comments?post=131"}],"version-history":[{"count":0,"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/pages\/131\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.simonbattersby.com\/blog\/wp-json\/wp\/v2\/media?parent=131"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}