Skip to content
This repository has been archived by the owner on Jan 22, 2024. It is now read-only.

Commit

Permalink
Created dropdown (nested lists) demo
Browse files Browse the repository at this point in the history
  • Loading branch information
Steven Morrison committed Feb 3, 2016
1 parent 6ffb066 commit 005b36d
Show file tree
Hide file tree
Showing 2 changed files with 196 additions and 36 deletions.
76 changes: 40 additions & 36 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,37 +1,41 @@
# Jolt
Front-end web development framework: HTML5 &amp; CSS3 by <a href="http://www.zaffri.com"><em>Zaffri</em></a>.

<p><b>Documentation:</b></p>
http://jolt.zaffri.com

<p>Live examples:</p>
http://jolt.zaffri.com <br />
http://zaffri.com

<i>Notable Features:</i>
<ul>
<li>1. Responsive cells</li>
<li>2. Full-page classes</li>
<li>3. Horizontal & Vertical alignment</li>
<li>4. Topbar component</li>
<ul>
<li>4.1 Dyanmic scroll styles</li>
<li>4.2 Responsive navigation with mobile 'burger' toggle</li>
<li>4.3 JavaScript fallback for mobile toggle</li>
</ul>
</ul>

<p><b>Demos:</b></p>
<ul>
<li>1. "demo-basic.html" - Basic demo of vertical/horizontal alignment and Topbar component.</li>
<li>2. <i>More to come...</i></li>
</ul>

<p><b>Templates:</b></p>
<ul>
<li>1. "starter-template-1.html" - Basic structure for Jolt site with single level navigation using Topbar component <i>(Markup only)</i>.</li>
<li>2. "starter-template-2.html" - Basic structure for Jolt site with dropdowns using Topbar component <i>(Markup only)</i>.</li>
</ul>

<p>I will be adding more functionality/fixing bugs as time goes on, let me know if you have any suggestions or constructive critism. Thanks!</p>
<p>Steven.</p>
Front-end web development framework: HTML5 &amp; CSS3 by [*Zaffri*](http://www.zaffri.com/).

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

## Documentation
* http://jolt.zaffri.com

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

## Live Examples
* http://jolt.zaffri.com
* http://zaffri.com

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

## Notable Features
1. Full-page classes
2. Responsive cells
3. Horizontal & Vertical alignment
4. Topbar component
4.1. Dyanmic scroll styles
4.2. Responsive navigation with mobile 'burger' toggle
4.3. JavaScript fallback for mobile toggle

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

## Demos
1. demo-basic.html - Basic demo of vertical/horizontal alignment and Topbar component.
2. demo-dropdowns.html - Basic demo of dropdown links (nested lists) within the Topbar component.

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

## Templates (Markup only)
1. "starter-template-1.html" - Basic structure for Jolt site with single level navigation using Topbar component.
2. "starter-template-2.html" - Basic structure for Jolt site with dropdowns using Topbar component.

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

I will be adding more functionality/fixing bugs as time goes on, let me know if you have any suggestions or constructive critism. Thanks!
Steven.
156 changes: 156 additions & 0 deletions demos/demo-dropdowns.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,156 @@
<!DOCTYPE html>
<html>
<head>
<title>Z-Nav ~ Responsive Nav by Zaffri</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

<link rel="stylesheet" type="text/css" href="css/global.min.css" />
<link rel="stylesheet" type="text/css" href="css/topbar.min.css" />

<!-- Custom styles - embedded and inline styles only for demo purposes -->
<style type="text/css">

@media screen and (max-width: 950px) {
#topbar #main-nav ul {
width: 50%;
}
}

#topbar #main-nav ul ul li a {
background: #181818;
color: #ccc;
}

#top-cell {
background: #bbb;
}

.cell {
height: 300px;
background: #ddd;
padding: 10px;
}

.cell:nth-child(2n) {
background: #ccc;
}

#main-nav a {
color: #0f1427;
}

#main-nav a:hover, #topbar #main-nav ul ul li a:hover {
background: #3086d7;
color: #fff;
}

@media screen and (max-width: 950px) {

#topbar #main-nav ul {
background: #181818;
}
#main-nav a {
color: #bbcff0;
}
#main-nav li a:hover {
background: #3086d7;
color: #eee;
}
}

#dynamic #topbar {
background: #181818;
}

#dynamic #main-nav a {
color: #bbcff0;
}

#dynamic #main-nav li a:hover {
background: #3086d7;
color: #eee;
}

#dynamic #main-logo {
color: #30dae9;
}

</style>

</head>
<body>
<!--- Start of Topbar --->
<header id="header">
<div id="topbar">

<label for="mobile-checkbox" id="mobile-icon">
<div class="burger-bar"></div>
<div class="burger-bar"></div>
<div class="burger-bar"></div>
</label>
<input type="checkbox" id="mobile-checkbox" />

<input type="checkbox" id="checked-support" checked="checked" />

<div id="main-logo"><h1>ZAFFRI</h1></div>

<nav id="main-nav">
<ul>
<li class="mobile-li"><a href="#">home</a></li
><li class="mobile-li" ><a href="#">info</a>
<ul>
<li><a href="#">About us</a></li>
<li><a href="#">Our team</a></li>
<li><a href="#">Support</a></li>
</ul>
</li
><li class="mobile-li"><a href="#">folio</a>
<ul>
<li><a href="#">Design</a></li>
<li><a href="#">Software Development</a></li>
</ul>
</li
><li class="mobile-li"><a href="#">contact</a></li>
</ul>
</nav>

<div class="clear"></div>
</div>
</header>
<!--- End of Topbar --->

<section class="full-background vh-area" style="height: 100vh; background: #efefef;">

<h1 class="vh-content text-center">Test</h1>

</section>

<section class="full-background vh-area" style="height: 100vh; background: #fefefe;">

<div class="vh-content text-center">
<h1 style="background: #ccc; width: 200px;height: 200px;" class="element-center">Test 2</h1>
</div>

</section>

<section class="full-background vh-area" style="height: 100vh; background: #efefef;">

<div class="container-mid">

<div class="small-cell-6 medium-cell-6 large-cell-4 cell">Cell</div>
<div class="small-cell-6 medium-cell-6 large-cell-4 cell">Cell</div>
<div class="small-cell-6 medium-cell-6 large-cell-4 cell">Cell</div>

<div class="small-cell-6 medium-cell-6 large-cell-4 cell">Cell</div>
<div class="small-cell-6 medium-cell-6 large-cell-4 cell">Cell</div>
<div class="small-cell-6 medium-cell-6 large-cell-4 cell">Cell</div>

</div>

</section>

<script src="js/topbar.min.js"></script>
<script>topBar();</script>
</body>
</html>

0 comments on commit 005b36d

Please sign in to comment.