Skip to content

Commit 915fe8e

Browse files
author
Todd Motto
committed
Commit Flaunt
1 parent f5b8dd5 commit 915fe8e

9 files changed

+411
-2
lines changed

‎README.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
flaunt-js
1+
Flaunt.js
22
=========
33

4-
Flaunt JS, stylish responsive navigations with nested click to reveal
4+
Flaunt JS, stylish responsive navigations with nested click to reveal.

‎css/demo.css

+160
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
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-submenu {
156+
display:none !important;
157+
position:static;
158+
width:100%;
159+
}
160+
}

‎css/main.css

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
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+
}

‎img/drop.svg

+6
Loading

‎img/logo.png

2.16 KB
Loading

‎img/nav.svg

+7
Loading

‎index.html

+122
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
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>

0 commit comments

Comments
 (0)