Back to blue

Menu

Implementation

Make sure to include the CSS into your page or project:

<link rel="stylesheet" media="all" href="/static/css/ca_sg_menu.css"/>

Variations

Menu

Standard Menu

The most basic and smaller CA menu. There is a activate modifier on ca-menu__lnk called ca-menu__lnk--active and ca-menu--rght.that applies 2rem of margin left.

<nav class="ca-menu ca-menu--rght"> <ul class="ca-menu__wpr"> <li class="ca-menu__itm"> <a href="#" class="ca-a ca-a--no-undln ca-menu__lnk ca-menu__lnk--active">Item 1</a> </li> <li class="ca-menu__itm"> <a href="#" class="ca-a ca-a--no-undln ca-menu__lnk">Item 2</a> </li> </ul> </nav>

Menu with Sub-Menu

It covers a submenu cases through the ca-menu__wpr--sub modifiers. Due to SEO guidelines is mandatory to follow the markup proposed.

<nav class="ca-menu"> <ul class="ca-menu__wpr"> <li class="ca-menu__itm"> <a href="#" class="ca-a ca-a--no-undln ca-menu__lnk ca-menu__lnk--active">Item 1</a> </li> <li class="ca-menu__itm"> <a href="#" class="ca-a ca-a--no-undln ca-menu__lnk">Item 2</a> <ul class="ca-menu__wpr ca-menu__wpr--sub"> <li class="ca-menu__itm"> <a class="ca-a ca-a--no-undln ca-menu__lnk">Item 2.1</a> </li> <li class="ca-menu__itm"> <a class="ca-a ca-a--no-undln ca-menu__lnk">Item 2.2</a> </li> </ul> </li> </ul> </nav>

Sticky Menu

It places the menu fixed when scroll over the screen through the h-sticky.

<nav class="ca-menu h-sticky"> <ul class="ca-menu__wpr"> <li class="ca-menu__itm"> <a href="#" class="ca-a ca-a--no-undln ca-menu__lnk ca-menu__lnk--active">Item 1</a> </li> <li class="ca-menu__itm"> <a href="#" class="ca-a ca-a--no-undln ca-menu__lnk">Item 2</a> <ul class="ca-menu__wpr ca-menu__wpr--sub"> <li class="ca-menu__itm"> <a class="ca-a ca-a--no-undln ca-menu__lnk">Item 2.1</a> </li> <li class="ca-menu__itm"> <a class="ca-a ca-a--no-undln ca-menu__lnk">Item 2.2</a> </li> </ul> </li> <li class="ca-menu__itm"> <a href="#" class="ca-a ca-a--no-undln ca-menu__lnk">Item 3</a> </li> <li class="ca-menu__itm"> <a href="#" class="ca-a ca-a--no-undln ca-menu__lnk">Item 4</a> </li> </ul> </nav>