Pure CSS menus

Pure CSS styled menus can be created with the ::woof::pure::menu command. The menus have an optional heading. Each menu item is linked to a URL and is shown disabled if the URL is empty. Empty menu items act as separators. Note that Pure CSS menus are single-level and cannot be nested.

[woof::pure::menu {
  {Microsoft http://www.microsoft.com}
  {Google http://www.google.com selected}
  {}
  {Yahoo ""}
} -orient vertical -heading Sites]

Menus can also be shown horizontally.

[woof::pure::menu {
  {Microsoft http://www.microsoft.com}
  {Google http://www.google.com selected}
  {}
  {Yahoo ""}
} -orient horizontal -heading Sites]

Responsive menus

For responsive web site, you can specify the orientation of the menu to be dependent on the screen width. If you shrink the width of your browser window, the menu below will change from a vertical to a horizontal orientation as the width falls below the sm (small) screen size.

[woof::pure::menu {
  {Microsoft http://www.microsoft.com}
  {Google http://www.google.com selected}
  {}
  {Yahoo ""}
} -orient sm -heading Sites]