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

Commit

Permalink
Initial commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@sebkln
sebkln committed Sep 11, 2016
0 parents commit 789b8f0
Show file tree
Hide file tree
Showing 16 changed files with 1,663 additions and 0 deletions.
80 changes: 80 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
![checkboxNav]
(http://demo.sklein-medien.de/fileadmin/Demo/Images/checkboxNav-logo-pos.svg =250x70)

# checkboxNav

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

This menu uses the **Checkbox Hack** and is based on [this tutorial by W3Bits](http://w3bits.com/css-responsive-nav-menu/), 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](https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors) `+` 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-label: #a02a3c;
$cbn-color-toggle: $cbn-color-link-first;
@import "checkboxNav.menu";
@import "themes/theme.bar";
```
118 changes: 118 additions & 0 deletions demo/bar.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>A CSS-only, Sass-built responsive multi-level navigation :: checkboxNav</title>

<!-- Load demo css w/ menu bar -->
<link rel="stylesheet" href="css/demo.bar.css">

<!-- Load a pretty webfont -->
<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>

<!-- Add some styling for the page -->
<style>
body { font-family: 'Oswald', sans-serif; }


.wrapper {
margin: 0 auto;
max-width: 50rem;
}


.cbnav { position: relative; } /* solely for the logo */


.logo {
position: absolute;
right: 2.5em;
top: .6em;
}


@media (min-width: 768px) {
.logo { right: 1em; }
}
</style>
</head>
<body>


<div class="wrapper">


<!-- Begin markup for example navigation -->
<nav class="cbnav">
<label for="toggle" id="toggle-menu">Navigation
<span class="cbnav__label"><span class="cbnav__arrow"></span></span>
</label>
<input type="checkbox" id="toggle">
<ul class="cbnav__lvl--first">
<li class="cbnav__item"><a class="cbnav__link--first" href="bar.html">Home</a></li>
<li class="cbnav__item"><a class="cbnav__link--first cbnav__link--active" href="bar.html">About us
<label title="Toggle drop-down" class="cbnav__label" for="id0"><span class="cbnav__arrow"></span></label>
</a>
<input type="checkbox" id="id0">
<ul class="cbnav__lvl--sub">
<li class="cbnav__item"><a class="cbnav__link--sub cbnav__link--active" href="bar.html">Contact</a></li>
</ul>
</li>
<li class="cbnav__item"><a class="cbnav__link--first" href="bar.html">Our products
<label title="Toggle drop-down" 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="bar.html">Fruits
<label title="Toggle drop-down" class="cbnav__label" for="id2"><span class="cbnav__arrow--sub"></span></label>
</a>
<input type="checkbox" id="id2">
<ul class="cbnav__lvl--sub">
<li class="cbnav__item"><a class="cbnav__link--sub" href="bar.html">Apples
<label title="Toggle drop-down" class="cbnav__label" for="id3"><span class="cbnav__arrow--sub"></span></label>
</a>
<input type="checkbox" id="id3">
<ul class="cbnav__lvl--sub">
<li class="cbnav__item"><a class="cbnav__link--sub" href="bar.html">Braeburn</a></li>
<li class="cbnav__item"><a class="cbnav__link--sub" href="bar.html">Elstar</a></li>
<li class="cbnav__item"><a class="cbnav__link--sub" href="bar.html">Gala</a></li>
<li class="cbnav__item"><a class="cbnav__link--sub" href="bar.html">Golden Delicious</a></li>
</ul>
</li>
<li class="cbnav__item"><a class="cbnav__link--sub" href="bar.html">Bananas</a></li>
<li class="cbnav__item"><a class="cbnav__link--sub" href="bar.html">Pears</a></li>
</ul>
</li>
<li class="cbnav__item"><a class="cbnav__link--sub" href="bar.html">Vegetables
<label title="Toggle drop-down" class="cbnav__label" for="id4"><span class="cbnav__arrow--sub"></span></label>
</a>
<input type="checkbox" id="id4">
<ul class="cbnav__lvl--sub">
<li class="cbnav__item"><a class="cbnav__link--sub" href="bar.html">Potatoes
<label title="Toggle drop-down" class="cbnav__label" for="id5"><span class="cbnav__arrow--sub"></span></label>
</a>
<input type="checkbox" id="id5">
<ul class="cbnav__lvl--sub">
<li class="cbnav__item"><a class="cbnav__link--sub" href="bar.html">waxy</a></li>
<li class="cbnav__item"><a class="cbnav__link--sub" href="bar.html">predominantly waxy</a></li>
<li class="cbnav__item"><a class="cbnav__link--sub" href="bar.html">mealy</a></li>
</ul>
</li>
<li class="cbnav__item"><a class="cbnav__link--sub" href="bar.html">Carrots</a></li>
</ul>
</li>
</ul>
</li>
<li class="cbnav__item"><a class="cbnav__link--first" href="bar.html">Legal notice</a></li>
</ul>
<a href="bar.html"><img src="res/checkboxNav-logo-neg.svg" alt="logo" class="logo"></a>
</nav>
<!-- End markup for example navigation -->


</div>


</body>
</html>
Loading

0 comments on commit 789b8f0

Please sign in to comment.