Skip to content

Instantly share code, notes, and snippets.

@chehab

chehab/dumy-page.html

Created July 28, 2013 16:39
Show Gist options
  • Save chehab/6099224 to your computer and use it in GitHub Desktop.
Save chehab/6099224 to your computer and use it in GitHub Desktop.
Download ZIP
nav-tree ( Bootstrap 3 + Font Awesome )
Raw
dumy-page.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title> nav-tree &mdash; Bootstrap3 + Font Awesome </title>
<!-- Latest compiled and minified CSS -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
<style rel="stylesheet">
.nav-tree .branch-header ~ li{ padding-left: 15px; }
.nav-tree .trunk li.stem{ display:none; }
.nav-tree .branch ul{ margin-left: 3px; }
</style>
</head>
<body style="padding-top: 60px;">
<div class="container">
<div class="row">
<div class="col-lg-3">
<div class="well" style="min-width:200px; padding: 8px;">
<div style="min-height: 500px;">
<ul class="nav nav-list nav-tree">
<li class="tree trunk"> <!-- level 1 -->
<ul class="nav nav-list">
<li class="branch-header">
<a class="tree-toggler icon-folder-close" href="#"> A Folder </a>
</li>
<li class="tree stem"><a class="icon-file stem-link" href="#"> File </a></li>
<li class="tree stem"><a class="icon-file stem-link" href="#"> File </a></li>
<li class="tree stem branch"> <!-- level 1.1 -->
<ul class="nav nav-list">
<li class="branch-header">
<a class="tree-toggler icon-folder-close stem-link" href="#"> A Sub Folder </a>
</li>
<li class="tree stem"><a class="icon-file stem-link"href="#"> File </a></li>
<li class="tree stem"><a class="icon-file stem-link" href="#"> File </a></li>
</ul>
</li> <!-- /level 1.1 -->
</ul>
</li> <!-- /level 1 -->
<li class="tree trunk"> <!-- level 2 -->
<ul class="nav nav-list">
<li class="branch-header">
<a class="tree-toggler icon-folder-close" href="#"> Another Folder</a>
</li>
<li class="tree stem"> <a class="icon-file" href="#"> File </a></li>
<li class="tree stem"> <a class="icon-file" href="#"> File </a></li>
<li class="tree stem branch"> <!-- level 2.1 -->
<ul class="nav nav-list">
<li class="branch-header">
<a class="tree-toggler icon-folder-close" href="#"> Sub Folder</a>
</li>
<li class="tree stem"> <a class="icon-file" href="#"> File </a> </li>
<li class="tree stem"> <a class="icon-file" href="#"> File </a> </li>
<li class="tree stem branch"> <!-- level 2.1.1 -->
<ul class="nav nav-list">
<li class="branch-header">
<a class="tree-toggler icon-folder-close" href="#"> Subsub Folder</a>
</li>
<li class="tree stem"> <a class="icon-file" href="#"> File </a></li>
<li class="tree stem"> <a class="icon-file" href="#"> File </a></li>
</ul>
</li> <!-- /level 2.1.1 -->
</ul>
</li> <!-- /level 2.1 -->
<li class="tree stem branch"> <!-- level 2.2 -->
<ul class="nav nav-list">
<li class="branch-header">
<a class="tree-toggler icon-folder-close" href="#"> Another Sub Folder </a>
</li>
<li class="tree stem"> <a class="icon-file" href="#"> File</a></li>
<li class="tree stem"> <a class="icon-file" href="#"> File</a></li>
<li class="tree stem branch"> <!-- level 2.2.1 -->
<ul class="nav nav-list">
<li class="branch-header">
<a class="tree-toggler icon-folder-close" href="#"> Subsub Folder </a>
</li>
<li class="tree stem"> <a class="icon-file" href="#"> File </a></li>
<li class="tree stem"> <a class="icon-file" href="#"> File </a></li>
</ul>
</li> <!-- /level 2.2.1 -->
</ul>
</li> <!-- /level 2.2 -->
</ul>
</li> <!-- /level 2 -->
<li class="tree stem"> <a class="icon-file" href="#"> A File </a></li>
<li class="tree stem"> <a class="icon-file" href="#"> Another File </a></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-9">
<!-- -->
</div>
</div>
</div>
<!-- Latest compiled and minified JavaScript -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function () {
$('.tree-toggler').click(function () {
$(this).parent().parent().children('.tree.stem').toggle(300);
$(this).toggleClass("icon-folder-open").animate(300);
$(this).toggleClass("icon-folder-close").animate(300);
});
});
</script>
</body>
</html>
Raw
nav-tree.html
<ul class="nav nav-list nav-tree">
<li class="tree trunk"> <!-- level1 -->
<ul class="nav nav-list">
<li class="branch-header">
<a class="tree-toggler icon-folder-close" href="#"> A Folder </a>
</li>
<li class="tree stem"><a class="icon-file stem-link" href="#"> File </a></li>
<li class="tree stem"><a class="icon-file stem-link" href="#"> File </a></li>
<li class="tree stem branch"> <!-- level 1.1 -->
<ul class="nav nav-list">
<li class="branch-header">
<a class="tree-toggler icon-folder-close stem-link" href="#"> A Sub Folder </a>
</li>
<li class="tree stem"><a class="icon-file stem-link"href="#"> File </a></li>
<li class="tree stem"><a class="icon-file stem-link" href="#"> File </a></li>
</ul>
</li> <!-- /level 1.1 -->
</ul>
</li> <!-- /level 1 -->
<li class="tree trunk"> <!-- level 2 -->
<ul class="nav nav-list">
<li class="branch-header">
<a class="tree-toggler icon-folder-close" href="#"> Another Folder</a>
</li>
<li class="tree stem"> <a class="icon-file" href="#"> File </a></li>
<li class="tree stem"> <a class="icon-file" href="#"> File </a></li>
<li class="tree stem branch"> <!-- level 2.1 -->
<ul class="nav nav-list">
<li class="branch-header">
<a class="tree-toggler icon-folder-close" href="#"> Sub Folder</a>
</li>
<li class="tree stem"> <a class="icon-file" href="#"> File </a> </li>
<li class="tree stem"> <a class="icon-file" href="#"> File </a> </li>
<li class="tree stem branch"> <!-- level 2.1.1 -->
<ul class="nav nav-list">
<li class="branch-header">
<a class="tree-toggler icon-folder-close" href="#"> Subsub Folder</a>
</li>
<li class="tree stem"> <a class="icon-file" href="#"> File </a></li>
<li class="tree stem"> <a class="icon-file" href="#"> File </a></li>
</ul>
</li> <!-- /level 2.1.1 -->
</ul>
</li> <!-- /level 2.1 -->
<li class="tree stem branch"> <!-- level 2.2 -->
<ul class="nav nav-list">
<li class="branch-header">
<a class="tree-toggler icon-folder-close" href="#"> Another Sub Folder </a>
</li>
<li class="tree stem"> <a class="icon-file" href="#"> File</a></li>
<li class="tree stem"> <a class="icon-file" href="#"> File</a></li>
<li class="tree stem branch"> <!-- level 2.2.1 -->
<ul class="nav nav-list">
<li class="branch-header">
<a class="tree-toggler icon-folder-close" href="#"> Subsub Folder </a>
</li>
<li class="tree stem"> <a class="icon-file" href="#"> File </a></li>
<li class="tree stem"> <a class="icon-file" href="#"> File </a></li>
</ul>
</li> <!-- /level 2.2.1 -->
</ul>
</li> <!-- /level 2.2 -->
</ul>
</li> <!-- /level 2 -->
<li class="tree stem"> <a class="icon-file" href="#"> A File </a></li>
<li class="tree stem"> <a class="icon-file" href="#"> Another File </a></li>
</ul>
<style rel="stylesheet">
.nav-tree .branch-header ~ li{ padding-left: 15px; }
.nav-tree .trunk li.stem{ display:none; }
.nav-tree .branch ul{ margin-left: 3px; }
</style>
<script>
$(document).ready(function () {
$('.tree-toggler').click(function () {
$(this).parent().parent().children('.tree.stem').toggle(300);
$(this).toggleClass("icon-folder-open").animate(300);
$(this).toggleClass("icon-folder-close").animate(300);
});
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment