├── .DS_Store
├── img
    ├── logo.png
    ├── nav.svg
    └── drop.svg
├── README.md
├── js
    ├── flaunt.min.js
    └── flaunt.js
├── css
    ├── main.css
    └── demo.css
└── index.html


/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/toddmotto/flaunt-js/HEAD/.DS_Store


--------------------------------------------------------------------------------
/img/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/toddmotto/flaunt-js/HEAD/img/logo.png


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | Flaunt.js [unmaintained]
2 | =========
3 | 
4 | Flaunt JS, stylish responsive navigations with nested click to reveal.
5 | 
6 | > Please note this project is unmaintained, no further development will take place or issue response.
7 | 


--------------------------------------------------------------------------------
/img/nav.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="utf-8"?>
2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
3 | <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">
4 | <rect fill="#FFFFFF" width="16" height="4.167"/>
5 | <rect y="5.958" fill="#FFFFFF" width="16" height="4.167"/>
6 | <rect y="11.629" fill="#FFFFFF" width="16" height="4.159"/>
7 | </svg>
8 | 


--------------------------------------------------------------------------------
/img/drop.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="utf-8"?>
2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
3 | <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">
4 | <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 
5 | 	11.959,9.658 9.121,7.388 0,0.083 0,6.417 8.038,12.854 11.994,16.021 "/>
6 | </svg>
7 | 


--------------------------------------------------------------------------------
/js/flaunt.min.js:
--------------------------------------------------------------------------------
 1 | /*
 2 | 	Flaunt.js v1.0.0
 3 | 	by Todd Motto: http://www.toddmotto.com
 4 | 	Latest version: https://github.com/toddmotto/flaunt-js
 5 | 	
 6 | 	Copyright 2013 Todd Motto
 7 | 	Licensed under the MIT license
 8 | 	http://www.opensource.org/licenses/mit-license.php
 9 | 
10 | 	Flaunt JS, stylish responsive navigations with nested click to reveal.
11 | */
12 | ;(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(){e(this).siblings(".nav-submenu").toggle();e(this).children(".nav-arrow").toggleClass("nav-rotate")})})})(jQuery);


--------------------------------------------------------------------------------
/css/main.css:
--------------------------------------------------------------------------------
 1 | /*
 2 | 	Todd Motto Labs
 3 | 	URL: www.toddmotto.com
 4 | */
 5 | 
 6 | /*------------------------------------*\
 7 |     RESET
 8 | \*------------------------------------*/
 9 | 
10 | *,
11 | *:after,
12 | *:before {
13 | 	margin:0;
14 | 	padding:0;
15 | 	box-sizing:border-box;
16 | 	-webkit-box-sizing:border-box;
17 | 	-moz-box-sizing:border-box;
18 | 	-webkit-font-smoothing:antialiased;
19 | 	font-smoothing:antialiased;
20 | 	text-rendering:optimizeLegibility;
21 | }
22 | body {
23 | 	font:400 13px/1.4 'Helvetica Neue', Helvetica, Arial, sans-serif;
24 | 	background:#333;
25 | }
26 | 
27 | /*------------------------------------*\
28 |     STRUCTURE
29 | \*------------------------------------*/
30 | 
31 | .wrapper {
32 | 	max-width:1280px;
33 | 	margin:0 auto;
34 | }
35 | .header {
36 | 	padding:15px 25px;
37 | 	background:#FFF;
38 | 	border-left:5px solid #2BA6CB;
39 | 	overflow:hidden;
40 | }
41 | .logo {
42 | 	float:left;
43 | }
44 | .demo-nav {
45 | 	float:right;
46 | 	margin:12px 0;
47 | 	list-style:none;
48 | }
49 | .demo-nav-link {
50 | 	
51 | }
52 | .demo-nav-link a {
53 | 	color:#2BA6CB;
54 | 	text-decoration:none;
55 | }


