From 789b8f00d039c5674e31b0a2ed113fc39eb476c4 Mon Sep 17 00:00:00 2001 From: Sebastian Klein <sebastian@sklein-medien.de> Date: Sun, 11 Sep 2016 21:22:16 +0200 Subject: [PATCH] Initial commit --- README.md | 80 +++++++++ demo/bar.html | 118 +++++++++++++ demo/css/demo.bar.css | 217 +++++++++++++++++++++++ demo/css/demo.default.css | 189 ++++++++++++++++++++ demo/css/demo.hamburger.css | 230 +++++++++++++++++++++++++ demo/default.html | 100 +++++++++++ demo/hamburger.html | 123 +++++++++++++ demo/res/checkboxNav-logo-neg.svg | 54 ++++++ demo/res/checkboxNav-logo-pos.svg | 54 ++++++ src/_checkboxNav.menu.scss | 275 ++++++++++++++++++++++++++++++ src/_checkboxNav.vars.scss | 54 ++++++ src/demo.bar.scss | 23 +++ src/demo.default.scss | 2 + src/demo.hamburger.scss | 31 ++++ src/themes/_theme.bar.scss | 55 ++++++ src/themes/_theme.hamburger.scss | 58 +++++++ 16 files changed, 1663 insertions(+) create mode 100644 README.md create mode 100644 demo/bar.html create mode 100644 demo/css/demo.bar.css create mode 100644 demo/css/demo.default.css create mode 100644 demo/css/demo.hamburger.css create mode 100644 demo/default.html create mode 100644 demo/hamburger.html create mode 100644 demo/res/checkboxNav-logo-neg.svg create mode 100644 demo/res/checkboxNav-logo-pos.svg create mode 100644 src/_checkboxNav.menu.scss create mode 100644 src/_checkboxNav.vars.scss create mode 100644 src/demo.bar.scss create mode 100644 src/demo.default.scss create mode 100644 src/demo.hamburger.scss create mode 100644 src/themes/_theme.bar.scss create mode 100644 src/themes/_theme.hamburger.scss diff --git a/README.md b/README.md new file mode 100644 index 0000000..1821bfa --- /dev/null +++ b/README.md @@ -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"; +``` \ No newline at end of file diff --git a/demo/bar.html b/demo/bar.html new file mode 100644 index 0000000..36eabc7 --- /dev/null +++ b/demo/bar.html @@ -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> \ No newline at end of file diff --git a/demo/css/demo.bar.css b/demo/css/demo.bar.css new file mode 100644 index 0000000..40c2018 --- /dev/null +++ b/demo/css/demo.bar.css @@ -0,0 +1,217 @@ +/** + * MENU TOGGLE TYPE + * + * Use a Hamburger Icon or a Navigation bar. + * Please note the slightly different HTML markup (demos). + * + */ +/** + * LABEL FORM + */ +/** + * COLORS + * + * You can assign different colors to the first level and the sublevels, + * e.g. a transparent bar and colored sublevels (see hamburger demo). + */ +/* first menu level */ +/* menu sublevels */ +/* active page */ +/* miscellaneous */ +/** + * MEASURES + */ +/** + * MENU TOGGLE TYPE + */ +#toggle-menu { + background-color: #424254; + color: #fff; + display: block; + padding: 0.75em 1em; + position: relative; } + +/** + * MENU ARROWS + */ +.cbnav__arrow { + border-right: 6px solid transparent; + border-left: 6px solid transparent; + border-top: 6px solid #fff; + display: inline-block; + vertical-align: middle; + height: 0; + width: 0; } + +.cbnav__arrow--sub { + border-top: 6px solid #fff; + border-left: 6px solid transparent; + border-right: 6px solid transparent; + display: inline-block; + vertical-align: middle; + height: 0; + width: 0; } + @media (min-width: 768px) { + .cbnav__arrow--sub { + border-right: none; + border-bottom: 6px solid transparent; + border-top: 6px solid transparent; + border-left: 6px solid #fff; } } + +/** + * MOBILE VIEW + */ +.cbnav__lvl--first { + background-color: #424254; } + .cbnav__lvl--first::after { + clear: both; + content: ""; + display: table; } + +.cbnav__lvl--first, +.cbnav__lvl--sub { + margin: 0; + padding: 0; } + +.cbnav__lvl--first, +.cbnav input[type="checkbox"] { + display: none; } + +#toggle:checked + .cbnav__lvl--first, +.cbnav input[type="checkbox"]:checked + .cbnav__lvl--sub { + display: block; } + +.cbnav__item { + color: #fff; + display: block; + position: relative; } + .cbnav__item a { + display: block; + position: relative; + text-decoration: none; } + .cbnav__item a:hover, .cbnav__item a:focus { + text-decoration: none; } + +.cbnav__link--first { + background-color: #424254; + color: #fff; + padding: 0.75em 1em; + padding-right: 42px; } + .cbnav__link--first:hover { + background-color: #64908A; + color: #fff; } + +.cbnav__lvl--sub { + display: none; + padding-left: 1em; } + +.cbnav__link--sub { + background-color: #424254; + color: #fff; + padding: 0.75em 1em; + padding-right: 42px; } + .cbnav__link--sub:hover { + background-color: #64908A; + color: #fff; } + +.cbnav__link--active { + background-color: #64908A; + color: #fff; + padding: 0.75em 1em; + padding-right: 42px; } + +ul span.cbnav__label { + display: none; } + +/** + * DESKTOP VIEW + */ +@media only screen and (min-width: 768px) { + .cbnav { + background-color: #424254; } + + .cbnav__lvl--first { + background-color: transparent; } + + #toggle-menu, + .cbnav input[type="checkbox"]:checked + .cbnav__lvl--sub { + display: none; } + + .cbnav__lvl--first, + .cbnav__item:hover > input[type="checkbox"] + .cbnav__lvl--sub { + display: block; } + + .cbnav__item { + float: left; } + + .cbnav__link--first { + background-color: #424254; + color: #fff; + padding: 0.75em 1em; + padding-right: 42px; } + .cbnav__link--first:hover { + background-color: #64908A; + color: #fff; } + + .cbnav__link--active { + background-color: #64908A; + color: #fff; } + + .cbnav__lvl--sub { + display: none; + margin: 0; + padding: 0; + position: absolute; + top: 100%; + left: 0; + width: 12em; + z-index: 3000; } + .cbnav__lvl--sub .cbnav__item { + float: none; } + .cbnav__lvl--sub .cbnav__lvl--sub { + top: 0; + left: 100%; } } +/** + * LABELS + */ +.cbnav__label:before { + content: ''; + display: inline-block; + height: 100%; + vertical-align: middle; } + +.cbnav__label { + background-color: #a02a3c; + height: 100%; + padding: 0 .5em; + position: absolute; + right: 0; + top: 0; } + +.cbnav { + border-bottom: 1px solid #64908A; } + +#toggle-menu { + border-bottom: 1px solid #64908A; } + +.cbnav__lvl--sub { + border-top: 1px solid #64908A; } + .cbnav__lvl--sub .cbnav__item:last-child { + border-width: 0; } + +.cbnav__item { + border-bottom: 1px solid #64908A; } + +.cbnav__item a { + transition: all .125s ease-in-out; + -webkit-transition: all .125s ease-in-out; } + +@media only screen and (min-width: 768px) { + .cbnav__item { + border-width: 0 1px 0 0; } + + .cbnav__lvl--sub { + border-width: 0; } + + .cbnav__lvl--sub .cbnav__item { + border-width: 0 0 1px; } } diff --git a/demo/css/demo.default.css b/demo/css/demo.default.css new file mode 100644 index 0000000..a649983 --- /dev/null +++ b/demo/css/demo.default.css @@ -0,0 +1,189 @@ +/** + * MENU TOGGLE TYPE + * + * Use a Hamburger Icon or a Navigation bar. + * Please note the slightly different HTML markup (demos). + * + */ +/** + * LABEL FORM + */ +/** + * COLORS + * + * You can assign different colors to the first level and the sublevels, + * e.g. a transparent bar and colored sublevels (see hamburger demo). + */ +/* first menu level */ +/* menu sublevels */ +/* active page */ +/* miscellaneous */ +/** + * MEASURES + */ +/** + * MENU TOGGLE TYPE + */ +#toggle-menu { + background-color: #ddd; + color: #444; + display: block; + padding: 0.75em 1em; + position: relative; } + +/** + * MENU ARROWS + */ +.cbnav__arrow { + border-right: 6px solid transparent; + border-left: 6px solid transparent; + border-top: 6px solid #fff; + display: inline-block; + vertical-align: middle; + height: 0; + width: 0; } + +.cbnav__arrow--sub { + border-top: 6px solid #fff; + border-left: 6px solid transparent; + border-right: 6px solid transparent; + display: inline-block; + vertical-align: middle; + height: 0; + width: 0; } + @media (min-width: 768px) { + .cbnav__arrow--sub { + border-right: none; + border-bottom: 6px solid transparent; + border-top: 6px solid transparent; + border-left: 6px solid #fff; } } + +/** + * MOBILE VIEW + */ +.cbnav__lvl--first { + background-color: #ddd; } + .cbnav__lvl--first::after { + clear: both; + content: ""; + display: table; } + +.cbnav__lvl--first, +.cbnav__lvl--sub { + margin: 0; + padding: 0; } + +.cbnav__lvl--first, +.cbnav input[type="checkbox"] { + display: none; } + +#toggle:checked + .cbnav__lvl--first, +.cbnav input[type="checkbox"]:checked + .cbnav__lvl--sub { + display: block; } + +.cbnav__item { + color: #444; + display: block; + position: relative; } + .cbnav__item a { + display: block; + position: relative; + text-decoration: none; } + .cbnav__item a:hover, .cbnav__item a:focus { + text-decoration: none; } + +.cbnav__link--first { + background-color: #ddd; + color: #444; + padding: 0.75em 1em; + padding-right: 42px; } + .cbnav__link--first:hover { + background-color: #aaa; + color: #000; } + +.cbnav__lvl--sub { + display: none; + padding-left: 1em; } + +.cbnav__link--sub { + background-color: #ddd; + color: #444; + padding: 0.75em 1em; + padding-right: 42px; } + .cbnav__link--sub:hover { + background-color: #aaa; + color: #000; } + +.cbnav__link--active { + background-color: #999; + color: #eee; + padding: 0.75em 1em; + padding-right: 42px; } + +ul span.cbnav__label { + display: none; } + +/** + * DESKTOP VIEW + */ +@media only screen and (min-width: 768px) { + .cbnav { + background-color: #ddd; } + + .cbnav__lvl--first { + background-color: transparent; } + + #toggle-menu, + .cbnav input[type="checkbox"]:checked + .cbnav__lvl--sub { + display: none; } + + .cbnav__lvl--first, + .cbnav__item:hover > input[type="checkbox"] + .cbnav__lvl--sub { + display: block; } + + .cbnav__item { + float: left; } + + .cbnav__link--first { + background-color: #ddd; + color: #444; + padding: 0.75em 1em; + padding-right: 42px; } + .cbnav__link--first:hover { + background-color: #aaa; + color: #000; } + + .cbnav__link--active { + background-color: #999; + color: #eee; } + + .cbnav__lvl--sub { + display: none; + margin: 0; + padding: 0; + position: absolute; + top: 100%; + left: 0; + width: 12em; + z-index: 3000; } + .cbnav__lvl--sub .cbnav__item { + float: none; } + .cbnav__lvl--sub .cbnav__lvl--sub { + top: 0; + left: 100%; } } +/** + * LABELS + */ +.cbnav__label:before { + content: ''; + display: inline-block; + height: 100%; + vertical-align: middle; } + +.cbnav__label { + background-color: #666; + height: 100%; + padding: 0 .5em; + position: absolute; + right: 0; + top: 0; } diff --git a/demo/css/demo.hamburger.css b/demo/css/demo.hamburger.css new file mode 100644 index 0000000..1939be6 --- /dev/null +++ b/demo/css/demo.hamburger.css @@ -0,0 +1,230 @@ +/** + * MENU TOGGLE TYPE + * + * Use a Hamburger Icon or a Navigation bar. + * Please note the slightly different HTML markup (demos). + * + */ +/** + * LABEL FORM + */ +/** + * COLORS + * + * You can assign different colors to the first level and the sublevels, + * e.g. a transparent bar and colored sublevels (see hamburger demo). + */ +/* first menu level */ +/* menu sublevels */ +/* active page */ +/* miscellaneous */ +/** + * MEASURES + */ +/** + * MENU TOGGLE TYPE + */ +#toggle-menu { + background: center center no-repeat transparent; + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAXCAQAAAC/3ZebAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA82lDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjardA/SgNBHMXx70TULloE67mAgmu15eQPi2ARYopsqkxmBw1hd4fZn3/2Bh7B43iDFIIXUVJbqARLwU/1eM2DB+rZDPujzjGUlcRsYvJZPteHGw7YAwDrmmDG4yuAqq48vynYvqEAXk/NsD/ib/ZdiAK8AEnhGwd8AKsHCQJqAfSW6yCgBOitp5MBqCegK/5RAAZ1aOPq5lb0eZqm2hT10uvrthFfNvqycnUMdbTiC+B7A+Aoi7bVmS1Lq5OzhH83y+f6K71PUYA62ey6HXcX73/+7FzAJ0sbODDOTdGSAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAC/SURBVHjavJNLDoQwDEOfIw7L/S/gWRRKW4xGzGIqgUKCm49j7QYwAgzosPNpsTJA/03H4weQMFCaXLP1BK3nkIPVriumDjy8NRTtCbwhh9DVqW/X6RxEc7i7mTKyzFPm/akfMGg3gU73jhTo3Vh60I3slV4aaGx5XZnEX10TyxAH8ktD/SmLbvnEZs1bzuPKqvsq7ZfjEAaq/0suX5S6ftV7yAHKckvb3lirJPNVkuoUC+GzPEeZa9CThoyfAQDQ6Epi+uUd3gAAAABJRU5ErkJggg=="); + display: block; + width: 40px; + height: 40px; } + +/** + * MENU ARROWS + */ +.cbnav__arrow { + border-right: 5px solid transparent; + border-left: 5px solid transparent; + border-top: 5px solid #cbeeff; + display: inline-block; + vertical-align: middle; + height: 0; + width: 0; } + +.cbnav__arrow--sub { + border-top: 5px solid #cbeeff; + border-left: 5px solid transparent; + border-right: 5px solid transparent; + display: inline-block; + vertical-align: middle; + height: 0; + width: 0; } + @media (min-width: 768px) { + .cbnav__arrow--sub { + border-right: none; + border-bottom: 5px solid transparent; + border-top: 5px solid transparent; + border-left: 5px solid #cbeeff; } } + +/** + * MOBILE VIEW + */ +.cbnav__lvl--first { + background-color: transparent; } + .cbnav__lvl--first::after { + clear: both; + content: ""; + display: table; } + +.cbnav__lvl--first, +.cbnav__lvl--sub { + margin: 0; + padding: 0; } + +.cbnav__lvl--first, +.cbnav input[type="checkbox"] { + display: none; } + +#toggle:checked + .cbnav__lvl--first, +.cbnav input[type="checkbox"]:checked + .cbnav__lvl--sub { + display: block; } + +.cbnav__item { + color: #cbeeff; + display: block; + position: relative; } + .cbnav__item a { + display: block; + position: relative; + text-decoration: none; } + .cbnav__item a:hover, .cbnav__item a:focus { + text-decoration: none; } + +.cbnav__link--first { + background-color: transparent; + color: #cbeeff; + padding: 0.5em 1em; + padding-right: 35px; } + .cbnav__link--first:hover { + background-color: rgba(255, 255, 255, 0.15); + color: #fff; } + +.cbnav__lvl--sub { + display: none; + padding-left: 1em; } + +.cbnav__link--sub { + background-color: transparent; + color: #cbeeff; + padding: 0.5em 1em; + padding-right: 35px; } + .cbnav__link--sub:hover { + background-color: rgba(255, 255, 255, 0.15); + color: #fff; } + +.cbnav__link--active { + background-color: inherit; + color: #fff; + padding: 0.5em 1em; + padding-right: 35px; } + +ul span.cbnav__label { + display: none; } + +/** + * DESKTOP VIEW + */ +@media only screen and (min-width: 768px) { + .cbnav { + background-color: transparent; } + + .cbnav__lvl--first { + background-color: transparent; } + + #toggle-menu, + .cbnav input[type="checkbox"]:checked + .cbnav__lvl--sub { + display: none; } + + .cbnav__lvl--first, + .cbnav__item:hover > input[type="checkbox"] + .cbnav__lvl--sub { + display: block; } + + .cbnav__item { + float: left; } + + .cbnav__link--first { + background-color: transparent; + color: #cbeeff; + padding: 0 1em 0.25em; + padding-right: 35px; } + .cbnav__link--first:hover { + background-color: transparent; + color: #fff; } + + .cbnav__link--active { + background-color: inherit; + color: #fff; } + + .cbnav__lvl--sub { + display: none; + margin: 0; + padding: 0; + position: absolute; + top: 100%; + left: 0; + width: 12em; + z-index: 3000; } + .cbnav__lvl--sub .cbnav__item { + float: none; } + .cbnav__lvl--sub .cbnav__lvl--sub { + top: 0; + left: 100%; } } +/** + * LABELS + */ +.cbnav__label:before { + content: ''; + display: inline-block; + height: 100%; + vertical-align: middle; } + +.cbnav__label { + background-color: #0e2245; + border-radius: 50%; + height: 20px; + text-align: center; + position: absolute; + right: 10px; + top: 7.5px; + width: 20px; } + +#toggle-menu { + background-image: url("data:image/png;base64,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"); } + +.cbnav__lvl--first { + background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0, rgba(220, 235, 251, 0.1)), color-stop(1, rgba(171, 183, 214, 0.4))); + background-image: -webkit-linear-gradient(-90deg, rgba(220, 235, 251, 0.1) 0%, rgba(171, 183, 214, 0.4) 100%); + background-image: linear-gradient(180deg, rgba(220, 235, 251, 0.1) 0%, rgba(171, 183, 214, 0.4) 100%); } + +.cbnav__item a { + transition: all .125s ease-in-out; + -webkit-transition: all .125s ease-in-out; } + +.cbnav__arrow, +.cbnav__arrow--sub { + margin-bottom: 5px; } + +.cbnav__link--active { + font-weight: 700; } + +@media only screen and (min-width: 768px) { + .cbnav__lvl--first { + background: transparent; } + + .cbnav__lvl--first > li > a { + padding: 0 1em 0.25em; } + .cbnav__lvl--first > li > a .cbnav__label { + background-color: transparent; + position: relative; + top: auto; + right: auto; } + + .cbnav__lvl--sub { + background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0, rgba(220, 235, 251, 0.1)), color-stop(1, rgba(171, 183, 214, 0.4))); + background-image: -webkit-linear-gradient(-90deg, rgba(220, 235, 251, 0.1) 0%, rgba(171, 183, 214, 0.4) 100%); + background-image: linear-gradient(180deg, rgba(220, 235, 251, 0.1) 0%, rgba(171, 183, 214, 0.4) 100%); } + .cbnav__lvl--sub .cbnav__link--active { + background-color: rgba(255, 255, 255, 0.15); + color: #fff; } } diff --git a/demo/default.html b/demo/default.html new file mode 100644 index 0000000..f67add9 --- /dev/null +++ b/demo/default.html @@ -0,0 +1,100 @@ +<!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.default.css"> + + <!-- Add some styling for the page --> + <style> + .cbnav { position: relative; } /* solely for the logo */ + + + .logo { + position: absolute; + right: 2.5em; + top: .5em; + } + + + @media (min-width: 768px) { + .logo { right: 1em; } + } + </style> +</head> +<body> + + +<!-- 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="default.html">Home</a></li> + <li class="cbnav__item"><a class="cbnav__link--first cbnav__link--active" href="default.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="default.html">Contact</a></li> + </ul> + </li> + <li class="cbnav__item"><a class="cbnav__link--first" href="default.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="default.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="default.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="default.html">Braeburn</a></li> + <li class="cbnav__item"><a class="cbnav__link--sub" href="default.html">Elstar</a></li> + <li class="cbnav__item"><a class="cbnav__link--sub" href="default.html">Gala</a></li> + <li class="cbnav__item"><a class="cbnav__link--sub" href="default.html">Golden Delicious</a></li> + </ul> + </li> + <li class="cbnav__item"><a class="cbnav__link--sub" href="default.html">Bananas</a></li> + <li class="cbnav__item"><a class="cbnav__link--sub" href="default.html">Pears</a></li> + </ul> + </li> + <li class="cbnav__item"><a class="cbnav__link--sub" href="default.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="default.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="default.html">waxy</a></li> + <li class="cbnav__item"><a class="cbnav__link--sub" href="default.html">predominantly waxy</a></li> + <li class="cbnav__item"><a class="cbnav__link--sub" href="default.html">mealy</a></li> + </ul> + </li> + <li class="cbnav__item"><a class="cbnav__link--sub" href="default.html">Carrots</a></li> + </ul> + </li> + </ul> + </li> + <li class="cbnav__item"><a class="cbnav__link--first" href="default.html">Legal notice</a></li> + </ul> + <a href="default.html"><img src="res/checkboxNav-logo-pos.svg" alt="logo" class="logo"></a> +</nav> +<!-- End markup for example navigation --> + + +</body> +</html> \ No newline at end of file diff --git a/demo/hamburger.html b/demo/hamburger.html new file mode 100644 index 0000000..9bc4893 --- /dev/null +++ b/demo/hamburger.html @@ -0,0 +1,123 @@ +<!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/ hamburger icon --> + <link rel="stylesheet" href="css/demo.hamburger.css"> + + <!-- Load a pretty webfont --> + <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> + + <!-- Add some styling for the page --> + <style> + body { + background: url(http://demo.sklein-medien.de/fileadmin/Demo/Images/hivernacle-barcelona-darkblue.jpg) no-repeat; + -webkit-background-size: cover; + background-size: cover; + font-family: 'Open Sans', sans-serif; + height: 100vh; + margin: 0; + } + + + .wrapper { + margin: 0 auto; + max-width: 50rem; + padding: .5rem 2% 0; + } + + + .cbnav { position: relative; } /* solely for the logo */ + + + .logo { + position: absolute; + right: .5rem; + top: 5px; + } + + + @media (min-width: 768px) { + .wrapper { padding-top: 2rem; } + .logo { top: -7px; } + } + </style> +</head> +<body> + +<div class="wrapper"> + + + <!-- Begin markup for example navigation --> + <nav class="cbnav"> + <label for="toggle" id="toggle-menu"></label> + <input type="checkbox" id="toggle"> + <ul class="cbnav__lvl--first"> + <li class="cbnav__item"><a class="cbnav__link--first" href="hamburger.html">Home</a></li> + <li class="cbnav__item"><a class="cbnav__link--first cbnav__link--active" href="hamburger.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="hamburger.html">Contact</a></li> + </ul> + </li> + <li class="cbnav__item"><a class="cbnav__link--first" href="hamburger.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="hamburger.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="hamburger.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="hamburger.html">Braeburn</a></li> + <li class="cbnav__item"><a class="cbnav__link--sub" href="hamburger.html">Elstar</a></li> + <li class="cbnav__item"><a class="cbnav__link--sub" href="hamburger.html">Gala</a></li> + <li class="cbnav__item"><a class="cbnav__link--sub" href="hamburger.html">Golden Delicious</a></li> + </ul> + </li> + <li class="cbnav__item"><a class="cbnav__link--sub" href="hamburger.html">Bananas</a></li> + <li class="cbnav__item"><a class="cbnav__link--sub" href="hamburger.html">Pears</a></li> + </ul> + </li> + <li class="cbnav__item"><a class="cbnav__link--sub" href="hamburger.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="hamburger.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="hamburger.html">waxy</a></li> + <li class="cbnav__item"><a class="cbnav__link--sub" href="hamburger.html">predominantly waxy</a></li> + <li class="cbnav__item"><a class="cbnav__link--sub" href="hamburger.html">mealy</a></li> + </ul> + </li> + <li class="cbnav__item"><a class="cbnav__link--sub" href="hamburger.html">Carrots</a></li> + </ul> + </li> + </ul> + </li> + <li class="cbnav__item"><a class="cbnav__link--first" href="hamburger.html">Legal notice</a></li> + </ul> + <a href="hamburger.html"><img src="res/checkboxNav-logo-neg.svg" alt="logo" class="logo"></a> + </nav> + <!-- End markup for example navigation --> + + +</div> + +</body> +</html> \ No newline at end of file diff --git a/demo/res/checkboxNav-logo-neg.svg b/demo/res/checkboxNav-logo-neg.svg new file mode 100644 index 0000000..7617f65 --- /dev/null +++ b/demo/res/checkboxNav-logo-neg.svg @@ -0,0 +1,54 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> +<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" + width="100px" height="28px" viewBox="0 0 100 28" enable-background="new 0 0 100 28" xml:space="preserve"> +<g> + <g> + <path fill="#FFFFFF" d="M55.766,18.379L55.4,19.855c-1.096,0.426-1.969,0.752-2.621,0.977s-1.41,0.335-2.271,0.335 + c-1.316,0-2.34-0.325-3.069-0.976c-0.729-0.649-1.096-1.456-1.096-2.418c0-0.262,0.014-0.6,0.042-1.01 + c0.027-0.409,0.119-0.92,0.276-1.532l1.201-4.363c0.122-0.47,0.212-0.894,0.274-1.271c0.061-0.377,0.09-0.687,0.09-0.927 + c0-0.525-0.125-0.935-0.379-1.23c-0.255-0.295-0.684-0.442-1.289-0.442c-0.375,0-0.91,0.143-1.605,0.433 + c-0.693,0.291-1.47,0.829-2.329,1.616l-2.747,11.841h-5.473l2.355-10.086c0.065-0.305,0.151-0.705,0.255-1.197 + c0.105-0.491,0.159-0.902,0.159-1.23c0-0.622-0.13-1.051-0.391-1.286c-0.258-0.236-0.73-0.354-1.416-0.354 + c-0.354,0-0.716,0.055-1.087,0.164c-0.37,0.109-0.686,0.214-0.953,0.312l0.366-1.477c0.894-0.359,1.75-0.67,2.566-0.926 + c0.817-0.257,1.591-0.386,2.32-0.386c1.301,0,2.276,0.253,2.924,0.763c0.646,0.508,1.073,1.221,1.284,2.14h0.115 + c1.083-0.973,2.199-1.73,3.352-2.272c1.153-0.541,2.381-0.81,3.684-0.81c1.226,0,2.182,0.333,2.872,0.999 + c0.69,0.667,1.035,1.476,1.035,2.427c0,0.253-0.02,0.605-0.059,1.058c-0.038,0.454-0.129,0.938-0.272,1.451l-1.26,4.61 + c-0.111,0.382-0.21,0.821-0.299,1.312c-0.089,0.492-0.132,0.863-0.132,1.116c0,0.633,0.14,1.064,0.422,1.295 + c0.281,0.23,0.775,0.344,1.481,0.344c0.331,0,0.707-0.057,1.127-0.172C55.275,18.568,55.577,18.467,55.766,18.379z"/> + <path fill="#FFFFFF" d="M68.836,18.84h-0.132c-0.386,0.324-0.753,0.623-1.103,0.896c-0.348,0.271-0.786,0.541-1.316,0.814 + c-0.465,0.237-0.952,0.436-1.467,0.594s-1.08,0.236-1.697,0.236c-1.922,0-3.371-0.559-4.343-1.678 + c-0.971-1.12-1.456-2.654-1.456-4.598c0-1.496,0.269-2.9,0.812-4.211c0.542-1.31,1.266-2.463,2.171-3.458 + c0.916-0.982,1.988-1.761,3.214-2.334c1.228-0.572,2.52-0.859,3.878-0.859c0.994,0,1.864,0.114,2.61,0.343 + c0.743,0.23,1.356,0.542,1.831,0.936l5.08-1.035l0.231,0.264l-2.44,10.087c-0.088,0.339-0.182,0.762-0.28,1.27 + s-0.149,0.895-0.149,1.158c0,0.623,0.144,1.052,0.43,1.286c0.287,0.236,0.783,0.352,1.49,0.352c0.31,0,0.682-0.06,1.118-0.181 + c0.437-0.119,0.743-0.217,0.918-0.295l-0.362,1.477c-1.094,0.426-1.967,0.753-2.625,0.977c-0.655,0.224-1.413,0.336-2.273,0.336 + c-1.135,0-2.043-0.223-2.721-0.664C69.574,20.111,69.102,19.539,68.836,18.84z M70.809,8.438c0-0.241-0.035-0.525-0.101-0.852 + s-0.183-0.606-0.349-0.835c-0.197-0.285-0.458-0.5-0.777-0.648c-0.321-0.147-0.719-0.221-1.193-0.221 + c-0.729,0-1.401,0.26-2.014,0.779c-0.613,0.519-1.158,1.208-1.633,2.071c-0.465,0.852-0.83,1.843-1.095,2.973 + c-0.267,1.13-0.397,2.286-0.397,3.464c0,0.536,0.041,1.033,0.123,1.492c0.084,0.458,0.219,0.847,0.408,1.162 + c0.197,0.339,0.465,0.601,0.803,0.786s0.761,0.279,1.271,0.279c0.521,0,1.019-0.15,1.5-0.451s0.927-0.67,1.335-1.105L70.809,8.438 + z"/> + <path fill="#FFFFFF" d="M98.653,8.326c0,1.542-0.262,3.106-0.786,4.689c-0.524,1.586-1.261,2.99-2.211,4.216 + c-1.128,1.433-2.374,2.487-3.743,3.166c-1.369,0.678-2.793,1.017-4.272,1.017c-1.966,0-3.527-0.453-4.686-1.361 + s-1.738-2.212-1.738-3.909c0-0.524,0.088-1.089,0.264-1.691c0.176-0.602,0.398-1.308,0.663-2.117 + c0.222-0.69,0.427-1.371,0.62-2.045s0.289-1.311,0.289-1.914c0-0.59-0.131-1.011-0.396-1.263s-0.74-0.378-1.424-0.378 + c-0.353,0-0.716,0.055-1.084,0.164c-0.369,0.109-0.689,0.214-0.953,0.313l0.363-1.477c0.896-0.36,1.751-0.67,2.566-0.926 + c0.816-0.258,1.589-0.386,2.317-0.386c1.314,0,2.327,0.326,3.038,0.977c0.711,0.652,1.067,1.459,1.067,2.423 + c0,0.711-0.097,1.466-0.29,2.265c-0.193,0.8-0.394,1.517-0.603,2.152c-0.188,0.568-0.384,1.223-0.588,1.961 + c-0.204,0.74-0.306,1.327-0.306,1.765c0,0.932,0.227,1.676,0.68,2.234c0.452,0.557,1.182,0.838,2.186,0.838 + c1.501,0,2.805-0.557,3.908-1.665c1.104-1.11,1.659-2.605,1.659-4.487c0-0.185-0.013-0.387-0.036-0.606 + c-0.021-0.218-0.064-0.465-0.133-0.737c-0.121-0.252-0.358-0.519-0.712-0.804c-0.354-0.285-0.65-0.547-0.893-0.788 + c-0.324-0.316-0.604-0.691-0.847-1.123c-0.243-0.432-0.363-0.992-0.363-1.682c0-0.578,0.114-1.049,0.34-1.41 + c0.226-0.36,0.498-0.655,0.82-0.885c0.264-0.186,0.581-0.334,0.951-0.444c0.37-0.109,0.716-0.163,1.033-0.163 + c1.028,0,1.833,0.363,2.419,1.09C98.359,6.059,98.653,7.057,98.653,8.326z"/> + </g> + <g> + <rect x="34.25" y="24.689" fill="#FFFFFF" width="64.75" height="2.311"/> + </g> + <path fill="#FFFFFF" d="M27.25,6.246C27.25,3.349,24.878,1,21.952,1H6.297C3.372,1,1,3.349,1,6.246v15.508 + C1,24.651,3.372,27,6.297,27h15.655c2.926,0,5.298-2.349,5.298-5.246V6.246z M13.497,21.724L9.61,18.965l0.001-0.001l-5.051-3.585 + l2.784-3.849l5.052,3.585l6.962-9.621l3.886,2.759L13.497,21.724z"/> +</g> +</svg> diff --git a/demo/res/checkboxNav-logo-pos.svg b/demo/res/checkboxNav-logo-pos.svg new file mode 100644 index 0000000..96c24b4 --- /dev/null +++ b/demo/res/checkboxNav-logo-pos.svg @@ -0,0 +1,54 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> +<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" + width="100px" height="28px" viewBox="0 0 100 28" enable-background="new 0 0 100 28" xml:space="preserve"> +<g> + <g> + <path fill="#666666" d="M55.766,18.379L55.4,19.855c-1.096,0.426-1.969,0.752-2.621,0.977s-1.41,0.335-2.271,0.335 + c-1.316,0-2.34-0.325-3.069-0.976c-0.729-0.649-1.096-1.456-1.096-2.418c0-0.262,0.014-0.6,0.042-1.01 + c0.027-0.409,0.119-0.92,0.276-1.532l1.201-4.363c0.122-0.47,0.212-0.894,0.274-1.271c0.061-0.377,0.09-0.687,0.09-0.927 + c0-0.525-0.125-0.935-0.379-1.23c-0.255-0.295-0.684-0.442-1.289-0.442c-0.375,0-0.91,0.143-1.605,0.433 + c-0.693,0.291-1.47,0.829-2.329,1.616l-2.747,11.841h-5.473l2.355-10.086c0.065-0.305,0.151-0.705,0.255-1.197 + c0.105-0.491,0.159-0.902,0.159-1.23c0-0.622-0.13-1.051-0.391-1.286c-0.258-0.236-0.73-0.354-1.416-0.354 + c-0.354,0-0.716,0.055-1.087,0.164c-0.37,0.109-0.686,0.214-0.953,0.312l0.366-1.477c0.894-0.359,1.75-0.67,2.566-0.926 + c0.817-0.257,1.591-0.386,2.32-0.386c1.301,0,2.276,0.253,2.924,0.763c0.646,0.508,1.073,1.221,1.284,2.14h0.115 + c1.083-0.973,2.199-1.73,3.352-2.272c1.153-0.541,2.381-0.81,3.684-0.81c1.226,0,2.182,0.333,2.872,0.999 + c0.69,0.667,1.035,1.476,1.035,2.427c0,0.253-0.02,0.605-0.059,1.058c-0.038,0.454-0.129,0.938-0.272,1.451l-1.26,4.61 + c-0.111,0.382-0.21,0.821-0.299,1.312c-0.089,0.492-0.132,0.863-0.132,1.116c0,0.633,0.14,1.064,0.422,1.295 + c0.281,0.23,0.775,0.344,1.481,0.344c0.331,0,0.707-0.057,1.127-0.172C55.275,18.568,55.577,18.467,55.766,18.379z"/> + <path fill="#666666" d="M68.836,18.84h-0.132c-0.386,0.324-0.753,0.623-1.103,0.896c-0.348,0.271-0.786,0.541-1.316,0.814 + c-0.465,0.237-0.952,0.436-1.467,0.594s-1.08,0.236-1.697,0.236c-1.922,0-3.371-0.559-4.343-1.678 + c-0.971-1.12-1.456-2.654-1.456-4.598c0-1.496,0.269-2.9,0.812-4.211c0.542-1.31,1.266-2.463,2.171-3.458 + c0.916-0.982,1.988-1.761,3.214-2.334c1.228-0.572,2.52-0.859,3.878-0.859c0.994,0,1.864,0.114,2.61,0.343 + c0.743,0.23,1.356,0.542,1.831,0.936l5.08-1.035l0.231,0.264l-2.44,10.087c-0.088,0.339-0.182,0.762-0.28,1.27 + s-0.149,0.895-0.149,1.158c0,0.623,0.144,1.052,0.43,1.286c0.287,0.236,0.783,0.352,1.49,0.352c0.31,0,0.682-0.06,1.118-0.181 + c0.437-0.119,0.743-0.217,0.918-0.295l-0.362,1.477c-1.094,0.426-1.967,0.753-2.625,0.977c-0.655,0.224-1.413,0.336-2.273,0.336 + c-1.135,0-2.043-0.223-2.721-0.664C69.574,20.111,69.102,19.539,68.836,18.84z M70.809,8.438c0-0.241-0.035-0.525-0.101-0.852 + s-0.183-0.606-0.349-0.835c-0.197-0.285-0.458-0.5-0.777-0.648c-0.321-0.147-0.719-0.221-1.193-0.221 + c-0.729,0-1.401,0.26-2.014,0.779c-0.613,0.519-1.158,1.208-1.633,2.071c-0.465,0.852-0.83,1.843-1.095,2.973 + c-0.267,1.13-0.397,2.286-0.397,3.464c0,0.536,0.041,1.033,0.123,1.492c0.084,0.458,0.219,0.847,0.408,1.162 + c0.197,0.339,0.465,0.601,0.803,0.786s0.761,0.279,1.271,0.279c0.521,0,1.019-0.15,1.5-0.451s0.927-0.67,1.335-1.105L70.809,8.438 + z"/> + <path fill="#666666" d="M98.653,8.326c0,1.542-0.262,3.106-0.786,4.689c-0.524,1.586-1.261,2.99-2.211,4.216 + c-1.128,1.433-2.374,2.487-3.743,3.166c-1.369,0.678-2.793,1.017-4.272,1.017c-1.966,0-3.527-0.453-4.686-1.361 + s-1.738-2.212-1.738-3.909c0-0.524,0.088-1.089,0.264-1.691c0.176-0.602,0.398-1.308,0.663-2.117 + c0.222-0.69,0.427-1.371,0.62-2.045s0.289-1.311,0.289-1.914c0-0.59-0.131-1.011-0.396-1.263s-0.74-0.378-1.424-0.378 + c-0.353,0-0.716,0.055-1.084,0.164c-0.369,0.109-0.689,0.214-0.953,0.313l0.363-1.477c0.896-0.36,1.751-0.67,2.566-0.926 + c0.816-0.258,1.589-0.386,2.317-0.386c1.314,0,2.327,0.326,3.038,0.977c0.711,0.652,1.067,1.459,1.067,2.423 + c0,0.711-0.097,1.466-0.29,2.265c-0.193,0.8-0.394,1.517-0.603,2.152c-0.188,0.568-0.384,1.223-0.588,1.961 + c-0.204,0.74-0.306,1.327-0.306,1.765c0,0.932,0.227,1.676,0.68,2.234c0.452,0.557,1.182,0.838,2.186,0.838 + c1.501,0,2.805-0.557,3.908-1.665c1.104-1.11,1.659-2.605,1.659-4.487c0-0.185-0.013-0.387-0.036-0.606 + c-0.021-0.218-0.064-0.465-0.133-0.737c-0.121-0.252-0.358-0.519-0.712-0.804c-0.354-0.285-0.65-0.547-0.893-0.788 + c-0.324-0.316-0.604-0.691-0.847-1.123c-0.243-0.432-0.363-0.992-0.363-1.682c0-0.578,0.114-1.049,0.34-1.41 + c0.226-0.36,0.498-0.655,0.82-0.885c0.264-0.186,0.581-0.334,0.951-0.444c0.37-0.109,0.716-0.163,1.033-0.163 + c1.028,0,1.833,0.363,2.419,1.09C98.359,6.059,98.653,7.057,98.653,8.326z"/> + </g> + <g> + <rect x="34.25" y="24.689" fill="#666666" width="64.75" height="2.311"/> + </g> + <path fill="#666666" d="M27.25,6.246C27.25,3.349,24.878,1,21.952,1H6.297C3.372,1,1,3.349,1,6.246v15.508 + C1,24.651,3.372,27,6.297,27h15.655c2.926,0,5.298-2.349,5.298-5.246V6.246z M13.497,21.724L9.61,18.965l0.001-0.001l-5.051-3.585 + l2.784-3.849l5.052,3.585l6.962-9.621l3.886,2.759L13.497,21.724z"/> +</g> +</svg> diff --git a/src/_checkboxNav.menu.scss b/src/_checkboxNav.menu.scss new file mode 100644 index 0000000..3fc5e34 --- /dev/null +++ b/src/_checkboxNav.menu.scss @@ -0,0 +1,275 @@ +/** + * MENU TOGGLE TYPE + */ +@if $cbn-toggle-type == bar { + #toggle-menu { + background-color: $cbn-color-toggle; + color: $cbn-color-text-first; + display: block; + padding: $cbn-padding-menuitem-sub; + position: relative; + } +} @else if $cbn-toggle-type == hamburger { + #toggle-menu { + background: center center no-repeat transparent; + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAXCAQAAAC/3ZebAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA82lDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjardA/SgNBHMXx70TULloE67mAgmu15eQPi2ARYopsqkxmBw1hd4fZn3/2Bh7B43iDFIIXUVJbqARLwU/1eM2DB+rZDPujzjGUlcRsYvJZPteHGw7YAwDrmmDG4yuAqq48vynYvqEAXk/NsD/ib/ZdiAK8AEnhGwd8AKsHCQJqAfSW6yCgBOitp5MBqCegK/5RAAZ1aOPq5lb0eZqm2hT10uvrthFfNvqycnUMdbTiC+B7A+Aoi7bVmS1Lq5OzhH83y+f6K71PUYA62ey6HXcX73/+7FzAJ0sbODDOTdGSAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAC/SURBVHjavJNLDoQwDEOfIw7L/S/gWRRKW4xGzGIqgUKCm49j7QYwAgzosPNpsTJA/03H4weQMFCaXLP1BK3nkIPVriumDjy8NRTtCbwhh9DVqW/X6RxEc7i7mTKyzFPm/akfMGg3gU73jhTo3Vh60I3slV4aaGx5XZnEX10TyxAH8ktD/SmLbvnEZs1bzuPKqvsq7ZfjEAaq/0suX5S6ftV7yAHKckvb3lirJPNVkuoUC+GzPEeZa9CThoyfAQDQ6Epi+uUd3gAAAABJRU5ErkJggg=='); + display: block; + width: 40px; + height: 40px; + + } +} + + + + +/** + * MENU ARROWS + */ +.cbnav__arrow { + border-right: $cbn-size-arrow solid transparent; + border-left: $cbn-size-arrow solid transparent; + border-top: $cbn-size-arrow solid $cbn-color-arrow; + display: inline-block; + vertical-align: middle; + height: 0; + width: 0; +} + + +.cbnav__arrow--sub { + border-top: $cbn-size-arrow solid $cbn-color-arrow; + border-left: $cbn-size-arrow solid transparent; + border-right: $cbn-size-arrow solid transparent; + display: inline-block; + vertical-align: middle; + height: 0; + width: 0; + + + // Change arrow direction + @media (min-width: $cbn-mediaquery) { + border-right: none; + border-bottom: $cbn-size-arrow solid transparent; + border-top: $cbn-size-arrow solid transparent; + border-left: $cbn-size-arrow solid $cbn-color-arrow; + } +} + + + + +/** + * MOBILE VIEW + */ +.cbnav__lvl--first { + background-color: $cbn-color-link-sub; + + + &::after { + clear: both; + content: ""; + display: table; + } +} + + +.cbnav__lvl--first, +.cbnav__lvl--sub { + margin: 0; + padding: 0; +} + + +.cbnav__lvl--first, +.cbnav input[type="checkbox"] { + display: none; +} + + +#toggle:checked + .cbnav__lvl--first, +.cbnav input[type="checkbox"]:checked + .cbnav__lvl--sub { + display: block; +} + + +.cbnav__item { + color: $cbn-color-text-first; + display: block; + position: relative; + + + a { + display: block; + position: relative; + text-decoration: none; + + &:hover, + &:focus { + text-decoration: none; + } + } +} + + +.cbnav__link--first { + // use sublevel colors here to have a consistent design in mobile view + background-color: $cbn-color-link-sub; + color: $cbn-color-text-sub; + padding: $cbn-padding-menuitem-sub; + padding-right: $cbn-size-arrow*7; + + &:hover { + background-color: $cbn-color-link-sub-hover; + color: $cbn-color-text-sub-hover; + } +} + + +.cbnav__lvl--sub { + display: none; + padding-left: 1em; +} + + +.cbnav__link--sub { + background-color: $cbn-color-link-sub; + color: $cbn-color-text-sub; + padding: $cbn-padding-menuitem-sub; + padding-right: $cbn-size-arrow*7; + + + &:hover { + background-color: $cbn-color-link-sub-hover; + color: $cbn-color-text-sub-hover; + } +} + + +.cbnav__link--active { + background-color: $cbn-color-link-active; + color: $cbn-color-text-active; + padding: $cbn-padding-menuitem-sub; + padding-right: $cbn-size-arrow*7; +} + + +ul span.cbnav__label { + display: none; +} + + + + +/** + * DESKTOP VIEW + */ +@media only screen and (min-width: $cbn-mediaquery) { + .cbnav { + background-color: $cbn-color-link-first; + } + + .cbnav__lvl--first { + background-color: transparent; + } + + + #toggle-menu, + //.cbnav__label, + .cbnav input[type="checkbox"]:checked + .cbnav__lvl--sub { + display: none; + } + + + .cbnav__lvl--first, + .cbnav__item:hover > input[type="checkbox"] + .cbnav__lvl--sub { + display: block; + } + + + .cbnav__item { + float: left; + } + + + .cbnav__link--first { + background-color: $cbn-color-link-first; + color: $cbn-color-text-first; + padding: $cbn-padding-menuitem-first; + padding-right: $cbn-size-arrow*7; + + + &:hover { + background-color: $cbn-color-link-first-hover; + color: $cbn-color-text-first-hover; + } + } + + + .cbnav__link--active { + background-color: $cbn-color-link-active; + color: $cbn-color-text-active; + } + + + .cbnav__lvl--sub { + display: none; + margin: 0; + padding: 0; + position: absolute; + top: 100%; + left: 0; + width: $cbn-width-menuitem-sub; + z-index: 3000; + + + .cbnav__item { + float: none; + } + + + .cbnav__lvl--sub { + top: 0; + left: 100%; + } + } +} + + + + +/** + * LABELS + */ +.cbnav__label { + // required to vertically center the arrow: + &:before { + content: ''; + display: inline-block; + height: 100%; + vertical-align: middle; + } +} + + +@if $cbn-label-type == box { + .cbnav__label { + background-color: $cbn-color-label; + height: 100%; + padding: 0 .5em; + position: absolute; + right: 0; + top: 0; + } +} @else if $cbn-label-type == circle { + .cbnav__label { + background-color: $cbn-color-label; + border-radius: 50%; + height: $cbn-size-arrow*4; + text-align: center; + position: absolute; + right: $cbn-size-arrow*2; + top: $cbn-size-arrow*1.5; + width: $cbn-size-arrow*4; + } +} \ No newline at end of file diff --git a/src/_checkboxNav.vars.scss b/src/_checkboxNav.vars.scss new file mode 100644 index 0000000..091a4aa --- /dev/null +++ b/src/_checkboxNav.vars.scss @@ -0,0 +1,54 @@ +/** + * MENU TOGGLE TYPE + * + * Use a Hamburger Icon or a Navigation bar. + * Please note the slightly different HTML markup (demos). + * + */ +$cbn-toggle-type: bar; // 'hamburger' or 'bar' + + +/** + * LABEL FORM + */ +$cbn-label-type: box; // 'box' or 'circle' + + +/** + * COLORS + * + * You can assign different colors to the first level and the sublevels, + * e.g. a transparent bar and colored sublevels (see hamburger demo). + */ +/* first menu level */ +$cbn-color-link-first: #ddd; +$cbn-color-text-first: #444; +$cbn-color-link-first-hover: #aaa; +$cbn-color-text-first-hover: #000; + +/* menu sublevels */ +$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; + +/* active page */ +$cbn-color-link-active: #999; +$cbn-color-text-active: #eee; + +/* miscellaneous */ +$cbn-color-label: #666; +$cbn-color-arrow: #fff; +$cbn-color-toggle: $cbn-color-link-first; // only for bar! + + +/** + * MEASURES + */ +$cbn-padding-menuitem-first: .75em 1em; +$cbn-padding-menuitem-sub: $cbn-padding-menuitem-first; + +$cbn-width-menuitem-sub: 12em; +$cbn-size-arrow: 6px; + +$cbn-mediaquery: 768px; diff --git a/src/demo.bar.scss b/src/demo.bar.scss new file mode 100644 index 0000000..367cc0b --- /dev/null +++ b/src/demo.bar.scss @@ -0,0 +1,23 @@ +@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"; \ No newline at end of file diff --git a/src/demo.default.scss b/src/demo.default.scss new file mode 100644 index 0000000..884dbbb --- /dev/null +++ b/src/demo.default.scss @@ -0,0 +1,2 @@ +@import "_checkboxNav.vars"; +@import "checkboxNav.menu"; diff --git a/src/demo.hamburger.scss b/src/demo.hamburger.scss new file mode 100644 index 0000000..17b1799 --- /dev/null +++ b/src/demo.hamburger.scss @@ -0,0 +1,31 @@ +@import "_checkboxNav.vars"; + + +// override default values: +$cbn-toggle-type: hamburger; // 'hamburger' or 'bar' +$cbn-label-type: circle; // 'box' or 'circle' + +$cbn-color-link-first: transparent; +$cbn-color-text-first: #cbeeff; +$cbn-color-link-first-hover: transparent; +$cbn-color-text-first-hover: #fff; + +$cbn-color-link-sub: transparent; +$cbn-color-text-sub: #cbeeff; +$cbn-color-link-sub-hover: rgba(255, 255, 255, 0.15); +$cbn-color-text-sub-hover: #fff; + +$cbn-color-link-active: inherit; +$cbn-color-text-active: #fff; + +$cbn-color-label: #0e2245; +$cbn-color-arrow: #cbeeff; +$cbn-color-toggle: $cbn-color-link-first; // only for bar! + +$cbn-padding-menuitem-first: 0 1em .25em; +$cbn-padding-menuitem-sub: .5em 1em; +$cbn-size-arrow: 5px; + + +@import "checkboxNav.menu"; +@import "themes/theme.hamburger"; \ No newline at end of file diff --git a/src/themes/_theme.bar.scss b/src/themes/_theme.bar.scss new file mode 100644 index 0000000..c86ecd6 --- /dev/null +++ b/src/themes/_theme.bar.scss @@ -0,0 +1,55 @@ +$custom-borders: 1px solid $cbn-color-link-active; + + + + +.cbnav { + border-bottom: $custom-borders; +} + + +#toggle-menu { + border-bottom: $custom-borders; +} + + +.cbnav__lvl--sub { + border-top: $custom-borders; + + + .cbnav__item:last-child { + border-width: 0; + } +} + + +.cbnav__item { + border-bottom: $custom-borders; +} + + +.cbnav__item a { + transition: all .125s ease-in-out; + -webkit-transition: all .125s ease-in-out; +} + + + + +@media only screen and (min-width: $cbn-mediaquery) { + .cbnav__item { + border-width: 0 1px 0 0; + } + + + .cbnav__lvl--sub { + border-width: 0; + } + + + .cbnav__lvl--sub { + .cbnav__item { + border-width: 0 0 1px; + } + } +} \ No newline at end of file diff --git a/src/themes/_theme.hamburger.scss b/src/themes/_theme.hamburger.scss new file mode 100644 index 0000000..db91241 --- /dev/null +++ b/src/themes/_theme.hamburger.scss @@ -0,0 +1,58 @@ +#toggle-menu { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAXCAYAAAAV1F8QAAAACXBIWXMAAAsTAAALEwEAmpwYAAAKT2lDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjanVNnVFPpFj333vRCS4iAlEtvUhUIIFJCi4AUkSYqIQkQSoghodkVUcERRUUEG8igiAOOjoCMFVEsDIoK2AfkIaKOg6OIisr74Xuja9a89+bN/rXXPues852zzwfACAyWSDNRNYAMqUIeEeCDx8TG4eQuQIEKJHAAEAizZCFz/SMBAPh+PDwrIsAHvgABeNMLCADATZvAMByH/w/qQplcAYCEAcB0kThLCIAUAEB6jkKmAEBGAYCdmCZTAKAEAGDLY2LjAFAtAGAnf+bTAICd+Jl7AQBblCEVAaCRACATZYhEAGg7AKzPVopFAFgwABRmS8Q5ANgtADBJV2ZIALC3AMDOEAuyAAgMADBRiIUpAAR7AGDIIyN4AISZABRG8lc88SuuEOcqAAB4mbI8uSQ5RYFbCC1xB1dXLh4ozkkXKxQ2YQJhmkAuwnmZGTKBNA/g88wAAKCRFRHgg/P9eM4Ors7ONo62Dl8t6r8G/yJiYuP+5c+rcEAAAOF0ftH+LC+zGoA7BoBt/qIl7gRoXgugdfeLZrIPQLUAoOnaV/Nw+H48PEWhkLnZ2eXk5NhKxEJbYcpXff5nwl/AV/1s+X48/Pf14L7iJIEyXYFHBPjgwsz0TKUcz5IJhGLc5o9H/LcL//wd0yLESWK5WCoU41EScY5EmozzMqUiiUKSKcUl0v9k4t8s+wM+3zUAsGo+AXuRLahdYwP2SycQWHTA4vcAAPK7b8HUKAgDgGiD4c93/+8//UegJQCAZkmScQAAXkQkLlTKsz/HCAAARKCBKrBBG/TBGCzABhzBBdzBC/xgNoRCJMTCQhBCCmSAHHJgKayCQiiGzbAdKmAv1EAdNMBRaIaTcA4uwlW4Dj1wD/phCJ7BKLyBCQRByAgTYSHaiAFiilgjjggXmYX4IcFIBBKLJCDJiBRRIkuRNUgxUopUIFVIHfI9cgI5h1xGupE7yAAygvyGvEcxlIGyUT3UDLVDuag3GoRGogvQZHQxmo8WoJvQcrQaPYw2oefQq2gP2o8+Q8cwwOgYBzPEbDAuxsNCsTgsCZNjy7EirAyrxhqwVqwDu4n1Y8+xdwQSgUXACTYEd0IgYR5BSFhMWE7YSKggHCQ0EdoJNwkDhFHCJyKTqEu0JroR+cQYYjIxh1hILCPWEo8TLxB7iEPENyQSiUMyJ7mQAkmxpFTSEtJG0m5SI+ksqZs0SBojk8naZGuyBzmULCAryIXkneTD5DPkG+Qh8lsKnWJAcaT4U+IoUspqShnlEOU05QZlmDJBVaOaUt2ooVQRNY9aQq2htlKvUYeoEzR1mjnNgxZJS6WtopXTGmgXaPdpr+h0uhHdlR5Ol9BX0svpR+iX6AP0dwwNhhWDx4hnKBmbGAcYZxl3GK+YTKYZ04sZx1QwNzHrmOeZD5lvVVgqtip8FZHKCpVKlSaVGyovVKmqpqreqgtV81XLVI+pXlN9rkZVM1PjqQnUlqtVqp1Q61MbU2epO6iHqmeob1Q/pH5Z/YkGWcNMw09DpFGgsV/jvMYgC2MZs3gsIWsNq4Z1gTXEJrHN2Xx2KruY/R27iz2qqaE5QzNKM1ezUvOUZj8H45hx+Jx0TgnnKKeX836K3hTvKeIpG6Y0TLkxZVxrqpaXllirSKtRq0frvTau7aedpr1Fu1n7gQ5Bx0onXCdHZ4/OBZ3nU9lT3acKpxZNPTr1ri6qa6UbobtEd79up+6Ynr5egJ5Mb6feeb3n+hx9L/1U/W36p/VHDFgGswwkBtsMzhg8xTVxbzwdL8fb8VFDXcNAQ6VhlWGX4YSRudE8o9VGjUYPjGnGXOMk423GbcajJgYmISZLTepN7ppSTbmmKaY7TDtMx83MzaLN1pk1mz0x1zLnm+eb15vft2BaeFostqi2uGVJsuRaplnutrxuhVo5WaVYVVpds0atna0l1rutu6cRp7lOk06rntZnw7Dxtsm2qbcZsOXYBtuutm22fWFnYhdnt8Wuw+6TvZN9un2N/T0HDYfZDqsdWh1+c7RyFDpWOt6azpzuP33F9JbpL2dYzxDP2DPjthPLKcRpnVOb00dnF2e5c4PziIuJS4LLLpc+Lpsbxt3IveRKdPVxXeF60vWdm7Obwu2o26/uNu5p7ofcn8w0nymeWTNz0MPIQ+BR5dE/C5+VMGvfrH5PQ0+BZ7XnIy9jL5FXrdewt6V3qvdh7xc+9j5yn+M+4zw33jLeWV/MN8C3yLfLT8Nvnl+F30N/I/9k/3r/0QCngCUBZwOJgUGBWwL7+Hp8Ib+OPzrbZfay2e1BjKC5QRVBj4KtguXBrSFoyOyQrSH355jOkc5pDoVQfujW0Adh5mGLw34MJ4WHhVeGP45wiFga0TGXNXfR3ENz30T6RJZE3ptnMU85ry1KNSo+qi5qPNo3ujS6P8YuZlnM1VidWElsSxw5LiquNm5svt/87fOH4p3iC+N7F5gvyF1weaHOwvSFpxapLhIsOpZATIhOOJTwQRAqqBaMJfITdyWOCnnCHcJnIi/RNtGI2ENcKh5O8kgqTXqS7JG8NXkkxTOlLOW5hCepkLxMDUzdmzqeFpp2IG0yPTq9MYOSkZBxQqohTZO2Z+pn5mZ2y6xlhbL+xW6Lty8elQfJa7OQrAVZLQq2QqboVFoo1yoHsmdlV2a/zYnKOZarnivN7cyzytuQN5zvn//tEsIS4ZK2pYZLVy0dWOa9rGo5sjxxedsK4xUFK4ZWBqw8uIq2Km3VT6vtV5eufr0mek1rgV7ByoLBtQFr6wtVCuWFfevc1+1dT1gvWd+1YfqGnRs+FYmKrhTbF5cVf9go3HjlG4dvyr+Z3JS0qavEuWTPZtJm6ebeLZ5bDpaql+aXDm4N2dq0Dd9WtO319kXbL5fNKNu7g7ZDuaO/PLi8ZafJzs07P1SkVPRU+lQ27tLdtWHX+G7R7ht7vPY07NXbW7z3/T7JvttVAVVN1WbVZftJ+7P3P66Jqun4lvttXa1ObXHtxwPSA/0HIw6217nU1R3SPVRSj9Yr60cOxx++/p3vdy0NNg1VjZzG4iNwRHnk6fcJ3/ceDTradox7rOEH0x92HWcdL2pCmvKaRptTmvtbYlu6T8w+0dbq3nr8R9sfD5w0PFl5SvNUyWna6YLTk2fyz4ydlZ19fi753GDborZ752PO32oPb++6EHTh0kX/i+c7vDvOXPK4dPKy2+UTV7hXmq86X23qdOo8/pPTT8e7nLuarrlca7nuer21e2b36RueN87d9L158Rb/1tWeOT3dvfN6b/fF9/XfFt1+cif9zsu72Xcn7q28T7xf9EDtQdlD3YfVP1v+3Njv3H9qwHeg89HcR/cGhYPP/pH1jw9DBY+Zj8uGDYbrnjg+OTniP3L96fynQ89kzyaeF/6i/suuFxYvfvjV69fO0ZjRoZfyl5O/bXyl/erA6xmv28bCxh6+yXgzMV70VvvtwXfcdx3vo98PT+R8IH8o/2j5sfVT0Kf7kxmTk/8EA5jz/GMzLdsAAAAgY0hSTQAAeiUAAICDAAD5/wAAgOkAAHUwAADqYAAAOpgAABdvkl/FRgAAAH1JREFUeNrslDsKwDAMQ2XTu4bcf5c7lJR8HFo6eCjWFByBCNaLmJkhQIogZdBnSa0VJMd01XvWn2cPAPfO86pnJIlWxj5w9syhs2d4UVC743Z0AEhgM+iqdyllC+ub+Q7Q5RPwYPVEEiKygNlmTzAnsFnvHwedAAAA//8DAL2WO4lNCkTNAAAAAElFTkSuQmCC'); +} + + +.cbnav__lvl--first { + background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0, rgba(220, 235, 251, 0.1)), color-stop(1, rgba(171, 183, 214, 0.4))); + background-image: -webkit-linear-gradient(-90deg, rgba(220, 235, 251, 0.1) 0%, rgba(171, 183, 214, 0.4) 100%); + background-image: linear-gradient(180deg, rgba(220, 235, 251, 0.1) 0%, rgba(171, 183, 214, 0.4) 100%); +} + + +.cbnav__item a { + transition: all .125s ease-in-out; + -webkit-transition: all .125s ease-in-out; +} + + +.cbnav__arrow, +.cbnav__arrow--sub { + margin-bottom: 5px; // vertical-align isn't working for arrows smaller than 6px +} + + +.cbnav__link--active { + font-weight: 700; +} + + + + +@media only screen and (min-width: $cbn-mediaquery) { + .cbnav__lvl--first { background: transparent; } + .cbnav__lvl--first > li > a { + padding: $cbn-padding-menuitem-first; + + + .cbnav__label { + background-color: transparent; + position: relative; + top: auto; + right: auto; + } + } + + + .cbnav__lvl--sub { + background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0, rgba(220, 235, 251, 0.1)), color-stop(1, rgba(171, 183, 214, 0.4))); + background-image: -webkit-linear-gradient(-90deg, rgba(220, 235, 251, 0.1) 0%, rgba(171, 183, 214, 0.4) 100%); + background-image: linear-gradient(180deg, rgba(220, 235, 251, 0.1) 0%, rgba(171, 183, 214, 0.4) 100%); + + + .cbnav__link--active { + background-color: $cbn-color-link-sub-hover; + color: #fff; + } + } +} \ No newline at end of file