963 lines
58 KiB
HTML
963 lines
58 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<link rel="stylesheet" type="text/css" media="all" href="assets/css/cascade/production/build-full.min.css" />
|
||
|
|
<link rel="stylesheet" type="text/css" media="all" href="assets/css/site.css" />
|
||
|
|
<!--[if lt IE 8]><link rel="stylesheet" href="assets/css/cascade/production/icons-ie7.min.css"><![endif]-->
|
||
|
|
<!--[if lt IE 9]><script src="assets/js/shim/iehtmlshiv.js"></script><![endif]-->
|
||
|
|
<title>Cascade Framework</title>
|
||
|
|
<meta name="description" content="Professional Frontend framework that makes building websites easier than ever.">
|
||
|
|
<link rel="shortcut icon" href="assets/img/favicon.ico" type="image/x-icon" />
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
|
<style type="text/css">
|
||
|
|
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body class="narrow">
|
||
|
|
<div class="site-center">
|
||
|
|
<div class="site-body">
|
||
|
|
<div class="site-header">
|
||
|
|
<div class="tags sitemenutags">
|
||
|
|
<div class="cell">
|
||
|
|
<ul class="nav blocks">
|
||
|
|
<li><a href="https://github.com/jslegers/cascadeframework/archive/master.zip">Download v1.6</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col width-fill sitemenu">
|
||
|
|
<div class="col width-fit mobile-width-fit">
|
||
|
|
<div class="cell">
|
||
|
|
<a href="index.html" class="logo"></a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col width-fill mobile-width-fill">
|
||
|
|
<div class="cell">
|
||
|
|
<ul class="nav">
|
||
|
|
<li><a href="grid.html">Grid</a></li>
|
||
|
|
<li><a href="typography.html">Typography</a></li>
|
||
|
|
<li><a href="icons.html">Icons</a></li>
|
||
|
|
<li class="active"><a href="components.html">Components</a></li>
|
||
|
|
<li><a href="templates.html">Templates</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="sitemenu-responsive col collapsible collapsed">
|
||
|
|
<div class="col collapse-trigger">
|
||
|
|
<div class="cell">
|
||
|
|
<ul class="nav ">
|
||
|
|
<li><a href="#"><span class="icon icon-32 icon-align-justify"></span></a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col">
|
||
|
|
<div class="left collapse-section">
|
||
|
|
<div class="cell">
|
||
|
|
<ul class="nav">
|
||
|
|
<li><a href="index.html">Home</a></li>
|
||
|
|
<li><a href="grid.html">Grid</a></li>
|
||
|
|
<li><a href="typography.html">Typography</a></li>
|
||
|
|
<li><a href="icons.html">Icons</a></li>
|
||
|
|
<li><a href="components.html">Components</a></li>
|
||
|
|
<li><a href="templates.html">Templates</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col">
|
||
|
|
<div class="cell">
|
||
|
|
<div class="col">
|
||
|
|
<div class="cell">
|
||
|
|
<div class="page-header">
|
||
|
|
<h1>Components <small>documentation</small></h1>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col width-1of4">
|
||
|
|
<div class="cell menu">
|
||
|
|
<span class="tiny">Component types</span>
|
||
|
|
<ul class="left nav links">
|
||
|
|
<li><a href="components.html">Panels</a></li>
|
||
|
|
<li><a href="components-tabblocks.html">Tab blocks</a></li>
|
||
|
|
<li><a href="components-tables.html">Tables</a></li>
|
||
|
|
<li class="active"><a href="components-navigation.html">Navigation</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col width-fill">
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<div class="col">
|
||
|
|
<div class="cell">
|
||
|
|
<h2>Basic navigation</h2>
|
||
|
|
<p>By adding the "nav" class to your unordened list, you have a basic navigation element with normalised layout that can be customised
|
||
|
|
according to your needs.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col">
|
||
|
|
<div class="cell panel">
|
||
|
|
<div class="body">
|
||
|
|
<div class="cell">
|
||
|
|
<div class="col">
|
||
|
|
<div class="cell">
|
||
|
|
<ul class="nav">
|
||
|
|
<li><a href="#">Normal item</a></li>
|
||
|
|
<li class="active"><a href="#">Active item</a></li>
|
||
|
|
<li class="disabled">Disabled item</li>
|
||
|
|
<li><a href="#">Another normal item</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<div class="col">
|
||
|
|
<div class="cell">
|
||
|
|
<h2>Navigation orientation</h2>
|
||
|
|
<p>By adding a "right", "left" or "bottom" class to your navigation element, you can change its orientation.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col">
|
||
|
|
<div class="cell panel">
|
||
|
|
<div class="body">
|
||
|
|
<div class="cell">
|
||
|
|
<div class="col">
|
||
|
|
<div class="cell">
|
||
|
|
<ul class="nav">
|
||
|
|
<li><a href="#">Normal item</a></li>
|
||
|
|
<li class="active"><a href="#">Active item</a></li>
|
||
|
|
<li class="disabled">Disabled item</li>
|
||
|
|
<li><a href="#">Another normal item</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col">
|
||
|
|
<div class="cell">
|
||
|
|
<ul class="bottom nav">
|
||
|
|
<li><a href="#">Normal item</a></li>
|
||
|
|
<li class="active"><a href="#">Active item</a></li>
|
||
|
|
<li class="disabled">Disabled item</li>
|
||
|
|
<li><a href="#">Another normal item</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col width-1of2">
|
||
|
|
<div class="cell">
|
||
|
|
<ul class="left nav">
|
||
|
|
<li><a href="#">Normal item</a></li>
|
||
|
|
<li class="active"><a href="#">Active item</a></li>
|
||
|
|
<li class="disabled">Disabled item</li>
|
||
|
|
<li><a href="#">Another normal item</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col width-fill">
|
||
|
|
<div class="cell">
|
||
|
|
<ul class="right nav">
|
||
|
|
<li><a href="#">Normal item</a></li>
|
||
|
|
<li class="active"><a href="#">Active item</a></li>
|
||
|
|
<li class="disabled">Disabled item</li>
|
||
|
|
<li><a href="#">Another normal item</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<div class="col">
|
||
|
|
<div class="cell">
|
||
|
|
<h2>Menu</h2>
|
||
|
|
<p>By adding a "menu" class to the navigation element's wrapper, you get a basic menu.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col">
|
||
|
|
<div class="cell panel">
|
||
|
|
<div class="body">
|
||
|
|
<div class="cell">
|
||
|
|
<div class="col">
|
||
|
|
<div class="menu cell">
|
||
|
|
<ul class="nav">
|
||
|
|
<li><a href="#">Normal item</a></li>
|
||
|
|
<li class="active"><a href="#">Active item</a></li>
|
||
|
|
<li class="disabled">Disabled item</li>
|
||
|
|
<li><a href="#">Another normal item</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col">
|
||
|
|
<div class="menu cell">
|
||
|
|
<ul class="bottom nav">
|
||
|
|
<li><a href="#">Normal item</a></li>
|
||
|
|
<li class="active"><a href="#">Active item</a></li>
|
||
|
|
<li class="disabled">Disabled item</li>
|
||
|
|
<li><a href="#">Another normal item</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col width-1of2">
|
||
|
|
<div class="menu cell">
|
||
|
|
<ul class="left nav">
|
||
|
|
<li><a href="#">Normal item</a></li>
|
||
|
|
<li class="active"><a href="#">Active item</a></li>
|
||
|
|
<li class="disabled">Disabled item</li>
|
||
|
|
<li><a href="#">Another normal item</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col width-fill">
|
||
|
|
<div class="menu cell">
|
||
|
|
<ul class="right nav">
|
||
|
|
<li><a href="#">Normal item</a></li>
|
||
|
|
<li class="active"><a href="#">Active item</a></li>
|
||
|
|
<li class="disabled">Disabled item</li>
|
||
|
|
<li><a href="#">Another normal item</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<div class="col">
|
||
|
|
<div class="cell">
|
||
|
|
<h2>Links menu</h2>
|
||
|
|
<p>By adding a "links" class to the navigation element, your menu becomes a menu of ordinary links. This same technique
|
||
|
|
can be used to override the default styling for menus or other navigation elements with your custom code.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col">
|
||
|
|
<div class="cell panel">
|
||
|
|
<div class="body">
|
||
|
|
<div class="cell">
|
||
|
|
<div class="col">
|
||
|
|
<div class="menu cell">
|
||
|
|
<ul class="links nav">
|
||
|
|
<li><a href="#">Normal item</a></li>
|
||
|
|
<li class="active"><a href="#">Active item</a></li>
|
||
|
|
<li class="disabled">Disabled item</li>
|
||
|
|
<li><a href="#">Another normal item</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col">
|
||
|
|
<div class="menu cell">
|
||
|
|
<ul class="bottom links nav">
|
||
|
|
<li><a href="#">Normal item</a></li>
|
||
|
|
<li class="active"><a href="#">Active item</a></li>
|
||
|
|
<li class="disabled">Disabled item</li>
|
||
|
|
<li><a href="#">Another normal item</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col width-1of2">
|
||
|
|
<div class="menu cell">
|
||
|
|
<ul class="left links nav">
|
||
|
|
<li><a href="#">Normal item</a></li>
|
||
|
|
<li class="active"><a href="#">Active item</a></li>
|
||
|
|
<li class="disabled">Disabled item</li>
|
||
|
|
<li><a href="#">Another normal item</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col width-fill">
|
||
|
|
<div class="menu cell">
|
||
|
|
<ul class="right links nav">
|
||
|
|
<li><a href="#">Normal item</a></li>
|
||
|
|
<li class="active"><a href="#">Active item</a></li>
|
||
|
|
<li class="disabled">Disabled item</li>
|
||
|
|
<li><a href="#">Another normal item</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<div class="col">
|
||
|
|
<div class="cell">
|
||
|
|
<h2>Menu stats</h2>
|
||
|
|
<p>By adding a "stats" class to the navigation element, you get a special menu type that can be used eg. for displaying stats.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col">
|
||
|
|
<div class="cell panel">
|
||
|
|
<div class="body">
|
||
|
|
<div class="cell">
|
||
|
|
<div class="col">
|
||
|
|
<div class="cell menu">
|
||
|
|
<ul class="stat left nav">
|
||
|
|
<li><a href="#"><span class="data">1,234</span>donuts</a></li>
|
||
|
|
<li><a href="#"><span class="data">567</span>kayaks</a></li>
|
||
|
|
<li><a href="#"><span class="data">23,456</span>kittens</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<div class="col">
|
||
|
|
<div class="cell">
|
||
|
|
<h2>Tree nav</h2>
|
||
|
|
<p>Cascade framework supports a tree navigation as well. Using the JS features of the framework, it also supports
|
||
|
|
collapsing.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col">
|
||
|
|
<div class="cell panel">
|
||
|
|
<div class="body">
|
||
|
|
<div class="cell">
|
||
|
|
<div class="col">
|
||
|
|
<div class="cell">
|
||
|
|
<ul class="nav tree">
|
||
|
|
<li class="collapsible"><a class="collapse-trigger" href="documents">My Documents</a>
|
||
|
|
<ul class="collapse-section">
|
||
|
|
<li class="collapsible collapsed"><a class="collapse-trigger" href="documents/Christines_Files/">Christine's Files</a>
|
||
|
|
<ul class="collapse-section">
|
||
|
|
<li class=""><a href="#" class="">Resume.doc</a></li>
|
||
|
|
<li class=""><a href="#" class="">Cover-letter.doc</a></li>
|
||
|
|
|
||
|
|
<li class=""><a href="#" class="">Gift Registry.doc</a></li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li class="collapsible collapsed"><a class="collapse-trigger" href="documents/Nathans_Stuff/">Nathan's Stuff</a>
|
||
|
|
<ul class="collapse-section">
|
||
|
|
<li class=""><a href="#" class="">Birthday Parties.doc</a></li>
|
||
|
|
<li class=""><a href="#" class="">Area Playgrounds.doc</a></li>
|
||
|
|
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li class="collapsible collapsed"><a class="collapse-trigger" href="documents/Travel_Ideas/">Travel Ideas</a>
|
||
|
|
<ul class="collapse-section">
|
||
|
|
<li class=""><a href="#" class="">Potential Places.doc</a></li>
|
||
|
|
<li class=""><a href="#" class="">Travel Funds.doc</a></li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
</li>
|
||
|
|
<li class="collapsible collapsed"><a class="collapse-trigger" href="documents/Wedding_Plan/">Wedding Plan</a>
|
||
|
|
<ul class="collapse-section">
|
||
|
|
<li class=""><a href="#" class="">Guests.doc</a></li>
|
||
|
|
<li class=""><a href="#" class="">Services.doc</a></li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li class="collapsible collapsed"><a class="collapse-trigger" href="documents/Wedding_Plan/">New folder</a>
|
||
|
|
<ul class="collapse-section">
|
||
|
|
<li class="collapsible collapsed"><a class="collapse-trigger" href="documents/Wedding_Plan/">New folder</a>
|
||
|
|
<ul class="collapse-section">
|
||
|
|
<li class="collapsible collapsed"><a class="collapse-trigger" href="documents/Wedding_Plan/">New folder</a>
|
||
|
|
<ul class="collapse-section">
|
||
|
|
<li class="collapsible collapsed"><a class="collapse-trigger" href="documents/Wedding_Plan/">New folder</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<div class="col">
|
||
|
|
<div class="cell">
|
||
|
|
<h2>Folder tree</h2>
|
||
|
|
<p>The tree navigation can be used to implement OS style folder trees.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col">
|
||
|
|
<div class="cell panel">
|
||
|
|
<div class="body">
|
||
|
|
<div class="cell">
|
||
|
|
<div class="col">
|
||
|
|
<div class="cell files">
|
||
|
|
<ul class="nav tree">
|
||
|
|
<li class="collapsible"><a class="collapse-trigger" href="documents">My Documents</a>
|
||
|
|
<ul class="collapse-section">
|
||
|
|
<li class="collapsible collapsed"><a class="collapse-trigger" href="documents/Christines_Files/">Christine's Files</a>
|
||
|
|
<ul class="collapse-section">
|
||
|
|
<li class=""><a href="#" class="">Resume.doc</a></li>
|
||
|
|
<li class=""><a href="#" class="">Cover-letter.doc</a></li>
|
||
|
|
|
||
|
|
<li class=""><a href="#" class="">Gift Registry.doc</a></li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li class="collapsible collapsed"><a class="collapse-trigger" href="documents/Nathans_Stuff/">Nathan's Stuff</a>
|
||
|
|
<ul class="collapse-section">
|
||
|
|
<li class=""><a href="#" class="">Birthday Parties.doc</a></li>
|
||
|
|
<li class=""><a href="#" class="">Area Playgrounds.doc</a></li>
|
||
|
|
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li class="collapsible collapsed"><a class="collapse-trigger" href="documents/Travel_Ideas/">Travel Ideas</a>
|
||
|
|
<ul class="collapse-section">
|
||
|
|
<li class=""><a href="#" class="">Potential Places.doc</a></li>
|
||
|
|
<li class=""><a href="#" class="">Travel Funds.doc</a></li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
</li>
|
||
|
|
<li class="collapsible collapsed"><a class="collapse-trigger" href="documents/Wedding_Plan/">Wedding Plan</a>
|
||
|
|
<ul class="collapse-section">
|
||
|
|
<li class=""><a href="#" class="">Guests.doc</a></li>
|
||
|
|
<li class=""><a href="#" class="">Services.doc</a></li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li class="collapsible collapsed"><a class="collapse-trigger" href="documents/Wedding_Plan/">New folder</a>
|
||
|
|
<ul class="collapse-section">
|
||
|
|
<li class="collapsible collapsed"><a class="collapse-trigger" href="documents/Wedding_Plan/">New folder</a>
|
||
|
|
<ul class="collapse-section">
|
||
|
|
<li class="collapsible collapsed"><a class="collapse-trigger" href="documents/Wedding_Plan/">New folder</a>
|
||
|
|
<ul class="collapse-section">
|
||
|
|
<li class="collapsible collapsed"><a class="collapse-trigger" href="documents/Wedding_Plan/">New folder</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<div class="col">
|
||
|
|
<div class="cell">
|
||
|
|
<h2>Menu tree</h2>
|
||
|
|
<p>A menu tree combines menu navigation with tree navigation.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col">
|
||
|
|
<div class="cell panel">
|
||
|
|
<div class="body">
|
||
|
|
<div class="cell">
|
||
|
|
<div class="col">
|
||
|
|
<div class="cell menu">
|
||
|
|
<ul class="nav tree">
|
||
|
|
<li class="collapsible"><a class="collapse-trigger" href="documents"><span class="icon icon-collapse"></span>My Documents</a>
|
||
|
|
<ul class="collapse-section">
|
||
|
|
<li class="collapsible collapsed"><a class="collapse-trigger" href="documents/Christines_Files/"><span class="icon icon-collapse"></span>Christine's Files</a>
|
||
|
|
<ul class="collapse-section">
|
||
|
|
<li><a href="#">Resume.doc</a></li>
|
||
|
|
<li><a href="#">Cover-letter.doc</a></li>
|
||
|
|
|
||
|
|
<li><a href="#">Gift Registry.doc</a></li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li class="collapsible collapsed"><a class="collapse-trigger" href="documents/Nathans_Stuff/"><span class="icon icon-collapse"></span>Nathan's Stuff</a>
|
||
|
|
<ul class="collapse-section">
|
||
|
|
<li><a href="#">Birthday Parties.doc</a></li>
|
||
|
|
<li><a href="#">Area Playgrounds.doc</a></li>
|
||
|
|
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li class="collapsible collapsed"><a class="collapse-trigger" href="documents/Travel_Ideas/"><span class="icon icon-collapse"></span>Travel Ideas</a>
|
||
|
|
<ul class="collapse-section">
|
||
|
|
<li class=""><a href="#" class="">Potential Places.doc</a></li>
|
||
|
|
<li class=""><a href="#" class="">Travel Funds.doc</a></li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
</li>
|
||
|
|
<li class="collapsible collapsed"><a class="collapse-trigger" href="documents/Wedding_Plan/"><span class="icon icon-collapse"></span>Wedding Plan</a>
|
||
|
|
<ul class="collapse-section">
|
||
|
|
<li class=""><a href="#" class="">Guests.doc</a></li>
|
||
|
|
<li class=""><a href="#" class="">Services.doc</a></li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li class="collapsible collapsed"><a class="collapse-trigger" href="documents/Wedding_Plan/"><span class="icon icon-collapse"></span>New folder</a>
|
||
|
|
<ul class="collapse-section">
|
||
|
|
<li class="collapsible collapsed"><a class="collapse-trigger" href="documents/Wedding_Plan/"><span class="icon icon-collapse"></span>New folder</a>
|
||
|
|
<ul class="collapse-section">
|
||
|
|
<li class="collapsible collapsed"><a class="collapse-trigger" href="documents/Wedding_Plan/"><span class="icon icon-collapse"></span>New folder</a>
|
||
|
|
<ul class="collapse-section">
|
||
|
|
<li class="collapsible collapsed"><a class="collapse-trigger" href="documents/Wedding_Plan/"><span class="icon icon-collapse"></span>New folder</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<div class="col">
|
||
|
|
<div class="cell">
|
||
|
|
<h2>Tabs</h2>
|
||
|
|
<p>By adding a "tabs" class to the navigation element's wrapper, you get a basic tab navigation element.
|
||
|
|
Notice that this element has a default width of 100% and thus the "tabs" class shouldn't be used on markup that
|
||
|
|
has a margin.<br />
|
||
|
|
If you use Cascade Framework's JS, well-defined tabs are automaticly enabled.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col">
|
||
|
|
<div class="cell panel">
|
||
|
|
<div class="body">
|
||
|
|
<div class="cell">
|
||
|
|
<div class="col">
|
||
|
|
<div class="cell">
|
||
|
|
<div class="tabs">
|
||
|
|
<ul class="nav">
|
||
|
|
<li><a href="#">Normal item</a></li>
|
||
|
|
<li class="active"><a href="#">Active item</a></li>
|
||
|
|
<li class="disabled">Disabled item</li>
|
||
|
|
<li><a href="#">Another normal item</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col">
|
||
|
|
<div class="cell">
|
||
|
|
<div class="tabs">
|
||
|
|
<ul class="bottom nav">
|
||
|
|
<li><a href="#">Normal item</a></li>
|
||
|
|
<li class="active"><a href="#">Active item</a></li>
|
||
|
|
<li class="disabled">Disabled item</li>
|
||
|
|
<li><a href="#">Another normal item</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col width-1of2">
|
||
|
|
<div class="cell">
|
||
|
|
<div class="tabs">
|
||
|
|
<ul class="left nav">
|
||
|
|
<li><a href="#">Normal item</a></li>
|
||
|
|
<li class="active"><a href="#">Active item</a></li>
|
||
|
|
<li class="disabled">Disabled item</li>
|
||
|
|
<li><a href="#">Another normal item</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col width-fill">
|
||
|
|
<div class="cell">
|
||
|
|
<div class="tabs">
|
||
|
|
<ul class="right nav">
|
||
|
|
<li><a href="#">Normal item</a></li>
|
||
|
|
<li class="active"><a href="#">Active item</a></li>
|
||
|
|
<li class="disabled">Disabled item</li>
|
||
|
|
<li><a href="#">Another normal item</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<div class="col">
|
||
|
|
<div class="cell">
|
||
|
|
<h2>Gallery</h2>
|
||
|
|
<p>By adding a "gallery" class to the navigation element's wrapper, you get a basic gallery element.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col">
|
||
|
|
<div class="cell panel">
|
||
|
|
<div class="body">
|
||
|
|
<div class="cell">
|
||
|
|
<div class="col">
|
||
|
|
<div class="gallery cell">
|
||
|
|
<ul class="nav">
|
||
|
|
<li><img src="assets/img/100x100.gif"></li>
|
||
|
|
<li><img src="assets/img/100x100.gif"></li>
|
||
|
|
<li><img src="assets/img/100x100.gif"></li>
|
||
|
|
<li><img src="assets/img/100x100.gif"></li>
|
||
|
|
<li><img src="assets/img/100x100.gif"></li>
|
||
|
|
<li><img src="assets/img/100x100.gif"></li>
|
||
|
|
<li><img src="assets/img/100x100.gif"></li>
|
||
|
|
<li><img src="assets/img/100x100.gif"></li>
|
||
|
|
<li><img src="assets/img/100x100.gif"></li>
|
||
|
|
<li><img src="assets/img/100x100.gif"></li>
|
||
|
|
<li><img src="assets/img/100x100.gif"></li>
|
||
|
|
<li><img src="assets/img/100x100.gif"></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<div class="col">
|
||
|
|
<div class="cell">
|
||
|
|
<h2>Tags</h2>
|
||
|
|
<p>By adding a "tags" class to the navigation element's wrapper, you get a basic tag navigation element. It has a basic normalised
|
||
|
|
markup.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col">
|
||
|
|
<div class="cell panel">
|
||
|
|
<div class="body">
|
||
|
|
<div class="cell">
|
||
|
|
<div class="col">
|
||
|
|
<div class="cell tags">
|
||
|
|
<ul class="nav">
|
||
|
|
<li class="disabled">Lorem ipsum</li>
|
||
|
|
<li class="active"><a href="#">Dolor sit amet</a></li>
|
||
|
|
<li><a href="#">Consectetur adipiscing elit</a></li>
|
||
|
|
<li><a href="#">Proin </a></li>
|
||
|
|
<li><a href="#">Sagittis libero</a></li>
|
||
|
|
<li><a href="#">Aliquet augue</a></li>
|
||
|
|
<li><a href="#">Quisque dui lacus</a></li>
|
||
|
|
<li><a href="#">Consequat</a></li>
|
||
|
|
<li><a href="#">Dictum non</a></li>
|
||
|
|
<li><a href="#">Venenatis et tortor</a></li>
|
||
|
|
<li><a href="#">Suspendisse mauris</a></li>
|
||
|
|
<li><a href="#">In accumsan </a></li>
|
||
|
|
<li><a href="#">Egestas neque</a></li>
|
||
|
|
<li><a href="#">Mauris eget felis</a></li>
|
||
|
|
<li><a href="#">Suspendisse</a></li>
|
||
|
|
<li><a href="#">condimentum eleifend nulla</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<div class="col">
|
||
|
|
<div class="cell">
|
||
|
|
<h2>Cloud tags</h2>
|
||
|
|
<p>By adding a "cloud" class to the navigation element, your tag navigation elements become cloud tags. Five different sizes
|
||
|
|
are supported out of the box.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col">
|
||
|
|
<div class="cell panel">
|
||
|
|
<div class="body">
|
||
|
|
<div class="cell">
|
||
|
|
<div class="col">
|
||
|
|
<div class="cell tags">
|
||
|
|
<ul class="cloud nav">
|
||
|
|
<li class="tag1 disabled">Lorem ipsum</li>
|
||
|
|
<li class="tag2 active"><a href="#">Dolor sit amet</a></li>
|
||
|
|
<li class="tag3"><a href="#">Consectetur adipiscing elit</a></li>
|
||
|
|
<li class="tag2"><a href="#">Proin </a></li>
|
||
|
|
<li class="tag4"><a href="#">Sagittis libero</a></li>
|
||
|
|
<li class="tag1"><a href="#">Aliquet augue</a></li>
|
||
|
|
<li class="tag1"><a href="#">Quisque dui lacus</a></li>
|
||
|
|
<li class="tag5"><a href="#">Consequat</a></li>
|
||
|
|
<li class="tag2"><a href="#">Dictum non</a></li>
|
||
|
|
<li class="tag1"><a href="#">Venenatis et tortor</a></li>
|
||
|
|
<li class="tag3"><a href="#">Suspendisse mauris</a></li>
|
||
|
|
<li class="tag4"><a href="#">In accumsan </a></li>
|
||
|
|
<li class="tag1"><a href="#">Egestas neque</a></li>
|
||
|
|
<li class="tag5"><a href="#">Mauris eget felis</a></li>
|
||
|
|
<li class="tag1"><a href="#">Suspendisse</a></li>
|
||
|
|
<li class="tag2"><a href="#">condimentum eleifend nulla</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<div class="col">
|
||
|
|
<div class="cell">
|
||
|
|
<h2>Block tags</h2>
|
||
|
|
<p>By adding a "blocks" class to the navigation element, your tag navigation elements become button-like tags.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col">
|
||
|
|
<div class="cell panel">
|
||
|
|
<div class="body">
|
||
|
|
<div class="cell">
|
||
|
|
<div class="col">
|
||
|
|
<div class="cell tags">
|
||
|
|
<ul class="nav blocks">
|
||
|
|
<li class="disabled">Lorem ipsum</li>
|
||
|
|
<li class="active"><a href="#">Dolor sit amet</a></li>
|
||
|
|
<li><a href="#">Consectetur adipiscing elit</a></li>
|
||
|
|
<li><a href="#">Proin </a></li>
|
||
|
|
<li><a href="#">Sagittis libero</a></li>
|
||
|
|
<li><a href="#">Aliquet augue</a></li>
|
||
|
|
<li><a href="#">Quisque dui lacus</a></li>
|
||
|
|
<li><a href="#">Consequat</a></li>
|
||
|
|
<li><a href="#">Dictum non</a></li>
|
||
|
|
<li><a href="#">Venenatis et tortor</a></li>
|
||
|
|
<li><a href="#">Suspendisse mauris</a></li>
|
||
|
|
<li><a href="#">In accumsan </a></li>
|
||
|
|
<li><a href="#">Egestas neque</a></li>
|
||
|
|
<li><a href="#">Mauris eget felis</a></li>
|
||
|
|
<li><a href="#">Suspendisse</a></li>
|
||
|
|
<li><a href="#">condimentum eleifend nulla</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<div class="col">
|
||
|
|
<div class="cell">
|
||
|
|
<h2>Pipes</h2>
|
||
|
|
<p>By adding a "pipes" class to the navigation element's wrapper, you get a basic pipes navigation element. The pipes
|
||
|
|
element can contain regular text items along with nav items.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col">
|
||
|
|
<div class="cell panel">
|
||
|
|
<div class="body">
|
||
|
|
<div class="cell">
|
||
|
|
<div class="col">
|
||
|
|
<div class="cell">
|
||
|
|
<div class="pipes">
|
||
|
|
<ul class="nav">
|
||
|
|
<li><a href="#">Normal item</a></li>
|
||
|
|
<li class="active"><a href="#">Active item</a></li>
|
||
|
|
<li class="disabled">Disabled item</li>
|
||
|
|
<li>Normal text</li>
|
||
|
|
<li>Some text with a <a href="#">link</a> embedded</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<div class="col">
|
||
|
|
<div class="cell">
|
||
|
|
<h2>Pipe stats</h2>
|
||
|
|
<p>The "pipes" nativation element can also be used as an equivalent to the menu stats.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col">
|
||
|
|
<div class="cell panel">
|
||
|
|
<div class="body">
|
||
|
|
<div class="cell">
|
||
|
|
<div class="col">
|
||
|
|
<div class="cell pipes">
|
||
|
|
<ul class="stat nav">
|
||
|
|
<li><a href="#">1,234 <span class="data">donuts</span></a></li>
|
||
|
|
<li><a href="#">567 <span class="data">kayaks</span></a></li>
|
||
|
|
<li><a href="#">23,456 <span class="data">kittens</span></a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<div class="col">
|
||
|
|
<div class="cell">
|
||
|
|
<h2>Pagination</h2>
|
||
|
|
<p>The "pagination" nativation element can be used for simple pagination.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col">
|
||
|
|
<div class="cell panel">
|
||
|
|
<div class="body">
|
||
|
|
<div class="cell">
|
||
|
|
<div class="col">
|
||
|
|
<div class="cell pagination">
|
||
|
|
<ul class="nav">
|
||
|
|
<li><a href="#">Prev</a></li>
|
||
|
|
<li><a href="#">1</a></li>
|
||
|
|
<li><a href="#">2</a></li>
|
||
|
|
<li><a href="#">3</a></li>
|
||
|
|
<li><a href="#">Next</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="site-footer">
|
||
|
|
<div class="cell">
|
||
|
|
<div id="sociallogos">
|
||
|
|
<a href="https://twitter.com/cascadecss"><span class="icon icon-32 icon-twitter"></span></a>
|
||
|
|
<a href="http://www.facebook.com/cascadeframework"><span class="icon icon-32 icon-facebook-sign"></span></a>
|
||
|
|
<a href="https://github.com/CascadeFramework"><span class="icon icon-32 icon-github"></span></a>
|
||
|
|
<div class="col">
|
||
|
|
© 2013, <a href="http://www.johnslegers.com/">John Slegers</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<a href="http://www.cascade-framework.com/" class="powered-by"></a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<script src="assets/js/app.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|