Reports from our 2016 Meetings
Reports from our 2016 Meetings
This Saturday we had a look at Michael D Bray’s CodeProject article “A-Pure-CSS-Menu-Supporting-Unlimited-Levels-of-Both Horizontal and Vertical items”
This is a unique idea as it uses DIVs rather than the usually lists to make the menu. The key to this code appears to be in the nesting of the divs. The code is designed to have unlimited levels or at least as many sub menus as you need.
I created a code pen to show how the nesting is achieved. The secret of the levels is achieved by applying classes to the divs in the HTML. There are four classes, they are, V(erical) M(enu) B(ar) or H(orizontal) M(enu) B(ar) which are used to show the menu items either as vertical or horizontal lines and “item” for each item displayed in the menu. To start the menu you have a top-(vmb) or (hmb) class. The PDF enclosed with the zip file shows how the four classes are applied to the divs.
The code starts with the class of TOP-VMB or TOP-HMB as required, eg a top of page menu may be horizontal and a side menu vertical. The class VMB or HMB is then applied to each level of the menu as required and each menu item is under a class of ITEM. So, dependant on your design you use either VMB or HMB and nest the items inside that class.
Here is a top level code
<div class='menu top hmb'>
<div class='item'> <a href='#' >Item 1</a> </div > <!—end item->
<div class='item'> <a href='#'> Item 2</a > </div > <!—end item->
<div class='item'> <a href='#' > Item 3</a> </div > <!—end item->
</div > <!—end menu top hmb -- >
This creates a single item horizontal menu, add more items as needed.
Next we add a sub menu by adding class menu-vmb inside the menu-top-hmb
<div class='menu vmb'>
<div class='item'> <a href='#' >Item 1</a> </div > <!—end item->
</div > <!—end menu vmb -- >
Here’s the full code
A <div class='menu top hmb'>
B <div class='item'> <a href='#' >Item 1</a>
C <div class='menu vmb'>
D <div class='item'> <a href='#' >Item 1</a> </div > <!—end item->
C </div > <!—end menu vmb -- >
B </div > <!—end item->
A </div > <!—end menu top hmb -- >
The result
Here’s where it gets tricky. The sub item D is nested inside the menu vmb div C which in turn is nested inside the item div B of the top menu A
In this example we have a horizontal menu with a vertical drop down. To achived that we placed the main item inside the menu top hmb div and then added the menu vmb div and nested the sub item inside it.
To go to the next level down you would nest say a horizontal menu (hmb) in the div of the sub item D and add a new item.
A <div class='menu top hmb'>
B <div class='item'>
<a href='#' >Item 1</a>
C <div class='menu vmb'>
D <div class='item'>
<a href='#' >Sub Item 1</a>
E <div class='menu vmb'>
F <div class='item'>
<a href='#' >Sub Sub item 1</a>
</div > <!—end item->
E </div > <!—end menu vmb -- >
C </div > <!—end menu vmb -- >
B </div > <!—end item->
A </div > <!—end menu top hmb -- >
After the break John Symonds showed us how he adapted the W3Schools tutorial on drop down menus to solve the menu problems he had experienced on his site. The main tutorial is very comprehensive and the one he used was the dropdown nav bar under more examples.
We had a good discussion on how John had applied the menu to his site. John used the active class which allows the used to know what page he is on. However it was not that clear how it was applied so we had a look at the site and John explained how he had used it on his site.
Steve South
Sig Leader