Skip to content
This repository has been archived by the owner on Jan 11, 2020. It is now read-only.
/ checkboxNav Public archive

A Sass-built navigation which uses the Checkbox Hack to create a responsive, mobile-friendly multi-level navigation. Easily customizable with Sass variables, demo themes included.

Notifications You must be signed in to change notification settings

sebkln/checkboxNav

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 

Repository files navigation

checkboxNav Logo

checkboxNav

A CSS-only, Sass-built responsive multi-level navigation

This menu uses the Checkbox Hack and is based on this tutorial by W3Bits, but completely rebuilt with Sass. Also, unlike the W3Bits version, checkboxNav does not rely on two html elements for the drop icon, but only needs the label.

Features

  • multi-level navigation
  • no JavaScript necessary
  • responsive
  • easy customization through Sass variables
  • BEM-like naming convention with unique names - no hassle with classes like 'nav' or 'menu' when using your favourite CSS framework
  • choose between hamburger icon or toggle-bar
  • 2 example themes

FAQ

How does it work?

We hide the actual checkboxes, but show labels that activate or deactivate them. When a checkbox is checked by the assigned label, we use the sibling selector + to style the element that is immediately following the checkbox. This way, we can open or close the navigation in mobile view.

CSS:

.cbnav input[type="checkbox"]:checked + .cbnav__lvl--sub {
    display: block;
}

HTML:

<a class="cbnav__link--first" href="#">A link
    <label class="cbnav__label" for="id1"><span class="cbnav__arrow"></span></label>
</a>
<input type="checkbox" id="id1">
<ul class="cbnav__lvl--sub">
    <li class="cbnav__item"><a class="cbnav__link--sub" href="#">A link</a></li>
    <li class="cbnav__item"><a class="cbnav__link--sub" href="#">A link</a></li>
</ul>

On desktop we use the common hover effect to show the navigation. Although the same label with drop icon is shown, it has no effect when you click on it to activate/deactivate the checkboxes.

How do I use it?

  • _checkboxNav.vars.scss contains all variables that can be customized
  • _checkboxNav.menu.scss includes the navigation's functionality

To adapt checkboxNav to your needs you can create a new Sass file, load the variables, then alter some of them and finally import checkboxNav.menu.

If you want to make further changes like adding borders, import another file which contains the modifications. See demo.bar.scss as an example:

@import "_checkboxNav.vars";


// override default values:
$cbn-color-link-first: #424254;
$cbn-color-text-first: #fff;
$cbn-color-link-first-hover: #64908A;
$cbn-color-text-first-hover: #fff;

$cbn-color-link-sub: $cbn-color-link-first;
$cbn-color-text-sub: $cbn-color-text-first;
$cbn-color-link-sub-hover: $cbn-color-link-first-hover;
$cbn-color-text-sub-hover: $cbn-color-text-first-hover;

$cbn-color-link-active: #64908A;
$cbn-color-text-active: #fff;

$cbn-color-navheader: #7abcb2;
$cbn-color-label: #a02a3c;
$cbn-color-toggle: $cbn-color-link-first;


@import "checkboxNav.menu";
@import "themes/theme.bar";

About

A Sass-built navigation which uses the Checkbox Hack to create a responsive, mobile-friendly multi-level navigation. Easily customizable with Sass variables, demo themes included.

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published