--------------------------------------------------------------------------------
/js/flaunt.js:
--------------------------------------------------------------------------------
 1 | /*
 2 | 	Flaunt.js v1.0.0
 3 | 	by Todd Motto: http://www.toddmotto.com
 4 | 	Latest version: https://github.com/toddmotto/flaunt-js
 5 | 	
 6 | 	Copyright 2013 Todd Motto
 7 | 	Licensed under the MIT license
 8 | 	http://www.opensource.org/licenses/mit-license.php
 9 | 
10 | 	Flaunt JS, stylish responsive navigations with nested click to reveal.
11 | */
12 | ;(function($) {
13 | 
14 | 	// DOM ready
15 | 	$(function() {
16 | 		
17 | 		// Append the mobile icon nav
18 | 		$('.nav').append($('<div class="nav-mobile"></div>'));
19 | 		
20 | 		// Add a <span> to every .nav-item that has a <ul> inside
21 | 		$('.nav-item').has('ul').prepend('<span class="nav-click"><i class="nav-arrow"></i></span>');
22 | 		
23 | 		// Click to reveal the nav
24 | 		$('.nav-mobile').click(function(){
25 | 			$('.nav-list').toggle();
26 | 		});
27 | 	
28 | 		// Dynamic binding to on 'click'
29 | 		$('.nav-list').on('click', '.nav-click', function(){
30 | 		
31 | 			// Toggle the nested nav
32 | 			$(this).siblings('.nav-submenu').toggle();
33 | 			
34 | 			// Toggle the arrow using CSS3 transforms
35 | 			$(this).children('.nav-arrow').toggleClass('nav-rotate');
36 | 			
37 | 		});
38 | 	    
39 | 	});
40 | 	
41 | })(jQuery);


