diff --git a/README.md b/README.md index 9ff7f9b..3ba3c6e 100644 --- a/README.md +++ b/README.md @@ -5,27 +5,34 @@ ##Demo Live Demo: http://micjamking.github.com/Navigataur/ +## Compiling +Navigataur ships with an SCSS version, as well as a CSS version compiled from the SCSS version. To compile the SCSS version on your machine, you need to have both [Ruby][1] & [Sass][2] installed. Once installed you can compile by using the following commands: + +``` +$ cd navigataur_directory +$ compass compile +``` ##Usage To use `navigataur.css`, reference the stylesheet in the `` of your document (or you can place within your own stylesheet). To work out of the box, you will need to make the following adjustments to your markup (classes can be changed in the stylesheet if you use something different): -* An outer `
` with a class of `header` +* An outer `
` with a class of `header` * An `input[type=checkbox]` with an ID of `toggle` and a `div` wrapping around a `label[for=toggle]` with a class of `toggle` and an `onclick` attribute just above your list menu. * The label also requires two data attributes for displaying the menu open/close text, allowing for complete localisation. * A list menu (either ul or ol) with a class of `menu`, followed by the closing `div` -``` - -
- +``` html + +
+ ``` That's it! Everything works out of the box with this setup. However, like any CSS plugin/snippet, you will probably want to stylize it to match your sites theme. I've separated all functional CSS from the presentational CSS so you can jump right in and change everything you need without breaking the plugin. Just edit as needed below the following CSS comment: @@ -47,13 +54,22 @@ WebKit rendering engine makes up the vast majority of mobile browsers (iOS, Andr * iOS 4.0+ * Android 2.3+ -*Internet Explorer 8 and below do not support media queries. If you need support for legacy IE versions, you can use an [IE specific stylesheet](http://css-tricks.com/how-to-create-an-ie-only-stylesheet/) to provide some styling support.* +*Internet Explorer 8 and below do not support media queries. If you need support for legacy IE versions, you can use an [IE specific stylesheet][3] to provide some styling support.* ##Details -* This plugin was created in response to [Menutron](https://github.com/micjamking/Menutron), a jquery plugin for responsive navigation menus. While I believe Menutron is more functional, as it provides access to native picker controls on mobile devices, `` controls are not very attractive. Navigataur.css is for those that want the same responsive capabilities, but with more control over the styling. +* If you have any suggestions, comments, or creative insults for my code, [add an issue][5] or [fork the repo][6]. ##Copyright -[BSD license](http://opensource.org/licenses/bsd-license.php) Copyright (c) 2012 Mike King ([@micjamking](http://twitter.com/micjamking)) \ No newline at end of file +[BSD license][7] Copyright (c) 2012 Mike King ([@micjamking][8]) + +[1]: https://www.ruby-lang.org/ +[2]: http://www.sass-lang.com/ +[3]: http://css-tricks.com/how-to-create-an-ie-only-stylesheet/ +[4]: https://github.com/micjamking/Menutron +[5]: https://github.com/micjamking/Navigataur/issues/new +[6]: https://github.com/micjamking/Navigataur/fork_select +[7]: http://opensource.org/licenses/bsd-license.php +[8]: https://twitter.com/micjamking \ No newline at end of file diff --git a/config.rb b/config.rb new file mode 100644 index 0000000..ab7e4a5 --- /dev/null +++ b/config.rb @@ -0,0 +1,25 @@ +# Require any additional compass plugins here. + +# Set this to the root of your project when deployed: +http_path = "/" +css_dir = "stylesheets" +sass_dir = "sass" +images_dir = "images" +javascripts_dir = "javascripts" + +# You can select your preferred output style here (can be overridden via the command line): +# output_style = :expanded or :nested or :compact or :compressed +output_style = :expanded + +# To enable relative paths to assets via compass helper functions. Uncomment: +# relative_assets = true + +# To disable debugging comments that display the original location of your selectors. Uncomment: +line_comments = false + + +# If you prefer the indented syntax, you might want to regenerate this +# project again passing --syntax sass, or you can uncomment this: +# preferred_syntax = :sass +# and then run: +# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass diff --git a/navigataur.css b/navigataur.css deleted file mode 100644 index 66daa32..0000000 --- a/navigataur.css +++ /dev/null @@ -1,154 +0,0 @@ -/* - * Navigataur: A pure CSS responsive navigation menu - * Author: Mike King (@micjamking) - */ - -/* - Notes: - - - Media queries should be edited in both style sections if you require - a different breakpoint for your navigation. - - - Toggle class & menu anchor tags in list items have box-sizing: border-box - style property to allow padding inside the container without conflicting with layout. - -*/ - - -/*-------------------------------- - Functional Styles (Required) ----------------------------------*/ - -.header { position: relative; } -#toggle, .toggle { display: none; } -.menu > li { list-style: none; float:left; } - -/* Nicolas Gallagher micro clearfix */ -.clearfix:before, .clearfix:after { display: table; content: ""; } -.clearfix:after { clear: both; } - -@media only screen and (max-width: 768px){ - .menu { display: none; opacity: 0; width: 100%; position: absolute; right: 0; } - .menu > li { display: block; width: 100%; margin: 0; } - .menu > li > a { display: block; width: 100%; text-decoration: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } - .toggle { display: block; position: relative; cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } - #toggle:checked + div .menu { display: block; opacity: 1;} -} - - -/*-------------------------------- - Presentation Styles (Editable) ----------------------------------*/ -.header{ - min-height: 100px; - height: 100%; - padding: 0 20px; - background: #FFFFFF; -} - -.header > h1 { - float: left; - padding: 30px 0 0; - font-style: italic; - font-family: Georgia; - font-size: 28px; - color: #DFDFDF; -} - -.nav{ - display: block; - float: right; -} - -.nav, .menu, .menu > li, .menu > li > a{ - height: 100%; -} - -.menu > li > a{ - display: block; - padding: 42px 20px; - text-decoration: none; - font-weight: normal; - font-size: 16px; - line-height: 1; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - -webkit-transition: all 0.25s linear; - -moz-transition: all 0.25s linear; - -o-transition: all 0.25s linear; - transition: all 0.25s linear; -} - -.menu > li > a:hover, .menu > li > a:focus{ - background: #F2F2F2; - box-shadow: inset 0px 5px #51C1F1; - color: #51C1F1; - padding: 50px 20px 34px; -} - -.toggle{ - z-index: 2; -} - -@media only screen and (max-width: 768px){ - .menu{ - background: #FFFFFF; - border-top: 1px solid #51C1F1; - } - - .menu, .menu > li, .menu > li > a{ - height: auto; - } - - .menu > li > a{ - padding: 15px 15px; - } - - .menu > li > a:hover, .menu > li > a:focus{ - background: #F2F2F2; - box-shadow: inset 5px 0px #51C1F1; - padding: 15px 15px 15px 25px; - } - - .toggle:after { - content: attr(data-open); - display: block; - width: 200px; - margin: 33px 0; - padding: 10px 50px; - background: #51C1F1; - -webkit-border-radius: 2px; - border-radius: 2px; - text-align: center; - font-size: 12px; - color: #FFFFFF; - -webkit-transition: all 0.5s linear; - -moz-transition: all 0.5s linear; - -o-transition: all 0.5s linear; - transition: all 0.5s linear; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - } - - .toggle:hover:after{ - background: #45ABD6; - } - - #toggle:checked + div .toggle:after{ - content: attr(data-close); - } -} - -@media only screen and (max-width: 479px){ - .header > h1 { - text-align: center; - } - .header > h1, .nav, .toggle:after{ - float: none; - } - .toggle:after { - text-align: center; width: 100%; - } -} \ No newline at end of file diff --git a/sass/navigataur.scss b/sass/navigataur.scss new file mode 100644 index 0000000..8cf3eca --- /dev/null +++ b/sass/navigataur.scss @@ -0,0 +1,195 @@ +// ---------- +// Variables, edit as desired +// ---------- +$primary_color: #51C1F1; +$background_color: #FFF; +$break_tablet: 768px; +$break_mobile: 479px; + +@mixin box-sizing($value) { + -webkit-box-sizing: $value; + -moz-box-sizing: $value; + -ms-box-sizing: $value; + -o-box-sizing: $value; + box-sizing: $value; +} + +@mixin transition($value) { + -webkit-transition: $value; + -moz-transition: $value; + -ms-transition: $value; + -o-transition: $value; + transition: $value; +} + +// ---------- +// Functional Styling, Required +// ---------- + +.clearfix { // Nicolas Gallagher micro clearfix + &::before, &::after { + content: ""; + display: table; + } +} + +.header { position: relative; } +#toggle, .toggle { display: none; } + +.menu { + > li { + float: left; + list-style: none; + } +} + +@media only screen and (max-width: $break_tablet) { + .menu { + display: none; + opacity: 0; + position: absolute; + right: 0; + width: 100%; + + > li { + display: block; + margin: 0; + width: 100%; + + > a { + @include box-sizing(border-box); + display: block; + text-decoration: none; + width: 100%; + } + } + } + .toggle { + cursor: pointer; + display: block; + position: relative; + -webkit-touch-callout: none; + -webkit-user-select: none; + user-select: none; + } + #toggle:checked + nav .menu { + display: block; + opacity: 1; + } +} + +// ---------- +// Presentational Styles, edit as desired. +// ---------- + +.header { + background: $background_color; + min-height: 100px; + padding: 0 20px; + + > h1 { + color: #dfdfdf; + float: left; + font-family: Georgia, sans-serif; + font-size: 28px; + font-style: italic; + padding: 30px 0 0; + } +} + +nav { + display: block; + float: right; +} + +nav, +.menu, +.menu > li, +.menu > li > a { + height: 100%; +} + +.menu { + > li > a { + @include box-sizing(border-box); + @include transition(all 250ms linear); + display: block; + font-size: 16px; + font-weight: normal; + line-height: 1; + padding: 42px 20px; + text-decoration: none; + + &:hover, &:focus { + background: darken($background_color, 5%); + box-shadow: inset 0px 5px $primary_color; + color: $primary_color; + padding: 50px 20px 34px; + } + } +} + +.toggle { + z-index: 2; +} + +@media only screen and (max-width: $break_tablet){ + .menu, + .menu > li, + .menu > li > a{ + height: auto; + } + + .menu { + background: $background_color; + border-top: 1px solid $primary_color; + + > li > a { + padding: 15px 15px; + + &:hover, &:focus { + background: darken($background_color, 5%); + box-shadow: inset 5px 0px $primary_color; + padding: 15px 15px 15px 25px; + } + } + } + + .toggle { + &:hover::after { + background: darken($primary_color, 5%); + } + &::after { + @include transition(all 500ms linear); + @include box-sizing(border-box); + background: $primary_color; + color: #FFFFFF; + content: attr(data-open); + display: block; + font-size: 12px; + width: 200px; + margin: 33px 0; + padding: 10px 50px; + text-align: center; + + -webkit-border-radius: 2px; + border-radius: 2px; + } + } + #toggle:checked + nav .toggle::after { + content: attr(data-close); + } +} + +@media only screen and (max-width: $break_mobile){ + .header > h1, nav, .toggle::after{ + float: none; + } + .header > h1 { + text-align: center; + } + .toggle::after { + text-align: center; + width: 100%; + } +} \ No newline at end of file diff --git a/stylesheets/navigataur.css b/stylesheets/navigataur.css new file mode 100644 index 0000000..2e450f3 --- /dev/null +++ b/stylesheets/navigataur.css @@ -0,0 +1,176 @@ +.clearfix::before, .clearfix::after { + content: ""; + display: table; +} + +.header { + position: relative; +} + +#toggle, .toggle { + display: none; +} + +.menu > li { + float: left; + list-style: none; +} + +@media only screen and (max-width: 768px) { + .menu { + display: none; + opacity: 0; + position: absolute; + right: 0; + width: 100%; + } + .menu > li { + display: block; + margin: 0; + width: 100%; + } + .menu > li > a { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + -o-box-sizing: border-box; + box-sizing: border-box; + display: block; + text-decoration: none; + width: 100%; + } + + .toggle { + cursor: pointer; + display: block; + position: relative; + -webkit-touch-callout: none; + -webkit-user-select: none; + user-select: none; + } + + #toggle:checked + nav .menu { + display: block; + opacity: 1; + } +} +.header { + background: white; + min-height: 100px; + padding: 0 20px; +} +.header > h1 { + color: #dfdfdf; + float: left; + font-family: Georgia, sans-serif; + font-size: 28px; + font-style: italic; + padding: 30px 0 0; +} + +nav { + display: block; + float: right; +} + +nav, +.menu, +.menu > li, +.menu > li > a { + height: 100%; +} + +.menu > li > a { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + -o-box-sizing: border-box; + box-sizing: border-box; + -webkit-transition: all 250ms linear; + -moz-transition: all 250ms linear; + -ms-transition: all 250ms linear; + -o-transition: all 250ms linear; + transition: all 250ms linear; + display: block; + font-size: 16px; + font-weight: normal; + line-height: 1; + padding: 42px 20px; + text-decoration: none; +} +.menu > li > a:hover, .menu > li > a:focus { + background: #f2f2f2; + box-shadow: inset 0px 5px #51c1f1; + color: #51c1f1; + padding: 50px 20px 34px; +} + +.toggle { + z-index: 2; +} + +@media only screen and (max-width: 768px) { + .menu, + .menu > li, + .menu > li > a { + height: auto; + } + + .menu { + background: white; + border-top: 1px solid #51c1f1; + } + .menu > li > a { + padding: 15px 15px; + } + .menu > li > a:hover, .menu > li > a:focus { + background: #f2f2f2; + box-shadow: inset 5px 0px #51c1f1; + padding: 15px 15px 15px 25px; + } + + .toggle:hover::after { + background: #39b9ef; + } + .toggle::after { + -webkit-transition: all 500ms linear; + -moz-transition: all 500ms linear; + -ms-transition: all 500ms linear; + -o-transition: all 500ms linear; + transition: all 500ms linear; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + -o-box-sizing: border-box; + box-sizing: border-box; + background: #51c1f1; + color: #FFFFFF; + content: attr(data-open); + display: block; + font-size: 12px; + width: 200px; + margin: 33px 0; + padding: 10px 50px; + text-align: center; + -webkit-border-radius: 2px; + border-radius: 2px; + } + + #toggle:checked + nav .toggle::after { + content: attr(data-close); + } +} +@media only screen and (max-width: 479px) { + .header > h1, nav, .toggle::after { + float: none; + } + + .header > h1 { + text-align: center; + } + + .toggle::after { + text-align: center; + width: 100%; + } +}