Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Commit Flaunt

  • Loading branch information...
commit 915fe8ebce8ac8992bda357e2cb1f8e08b0fc80c 1 parent f5b8dd5
Todd Motto authored
View
4 README.md
@@ -1,4 +1,4 @@
-flaunt-js
+Flaunt.js
=========
-Flaunt JS, stylish responsive navigations with nested click to reveal
+Flaunt JS, stylish responsive navigations with nested click to reveal.
View
160 css/demo.css
@@ -0,0 +1,160 @@
+/*
+ Todd Motto Labs
+ URL: www.toddmotto.com
+*/
+
+body {
+ background:#ECF0F1;
+}
+a,
+a:hover {
+ text-decoration:none;
+}
+ul,
+ol {
+ list-style:none;
+}
+.wrapper {
+ max-width:1280px;
+ width:95%;
+ margin:0 auto;
+ position:relative;
+}
+.main {
+ width:100%;
+ margin:50px 0;
+ text-align:center;
+}
+.content {
+ text-align:left;
+ margin:25px 0;
+}
+.content-text {
+ margin:0 0 15px;
+}
+
+/*------------------------------------*\
+ Flaunt JS Navigation
+\*------------------------------------*/
+
+.nav {
+ position:relative;
+ display:inline-block;
+ font-size:14px;
+ font-weight:900;
+}
+.nav-list {
+ text-align:left;
+}
+.nav-item {
+ float:left;
+ *display:inline;
+ zoom:1;
+ position:relative;
+}
+.nav-item a {
+ display:block;
+ color:#FFF;
+ padding:15px 20px;
+ background:#7A1E61;
+ border-bottom:1px solid #8B2870;
+}
+.nav-item > a:hover {
+ background:#822368;
+}
+.nav-item:hover .nav-submenu {
+ display:block;
+}
+/* Navigation submenu */
+.nav-submenu {
+ display:none;
+ position:absolute;
+ left:0;
+ width:180px;
+}
+.nav-submenu-item a {
+ background:#8B2770;
+ border-bottom:1px solid #9A337E;
+ display:block;
+ padding:15px;
+}
+.nav-submenu-item a:hover {
+ background:#932C77;
+}
+/* Mobile navigation */
+.nav-mobile {
+ display:none; /* Hide from browsers that don't support media queries */
+ cursor:pointer;
+ position:absolute;
+ top:0;
+ right:0;
+ background:#3D3D3B url(../img/nav.svg) no-repeat center center;
+ background-size:18px;
+ height:50px;
+ width:50px;
+}
+/* Mobile navigation, clickable area for revealing <ul> */
+.nav-click {
+ position:absolute;
+ top:0;
+ right:0;
+ display:none;
+ border-left:1px solid #8B2870;
+ height:49px;
+ width:50px;
+ cursor:pointer;
+}
+.nav-click i {
+ display:block;
+ height:48px;
+ width:48px;
+ background:url(../img/drop.svg) no-repeat center center;
+ background-size:20px;
+}
+.nav-click:hover {
+ background-color:#6E1656;
+}
+.nav-rotate {
+ -webkit-transform:rotate(180deg);
+ -moz-transform:rotate(180deg);
+ -ms-transform:rotate(180deg);
+ -o-transform:rotate(180deg);
+ transform:rotate(180deg);
+}
+
+/*------------------------------------*\
+ Media Queries
+\*------------------------------------*/
+
+@media only screen and (min-width: 320px) and (max-width: 768px) {
+ .nav-mobile {
+ display:block;
+ }
+ .nav {
+ width:100%;
+ padding:50px 0 0;
+ }
+ .nav-list {
+ display:none;
+ }
+ .nav-item {
+ width:100%;
+ float:none;
+ }
+ .nav-item > a {
+ padding:15px;
+ }
+ .nav-click {
+ display:block;
+ }
+ .nav-mobile-open {
+ border-radius:5px 5px 0 0;
+ -webkit-border-radius:5px 5px 0 0;
+ -moz-border-radius:5px 5px 0 0;
+ }
+ .nav-submenu {
+ display:none !important;
+ position:static;
+ width:100%;
+ }
+}
View
55 css/main.css
@@ -0,0 +1,55 @@
+/*
+ Todd Motto Labs
+ URL: www.toddmotto.com
+*/
+
+/*------------------------------------*\
+ RESET
+\*------------------------------------*/
+
+*,
+*:after,
+*:before {
+ margin:0;
+ padding:0;
+ box-sizing:border-box;
+ -webkit-box-sizing:border-box;
+ -moz-box-sizing:border-box;
+ -webkit-font-smoothing:antialiased;
+ font-smoothing:antialiased;
+ text-rendering:optimizeLegibility;
+}
+body {
+ font:400 13px/1.4 'Helvetica Neue', Helvetica, Arial, sans-serif;
+ background:#333;
+}
+
+/*------------------------------------*\
+ STRUCTURE
+\*------------------------------------*/
+
+.wrapper {
+ max-width:1280px;
+ margin:0 auto;
+}
+.header {
+ padding:15px 25px;
+ background:#FFF;
+ border-left:5px solid #2BA6CB;
+ overflow:hidden;
+}
+.logo {
+ float:left;
+}
+.demo-nav {
+ float:right;
+ margin:12px 0;
+ list-style:none;
+}
+.demo-nav-link {
+
+}
+.demo-nav-link a {
+ color:#2BA6CB;
+ text-decoration:none;
+}
View
6 img/drop.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!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="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24.021 16.162" enable-background="new 0 0 24.021 16.162" xml:space="preserve">
+<polygon fill="#FFFFFF" points="15.949,12.854 15.914,12.826 15.982,12.771 24.021,6.334 24.021,0 14.898,7.305 12.026,9.604
+ 11.959,9.658 9.121,7.388 0,0.083 0,6.417 8.038,12.854 11.994,16.021 "/>
+</svg>
View
BIN  img/logo.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
7 img/nav.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!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="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16.115 16.115" enable-background="new 0 0 16.115 16.115" xml:space="preserve">
+<rect fill="#FFFFFF" width="16" height="4.167"/>
+<rect y="5.958" fill="#FFFFFF" width="16" height="4.167"/>
+<rect y="11.629" fill="#FFFFFF" width="16" height="4.159"/>
+</svg>
View
122 index.html
@@ -0,0 +1,122 @@
+<!doctype html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>Flaunt JS, stylish responsive navigations with nested click to reveal by @toddmotto | toddmotto.com</title>
+ <meta name="viewport" content="width=device-width,initial-scale=1.0">
+ <meta name="author" content="@toddmotto">
+ <link href="css/main.css" rel="stylesheet">
+ <link href="css/demo.css" rel="stylesheet">
+ </head>
+ <body>
+ <div class="header">
+ <div class="logo">
+ <a href="http://toddmotto.com" target="_blank">
+ <img src="img/logo.png" alt="Logo" class="logo-img">
+ </a>
+ </div>
+ <ul class="demo-nav">
+ <li class="demo-nav-link">
+ <a href="http://toddmotto.com/flaunt-js-for-stylish-responsive-navigations-with-nested-click-to-reveal">Go to tutorial</a>
+ </li>
+ </ul>
+ </div>
+ <div class="wrapper">
+ <div class="main">
+
+ <!-- Nav -->
+ <nav class="nav">
+ <ul class="nav-list">
+ <li class="nav-item">
+ <a href="?=home">Home</a>
+ <ul class="nav-submenu">
+ <li class="nav-submenu-item">
+ <a href="?=submenu-1">Submenu item 1</a>
+ </li>
+ <li class="nav-submenu-item">
+ <a href="?=submenu-2">Submenu item 2</a>
+ </li>
+ <li class="nav-submenu-item">
+ <a href="?=submenu-3">Submenu item 3</a>
+ </li>
+ <li class="nav-submenu-item">
+ <a href="?=submenu-4">Submenu item 4</a>
+ </li>
+ </ul>
+ </li>
+ <li class="nav-item">
+ <a href="?=about">About</a>
+ </li>
+ <li class="nav-item">
+ <a href="?=services">Services</a>
+ <ul class="nav-submenu">
+ <li class="nav-submenu-item">
+ <a href="?=submenu-1">Submenu item 1</a>
+ </li>
+ <li class="nav-submenu-item">
+ <a href="?=submenu-2">Submenu item 2</a>
+ </li>
+ <li class="nav-submenu-item">
+ <a href="?=submenu-3">Submenu item 3</a>
+ </li>
+ <li class="nav-submenu-item">
+ <a href="?=submenu-4">Submenu item 4</a>
+ </li>
+ </ul>
+ </li>
+ <li class="nav-item">
+ <a href="?=portfolio">Portfolio</a>
+ </li>
+ <li class="nav-item">
+ <a href="?=testimonials">Testimonials</a>
+ </li>
+ <li class="nav-item">
+ <a href="?=contact">Contact</a>
+ </li>
+ </ul>
+ </nav>
+ <!-- /Nav -->
+
+ <div class="content">
+ <p class="content-text">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur viverra interdum semper.
+ Ut blandit adipiscing tempor. Etiam scelerisque, felis dignissim rutrum tempor, neque risus
+ sagittis mi, ac aliquam est massa eget lectus. Class aptent taciti sociosqu ad litora torquent
+ per conubia nostra, per inceptos himenaeos. Ut pretium adipiscing ipsum, id iaculis quam mattis
+ et. Cras mollis eleifend tortor, ut venenatis turpis pulvinar id. In hac habitasse platea
+ dictumst. Pellentesque feugiat mi sit amet ligula convallis rhoncus fermentum sem aliquam.
+ Vivamus egestas justo ac nisl facilisis sed aliquam mi ultrices. Suspendisse potenti. Sed
+ elementum blandit nisl eu tempus.
+ </p>
+ <p class="content-text">
+ Nulla egestas facilisis ipsum sit amet semper. Curabitur leo ante, scelerisque ut ornare ac,
+ egestas sit amet nunc. Aenean eget scelerisque lorem. Donec sapien felis, aliquam id vehicula
+ sit amet, posuere venenatis urna. Aenean at dui libero. Nullam interdum molestie sem, vitae
+ egestas augue pretium at. Duis erat erat, ultrices eu accumsan vitae, consectetur quis orci.
+ </p>
+ <p class="content-text">
+ Etiam vulputate pellentesque lacus ac ullamcorper. Vestibulum ac semper lacus. Nunc id accumsan
+ lectus. Sed lacinia dui vel nisi tincidunt vitae varius nunc tincidunt. In hac habitasse platea
+ dictumst. Vestibulum purus sapien, eleifend quis commodo sed, euismod non velit. Morbi magna nisl,
+ tincidunt sed pretium ut, consequat sed nunc. Cras at diam est, nec consectetur nisi. Nulla ante
+ arcu, laoreet nec volutpat ut, malesuada quis velit.
+ </p>
+ </div>
+ </div>
+ </div>
+
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+ <script src="js/flaunt.js"></script>
+
+ <!-- Demo Analytics -->
+ <script>
+ var _gaq=[['_setAccount','UA-20440416-10'],['_trackPageview']];
+ (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
+ g.src='//www.google-analytics.com/ga.js';
+ s.parentNode.insertBefore(g,s)})(document,'script');
+ </script>
+
+ <!-- Demo Ads -->
+ <script src="//toddmotto.com/ads/ads.js"></script>
+ </body>
+</html>
View
47 js/flaunt.js
@@ -0,0 +1,47 @@
+/*
+ Flaunt.js v1.0.0
+ by Todd Motto: http://www.toddmotto.com
+ Latest version: https://github.com/toddmotto/flauntjs
+
+ Copyright 2013 Todd Motto
+ Licensed under the MIT license
+ http://www.opensource.org/licenses/mit-license.php
+
+ Flaunt JS, stylish responsive navigations with nested click to reveal.
+*/
+;(function($) {
+
+ // DOM ready
+ $(function() {
+
+ // Append the mobile icon nav
+ $('.nav').append($('<div class="nav-mobile"></div>'));
+
+ // Add a <span> to every .nav-item that has a <ul> inside
+ $('.nav-item').has('ul').prepend('<span class="nav-click"><i class="nav-arrow"></i></span>');
+
+ // Click to reveal the nav
+ $('.nav-mobile').click(function(){
+ $('.nav-list').toggle();
+ });
+
+ // Dynamic binding to on 'click'
+ $('.nav-list').on('click', '.nav-click', function(){
+
+ // Positive and negative clicks
+ var clicks = $(this).data('clicks');
+ if (!clicks) {
+ $(this).siblings('.nav-submenu').attr('style','display: block !important');
+ } else {
+ $(this).siblings('.nav-submenu').removeAttr('style');
+ }
+ $(this).data('clicks', !clicks);
+
+ // Toggle the arrow using CSS3 transforms
+ $(this).children('.nav-arrow').toggleClass('nav-rotate');
+
+ });
+
+ });
+
+})(jQuery);
View
12 js/flaunt.min.js
@@ -0,0 +1,12 @@
+/*
+ Flaunt.js v1.0.0
+ by Todd Motto: http://www.toddmotto.com
+ Latest version: https://github.com/toddmotto/flauntjs
+
+ Copyright 2013 Todd Motto
+ Licensed under the MIT license
+ http://www.opensource.org/licenses/mit-license.php
+
+ Flaunt JS, stylish responsive navigations with nested click to reveal.
+*/
+;(function(e){e(function(){e(".nav").append(e('<div class="nav-mobile"></div>'));e(".nav-item").has("ul").prepend('<span class="nav-click"><i class="nav-arrow"></i></span>');e(".nav-mobile").click(function(){e(".nav-list").toggle()});e(".nav-list").on("click",".nav-click",function(){var t=e(this).data("clicks");if(!t){e(this).siblings(".nav-submenu").attr("style","display: block !important")}else{e(this).siblings(".nav-submenu").removeAttr("style")}e(this).data("clicks",!t);e(this).children(".nav-arrow").toggleClass("nav-rotate")})})})(jQuery);
Please sign in to comment.
Something went wrong with that request. Please try again.