Menus with PureCSS

After a introduction to PureCSS on a previous entrance where I explained why I like this project, today let’s see how easy we can include PureCSS in our development projects.

Menus

The way of creating menus is to list items <li> inside an unorder list <ul>, and the CSS prettify everything. Let’s write an example list:

</pre>
<ul>
	<li><a href="plantilla_purecss.html">Plantilla</a></li>
	<li><a href="purecss_botones.html">Botones</a></li>
	<li><a href="purecss_form0.html">Formulario Paso 0</a></li>
</ul>
<pre>

Menus are by default vertical, and they adjust to the width of the DIV element that have it. You need the classes pure-menu and pure-menu-open:

If you want to stand out an option, you can use the pure-menu-selected class, and you’ll have darker text .

If you want to createl horizontal menu, it is neccesary to add three classes: pure-menu, pure-menu-open and pure-menu-horizontal. Also, you can create headers on the menu by adding the pure-menu-heading class, with this outcome:

Her you can see it, but also, you have the code available on GitHub.

Paginators

An alternative to menus are paginators, that you can achieve it with the pure-paginator class, applied to the <ul> element. The <li> items of the list can receive the pure-button class (we’ll see in more depth on a next entrance).

A little bit disappointed …

In my opinion, I was a little disspointed with the way of creating menus with PureCSS lacks, and I have seen (and used) better options. First of all, you are limited to only one level. I don’t see any advantage of using the pure-menu-heading class, except if the user code more customization via CSS, and if you need a menu with more that one level, the alternative proposed is to use YUI, with Javascript.

As you can imagine, paginators is not a feature very attractive to me!.

Maybe, you can feel as I do, but … although this part of the PureCSS is not what I expect it doesn’t mean that other options work this way! In fact, there are several cool features of PureCSS that I really like!

… eh, wait a minute …

After this disappointed, I visit the Pure CSS GitHub page, and I ascertain a complementary project called pure-dropdown-menu (NOTE: this is not an official project) that allow you to create horizontal cascade menus (several levels) only by adding extra CSS code (I included it on manejandodatos_css.css). Of course, in order to use it, you need to know the use of a few extra classes!

First of all, the base is an horizontal menú, (see the first part of this entrance). Next, eit is compulsory to follow this rules:

• The unorder lists <ul> need the pure-menu-children class
  
• Every <li> item that links to a new menu level need to have the pure-menu-can-have-children class
  
• In order to have the arrow indicating a new menu level, just add the pure-menu-label class
  

And the outcome is:

After that, I hope you get a better concept of PureCSS, as I got now! And the best is, …

Everything is CSS … no Javascript!

Have a nice day!!