Skip to content

Commit

Permalink
v2
Browse files Browse the repository at this point in the history
  • Loading branch information
Nick Salloum committed Jul 4, 2016
1 parent 58647d8 commit 862540b
Show file tree
Hide file tree
Showing 19 changed files with 587 additions and 665 deletions.
1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
node_modules
202 changes: 76 additions & 126 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,161 +4,111 @@ My circular fly-out CSS navigation menu component, built with CSS3. [View the de

![Circle fly out menu](css-circle-menu-featured.png)

## Component Configuration & Compilation
## Usage

The component makes heavy use of Sass, and also some Compass math helper functions. Sass is compiled via Gulp, and using Sass makes the component easily configurable. The menu items fly out along a quarter-circle with a given spread radius, so basic trigonometry and polar-to-cartesian math make calculating positions much easier, hence the use of Compass helpers. The general workflow for the compilation of the CSS is this:

1. Ruby Sass with Compass gets used via Gulp for pre-processing and helper functions.
2. Compiled CSS gets auto-prefixed via the Gulp autoprefixer post-processor module.
3. Re-compiled CSS gets saved, and a separate minified version also gets saved.

## Component Customisation

Using the Gulp workflow is hugely beneficial, because it makes the component much easier to work with and customise. If you're not using Gulp to compile the Sass, you will still need to leverage Compass to make use of the math helper functions. The following 11 variables are configurable in the Sass up front, and their defaults are written out for you to look at:

```scss
// $nav-item-radius: 48px; [1]
// $num-items: 5; [2]
// $nav-theme-color: rgb(255, 40, 60); [3]
// $spread-radius: 144px; [4]
// $delay-increment: 0.1s; [5]
// $nav-position: "bottom-right"; [6]
// $mq-height: 480px; [7]
// $mq-width: 480px; [8]
// $button-bar-height: 4px; [9]
// $button-bar-spacing: 4px; [10]
// $button-lr-padding: 10px; [11]
```

You can edit these as you see fit. Here's the breakdown of these 11 configuration options:

1. Set up the initial navigation item radius.
2. Decalare how many items our nav will contain.
3. Set up a theme colour.
4. The spread radius, which is how far the nav items spread from the origin.
5. The delay increment, which is how much delay there is between each nav item leaving from / returning to the origin.
6. The position of the nav, chosen from one of four values:
1. `bottom-right` - bottom right corner (this is the default)
2. `bottom-left` - bottom left corner
3. `top-left` - top left corner
4. `top-right` - top right corner
7. Minimum height at which nav increases size.
8. Minimum width at which nav increases size.
9. The height of a bar in the toggle button.
10. The spacing between bars in the toggle button.
11. The padding between the left and right of the toggle button container and the bars.

Other variables will have to be customised further down in the Sass with your own discretion.

## Example Markup

You'll have to markup the menu like this:
To use, include the CSS and JavaScript in your app. Markup your menu like this:

```html
<nav id="c-circle-nav" class="c-circle-nav">
<button id="c-circle-nav__toggle" class="c-circle-nav__toggle">
<nav class="c-circle-menu js-menu">
<button class="c-circle-menu__toggle js-menu-toggle">
<span>Toggle</span>
</button>
<ul class="c-circle-nav__items">
<li class="c-circle-nav__item">
<a href="#" class="c-circle-nav__link">
<ul class="c-circle-menu__items">
<li class="c-circle-menu__item">
<a href="#" class="c-circle-menu__link">
<img src="path/to/icon" alt="">
</a>
</li>
<!-- more items here -->
</ul>
<div class="c-circle-menu__mask js-menu-mask"></div>
</nav>
```

Be sure to change up the Sass variable that defines the number of navigation items.

## Activation With JavaScript

A simple click event is used to activate the menu. This is handled via JavaScript, and just runs a simple check for the existence of an `is-active` class on the elements. A mask is also created via JavaScript, and faded in and out over the content depending on whether the menu is active or not. Here's the JavaScript:

```javascript
(function() {

"use strict";

/**
* Cache variables
*/
var menu = document.querySelector("#c-circle-nav");
var toggle = document.querySelector("#c-circle-nav__toggle");
var mask = document.createElement("div");
var activeClass = "is-active";

/**
* Create mask
*/
mask.classList.add("c-mask");
document.body.appendChild(mask);

/**
* Listen for clicks on the toggle
*/
toggle.addEventListener("click", function(e) {
e.preventDefault();
toggle.classList.contains(activeClass) ? deactivateMenu() : activateMenu();
});

/**
* Listen for clicks on the mask, which should close the menu
*/
mask.addEventListener("click", function() {
deactivateMenu();
console.log('click');
});

/**
* Activate the menu
*/
function activateMenu() {
menu.classList.add(activeClass);
toggle.classList.add(activeClass);
mask.classList.add(activeClass);
}

/**
* Deactivate the menu
*/
function deactivateMenu() {
menu.classList.remove(activeClass);
toggle.classList.remove(activeClass);
mask.classList.remove(activeClass);
}

})();
Then, include your script like this:

```html
<script src="path/to/circleMenu.min.js"></script>
```

Finally, you can initialize the menu like this:

```html
<script>
var el = '.js-menu';
var myMenu = cssCircleMenu(el);
</script>
```

The styles for the mask are already included in the Sass, so we're only interested in creating it and appending it to the body. I'm also using the modern `classList` function for class checking, adding, and removing, so if older browsers are on your radar, you'll have to work with some kind of fallback.
The default number of menu items is 5. To use a different number of items, you'll have to [configure and build with Sass and Gulp.](#configuring-and-building-with-sass-and-gulp)

## Using Out Of The Box
### Out of the box usage

If you're not using Gulp and Sass, fear not. You can get the compiled CSS in the `css/` directory, and use it out of the box. By default, it's positioned in the bottom right corner, and has a theme colour of pink. You can customise values here, but certain things like the positioning will be difficult, as they are calculated via trigonometric functions directly in Sass via Compass helpers. Changing the number of menu items will also be difficult, as item position is directly related to the number of items. Nonetheless, you'll be able to tweak colours and positioning fairly easily to suit your needs.
You can use this component out of the box by downloading the uncompressed or compressed files from the `css/` directory.

## Use As A Bower Package
### Use as a Bower component

The component is available as a bower package, and you can import it by running the following command:

```bash
```
bower install css-circle-menu
```

The required JavaScript and Sass files are included in the bower package too.
## Configuring and Building with Sass and Gulp

The component is built with Sass (SCSS) and uses a JavaScript module as well to handle events. Everything gets compiled and built with Gulp. To develop and compile from gulp, just run:

```
npm install
gulp
```

To watch files during development, run

```
gulp watch
```

Using the Gulp workflow is hugely beneficial, because it makes the component much easier to work with and customise. If you're not using Gulp to compile the Sass, you will still need to leverage Compass to make use of the math helper functions. The following 11 variables are configurable in the Sass up front, and their defaults are written out for you to look at:

```scss
// $menu-item-radius: 48px; [1]
// $num-items: 5; [2]
// $menu-theme-color: rgb(255, 40, 60); [3]
// $spread-radius: 144px; [4]
// $delay-increment: 0.1s; [5]
// $menu-position: "bottom-right"; [6]
// $mq-height: 480px; [7]
// $mq-width: 480px; [8]
// $button-bar-height: 4px; [9]
// $button-bar-spacing: 4px; [10]
// $button-lr-padding: 10px; [11]
```

## Resources Used
You can edit these as you see fit. Here's the breakdown of these 11 configuration options:

The following resources were leveraged in the making of this component:
1. Set up the initial menu item radius.
2. Decalare how many items our menu will contain.
3. Set up a theme colour.
4. The spread radius, which is how far the menu items spread from the origin.
5. The delay increment, which is how much delay there is between each menu
item leaving from / returning to the origin.
6. The position of the menu, chosen from one of four values:
`bottom-right` - bottom right corner (this is the default)
`bottom-left` - bottom left corner
`top-left` - top left corner
`top-right` - top right corner
7. Minimum height at which menu increases size.
8. Minimum width at which menu increases size.
9. The height of a bar in the toggle button.
10. The spacing between bars in the toggle button.
11. The padding between the left and right of the toggle button container and
the bars.

* [GulpJS](http://gulpjs.com) for task running
* [Sass](http://sass-lang.com/) & [Compass](http://compass-style.org/) for CSS pre-processing and helper functions
* My [CSS animating hamburger icons component](http://callmenick.com/_development/css-hamburger-menu-icons/) for the CSS-only toggle icon
* [Fontawesome](http://fortawesome.github.io/Font-Awesome/) for some nice aesthetics
Other variables will have to be customised further down in the Sass with your own discretion. Be sure to change up the Sass variable that defines the number of navigation items.

## License & Copyright

Licensed under the [MIT license.](http://www.opensource.org/licenses/mit-license.php)

Copyright 2014, [Call Me Nick.](http://callmenick.com)
Copyright 2016, [Call Me Nick.](http://callmenick.com)
31 changes: 10 additions & 21 deletions bower.json
View file
Original file line number Diff line number Diff line change
@@ -1,32 +1,21 @@
{
"name": "css-circle-menu",
"version": "1.0.1",
"version": "2.0.0",
"homepage": "https://github.com/callmenick/CSS-Circle-Menu",
"authors": [
"Nick Salloum <[email protected]>"
],
"description": "Circular fly-out navigation menu with CSS",
"main": "css/circle-nav.css",
"main": "gulpfile.js",
"ignore": [
"css/common.css",
"css/common.min.css",
"css/font-awesome.css",
"css/font-awesome.min.css",
"fonts",
"js/src",
"js/dist/carbonad.js",
"js/dist/githubicons.js",
"sass/_variables.scss",
"sass/common.scss",
"node_modules",
"bower_components",
".gitignore",
"bower.json",
"css-circle-menu-featured.png",
"gulpfile.js",
"index.html",
"package.json",
"README.md"
"*",
"!css/circle-menu.css",
"!css/circle-menu.min.css",
"!gulpfile.js",
"!js/src/circleMenu.js",
"!js/dist/circleMenu.min.js",
"!sass/circle-menu.scss",
"!sass/_circle-menu-helpers.scss"
],
"keywords": [
"CSS",
Expand Down
Loading

0 comments on commit 862540b

Please sign in to comment.