--------------------------------------------------------------------------------
/css/demo.css:
--------------------------------------------------------------------------------
  1 | /*
  2 | 	Todd Motto Labs
  3 | 	URL: www.toddmotto.com
  4 | */
  5 | 
  6 | body {
  7 | 	background:#ECF0F1;
  8 | }
  9 | a,
 10 | a:hover {
 11 | 	text-decoration:none;
 12 | }
 13 | ul,
 14 | ol {
 15 | 	list-style:none;
 16 | }
 17 | .wrapper {
 18 | 	max-width:1280px;
 19 | 	width:95%;
 20 | 	margin:0 auto;
 21 | 	position:relative;
 22 | }
 23 | .main {
 24 | 	width:100%;
 25 | 	margin:50px 0;
 26 | 	text-align:center;
 27 | }
 28 | .content {
 29 | 	text-align:left;
 30 | 	margin:25px 0;
 31 | }
 32 | .content-text {
 33 | 	margin:0 0 15px;
 34 | }
 35 | 
 36 | /*------------------------------------*\
 37 |     Flaunt JS Navigation
 38 | \*------------------------------------*/
 39 | 
 40 | .nav {
 41 | 	position:relative;
 42 | 	display:inline-block;
 43 | 	font-size:14px;
 44 | 	font-weight:900;
 45 | }
 46 | .nav-list {
 47 | 	text-align:left;
 48 | }
 49 | .nav-item {
 50 | 	float:left;
 51 | 	*display:inline;
 52 | 	zoom:1;
 53 | 	position:relative;
 54 | }
 55 | .nav-item a {
 56 | 	display:block;
 57 | 	color:#FFF;
 58 | 	padding:15px 20px;
 59 | 	background:#7A1E61;
 60 | 	border-bottom:1px solid #8B2870;
 61 | }
 62 | .nav-item > a:hover {
 63 | 	background:#822368;
 64 | }
 65 | .nav-item:hover .nav-submenu {
 66 | 	display:block;
 67 | }
 68 | /* Navigation submenu */
 69 | .nav-submenu {
 70 | 	display:none;
 71 | 	position:absolute;
 72 | 	left:0;
 73 | 	width:180px;
 74 | }
 75 | .nav-submenu-item a {
 76 | 	background:#8B2770;
 77 | 	border-bottom:1px solid #9A337E;
 78 | 	display:block;
 79 | 	padding:15px;
 80 | }
 81 | .nav-submenu-item a:hover {
 82 | 	background:#932C77;
 83 | }
 84 | /* Mobile navigation */
 85 | .nav-mobile {
 86 | 	display:none; /* Hide from browsers that don't support media queries */
 87 | 	cursor:pointer;
 88 | 	position:absolute;
 89 | 	top:0;
 90 | 	right:0;
 91 | 	background:#3D3D3B url(../img/nav.svg) no-repeat center center;
 92 | 	background-size:18px;
 93 | 	height:50px;
 94 | 	width:50px;
 95 | }
 96 | /* Mobile navigation, clickable area for revealing <ul> */
 97 | .nav-click {
 98 | 	position:absolute;
 99 | 	top:0;
100 | 	right:0;
101 | 	display:none;
102 | 	border-left:1px solid #8B2870;
103 | 	height:49px;
104 | 	width:50px;
105 | 	cursor:pointer;
106 | }
107 | .nav-click i {
108 | 	display:block;
109 | 	height:48px;
110 | 	width:48px;
111 | 	background:url(../img/drop.svg) no-repeat center center;
112 | 	background-size:20px;
113 | }
114 | .nav-click:hover {
115 | 	background-color:#6E1656;
116 | }
117 | .nav-rotate {
118 | 	-webkit-transform:rotate(180deg);
119 | 	-moz-transform:rotate(180deg);
120 | 	-ms-transform:rotate(180deg);
121 | 	-o-transform:rotate(180deg);
122 | 	transform:rotate(180deg);
123 | }
124 | 
125 | /*------------------------------------*\
126 |     Media Queries
127 | \*------------------------------------*/
128 | 
129 | @media only screen and (min-width: 320px) and (max-width: 768px) {
130 | 	.nav-mobile {
131 | 		display:block;
132 | 	}
133 | 	.nav {
134 | 		width:100%;
135 | 		padding:50px 0 0;
136 | 	}
137 | 	.nav-list {
138 | 		display:none;
139 | 	}
140 | 	.nav-item {
141 | 		width:100%;
142 | 		float:none;
143 | 	}
144 | 	.nav-item > a {
145 | 		padding:15px;
146 | 	}
147 | 	.nav-click {
148 | 		display:block;
149 | 	}
150 | 	.nav-mobile-open {
151 | 		border-radius:5px 5px 0 0;
152 | 		-webkit-border-radius:5px 5px 0 0;
153 | 		-moz-border-radius:5px 5px 0 0;
154 | 	}
155 | 	.nav-item:hover .nav-submenu {
156 | 		display:none;
157 | 	}
158 | 	.nav-submenu {
159 | 		position:static;
160 | 		width:100%;
161 | 	}
162 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 | 	<head>
  4 | 		<meta charset="utf-8">
  5 | 		<title>Flaunt JS, stylish responsive navigations with nested click to reveal by @toddmotto | toddmotto.com</title>
  6 | 		<meta name="viewport" content="width=device-width,initial-scale=1.0">
  7 | 		<meta name="author" content="@toddmotto">
  8 | 		<link href="css/main.css" rel="stylesheet">
  9 | 		<link href="css/demo.css" rel="stylesheet">
 10 | 	</head>
 11 | 	<body>
 12 | 		<div class="header">
 13 | 			<div class="logo">
 14 | 				<a href="http://toddmotto.com" target="_blank">
 15 | 					<img src="img/logo.png" alt="Logo" class="logo-img">
 16 | 				</a>
 17 | 			</div>
 18 | 			<ul class="demo-nav">
 19 | 				<li class="demo-nav-link">
 20 | 					<a href="http://toddmotto.com/flaunt-js-for-stylish-responsive-navigations-with-nested-click-to-reveal">Go to tutorial</a>
 21 | 				</li>
 22 | 			</ul>
 23 | 		</div>
 24 | 		<div class="wrapper">
 25 | 			<div class="main">
 26 | 				
 27 | 				<!-- Nav -->
 28 | 				<nav class="nav">
 29 | 					<ul class="nav-list">
 30 | 						<li class="nav-item">
 31 | 							<a href="?=home">Home</a>
 32 | 							<ul class="nav-submenu">
 33 | 								<li class="nav-submenu-item">
 34 | 									<a href="?=submenu-1">Submenu item 1</a>
 35 | 								</li>
 36 | 								<li class="nav-submenu-item">
 37 | 									<a href="?=submenu-2">Submenu item 2</a>
 38 | 								</li>
 39 | 								<li class="nav-submenu-item">
 40 | 									<a href="?=submenu-3">Submenu item 3</a>
 41 | 								</li>
 42 | 								<li class="nav-submenu-item">
 43 | 									<a href="?=submenu-4">Submenu item 4</a>
 44 | 								</li>
 45 | 							</ul>
 46 | 						</li>
 47 | 						<li class="nav-item">
 48 | 							<a href="?=about">About</a>
 49 | 						</li>
 50 | 						<li class="nav-item">
 51 | 							<a href="?=services">Services</a>
 52 | 							<ul class="nav-submenu">
 53 | 								<li class="nav-submenu-item">
 54 | 									<a href="?=submenu-1">Submenu item 1</a>
 55 | 								</li>
 56 | 								<li class="nav-submenu-item">
 57 | 									<a href="?=submenu-2">Submenu item 2</a>
 58 | 								</li>
 59 | 								<li class="nav-submenu-item">
 60 | 									<a href="?=submenu-3">Submenu item 3</a>
 61 | 								</li>
 62 | 								<li class="nav-submenu-item">
 63 | 									<a href="?=submenu-4">Submenu item 4</a>
 64 | 								</li>
 65 | 							</ul>
 66 | 						</li>
 67 | 						<li class="nav-item">
 68 | 							<a href="?=portfolio">Portfolio</a>
 69 | 						</li>
 70 | 						<li class="nav-item">
 71 | 							<a href="?=testimonials">Testimonials</a>
 72 | 						</li>
 73 | 						<li class="nav-item">
 74 | 							<a href="?=contact">Contact</a>
 75 | 						</li>
 76 | 					</ul>
 77 | 				</nav>
 78 | 				<!-- /Nav -->
 79 | 				
 80 | 				<div class="content">
 81 | 					<p class="content-text">
 82 | 						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur viverra interdum semper. 
 83 | 						Ut blandit adipiscing tempor. Etiam scelerisque, felis dignissim rutrum tempor, neque risus 
 84 | 						sagittis mi, ac aliquam est massa eget lectus. Class aptent taciti sociosqu ad litora torquent 
 85 | 						per conubia nostra, per inceptos himenaeos. Ut pretium adipiscing ipsum, id iaculis quam mattis 
 86 | 						et. Cras mollis eleifend tortor, ut venenatis turpis pulvinar id. In hac habitasse platea 
 87 | 						dictumst. Pellentesque feugiat mi sit amet ligula convallis rhoncus fermentum sem aliquam. 
 88 | 						Vivamus egestas justo ac nisl facilisis sed aliquam mi ultrices. Suspendisse potenti. Sed 
 89 | 						elementum blandit nisl eu tempus.
 90 | 					</p>
 91 | 					<p class="content-text">
 92 | 						Nulla egestas facilisis ipsum sit amet semper. Curabitur leo ante, scelerisque ut ornare ac, 
 93 | 						egestas sit amet nunc. Aenean eget scelerisque lorem. Donec sapien felis, aliquam id vehicula 
 94 | 						sit amet, posuere venenatis urna. Aenean at dui libero. Nullam interdum molestie sem, vitae 
 95 | 						egestas augue pretium at. Duis erat erat, ultrices eu accumsan vitae, consectetur quis orci.
 96 | 					</p>
 97 | 					<p class="content-text">
 98 | 						Etiam vulputate pellentesque lacus ac ullamcorper. Vestibulum ac semper lacus. Nunc id accumsan 
 99 | 						lectus. Sed lacinia dui vel nisi tincidunt vitae varius nunc tincidunt. In hac habitasse platea 
100 | 						dictumst. Vestibulum purus sapien, eleifend quis commodo sed, euismod non velit. Morbi magna nisl, 
101 | 						tincidunt sed pretium ut, consequat sed nunc. Cras at diam est, nec consectetur nisi. Nulla ante 
102 | 						arcu, laoreet nec volutpat ut, malesuada quis velit.
103 | 					</p>
104 | 				</div>
105 | 			</div>
106 | 		</div>
107 | 		
108 | 		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
109 | 		<script src="js/flaunt.js"></script>
110 | 	
111 | 		<!-- Demo Analytics -->
112 | 		<script>
113 | 			var _gaq=[['_setAccount','UA-20440416-10'],['_trackPageview']];
114 | 			(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
115 | 			g.src='//www.google-analytics.com/ga.js';
116 | 			s.parentNode.insertBefore(g,s)})(document,'script');
117 | 		</script>
118 | 		
119 | 		<!-- Demo Ads -->
120 | 		<script src="//toddmotto.com/ads/ads.js"></script>
121 | 	</body>
122 | </html>


--------------------------------------------------------------------------------