mirror of
https://github.com/ethauvin/kobalt-doc.git
synced 2025-04-24 19:47:11 -07:00
Better nav bar.
This commit is contained in:
Cedric Beust
parent
c67236cb07
commit
16faba1859
4 changed files with 70 additions and 62 deletions
|
|
@ -40,25 +40,7 @@
|
|||
<div class="container">
|
||||
|
||||
<!-- Static navbar -->
|
||||
<nav class="navbar navbar-default">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand">Kobalt</a>
|
||||
</div>
|
||||
<div id="navbar" class="navbar-collapse collapse">
|
||||
<ul class="nav navbar-nav">
|
||||
<li><a href="../home/index.html">Home</a></li>
|
||||
<li class="active"><a href="../documentation/index.html">Documentation</a></li>
|
||||
<li><a href="../plug-in/index.html">A plug-in in 10mn</a></li>
|
||||
</ul>
|
||||
</div><!--/.nav-collapse -->
|
||||
</div><!--/.container-fluid -->
|
||||
<nav id="kobalt-navbar" class="navbar navbar-default">
|
||||
</nav>
|
||||
|
||||
<!-- Main component for a primary marketing message or call to action -->
|
||||
|
|
@ -602,8 +584,8 @@ If you are interested in discussing Kobalt related topics with other fellow user
|
|||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
|
||||
<script src="../bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
<script src="../js/toc.js"></script>
|
||||
<script>generateToc();</script>
|
||||
<script src="../js/kobalt.js"></script>
|
||||
<script>generateKobalt(1);</script>
|
||||
|
||||
<!--
|
||||
<script src="../bootstrap/dist/js/docs.min.js"></script>
|
||||
|
|
|
|||
|
|
@ -40,25 +40,7 @@
|
|||
<div class="container">
|
||||
|
||||
<!-- Static navbar -->
|
||||
<nav class="navbar navbar-default">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand">Kobalt</a>
|
||||
</div>
|
||||
<div id="navbar" class="navbar-collapse collapse">
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="active"><a href="../home/index.html">Home</a></li>
|
||||
<li><a href="../documentation/index.html">Documentation</a></li>
|
||||
<li><a href="../plug-in/index.html">A plug-in in 10mn</a></li>
|
||||
</ul>
|
||||
</div><!--/.nav-collapse -->
|
||||
</div><!--/.container-fluid -->
|
||||
<nav id="kobalt-navbar" class="navbar navbar-default">
|
||||
</nav>
|
||||
|
||||
<!-- Main component for a primary marketing message or call to action -->
|
||||
|
|
@ -211,8 +193,8 @@ Is your curiosity piqued? Are you interested in writing some cool Kotlin code an
|
|||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
|
||||
<script src="../bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
<script src="../js/toc.js"></script>
|
||||
<script>generateToc();</script>
|
||||
<script src="../js/kobalt.js"></script>
|
||||
<script>generateKobalt(0);</script>
|
||||
|
||||
<!--
|
||||
<script src="../../assets/js/docs.min.js"></script>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,57 @@
|
|||
//
|
||||
// Nav bar
|
||||
//
|
||||
|
||||
var content = [
|
||||
{
|
||||
url: "../home/index.html",
|
||||
title: "Home"
|
||||
},
|
||||
{
|
||||
url: "../documentation/index.html",
|
||||
title: "Documentation"
|
||||
},
|
||||
{
|
||||
url: "../plug-in/index.html",
|
||||
title: "A plug-in in 10mn"
|
||||
}
|
||||
];
|
||||
|
||||
var before = '<div class="container-fluid">'
|
||||
+ ' <div class="navbar-header">'
|
||||
+ ' <a class="navbar-brand">Kobalt</a>'
|
||||
+ ' </div>'
|
||||
+ ' <div id="navbar" class="navbar-collapse collapse">'
|
||||
+ ' <ul class="nav navbar-nav">'
|
||||
;
|
||||
|
||||
var after = '</ul>'
|
||||
+ ' </div><!--/.nav-collapse -->'
|
||||
+ ' </div><!--/.container-fluid -->'
|
||||
+ '</nav>'
|
||||
;
|
||||
|
||||
function generateNavBar(index) {
|
||||
var result = before;
|
||||
for (var i = 0; i < content.length; i++) {
|
||||
var cls = "";
|
||||
if (index == i) {
|
||||
cls = 'class="active"';
|
||||
}
|
||||
var c = content[i];
|
||||
result += '<li ' + cls + '><a href="' + c.url + '">' + c.title + '</a></li>';
|
||||
}
|
||||
result += after;
|
||||
|
||||
|
||||
var navBarElement = document.getElementById("kobalt-navbar");
|
||||
navBarElement.innerHTML = result;
|
||||
}
|
||||
|
||||
//
|
||||
// Table of contents
|
||||
//
|
||||
|
||||
function countersToHeading(counters) {
|
||||
var result = "";
|
||||
for (var i = 0; i < counters.length; i++) {
|
||||
|
|
@ -56,7 +110,12 @@ function generateToc() {
|
|||
if (tocTag) {
|
||||
tocTag.innerHTML = toc;
|
||||
} else {
|
||||
alert("Couldn't find an id " + tocId);
|
||||
console.log("Couldn't find an id " + tocId);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function generateKobalt(index) {
|
||||
generateToc();
|
||||
generateNavBar(index);
|
||||
}
|
||||
|
|
@ -40,25 +40,7 @@
|
|||
<div class="container">
|
||||
|
||||
<!-- Static navbar -->
|
||||
<nav class="navbar navbar-default">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand">Kobalt<br></a>
|
||||
</div>
|
||||
<div id="navbar" class="navbar-collapse collapse">
|
||||
<ul class="nav navbar-nav">
|
||||
<li><a href="../home/index.html">Home</a></li>
|
||||
<li><a href="../documentation/index.html">Documentation</a></li>
|
||||
<li class="active"><a href="../plug-in/index.html">A plug-in in 10mn</a></li>
|
||||
</ul>
|
||||
</div><!--/.nav-collapse -->
|
||||
</div><!--/.container-fluid -->
|
||||
<nav id="kobalt-navbar" class="navbar navbar-default">
|
||||
</nav>
|
||||
|
||||
<!-- Main component for a primary marketing message or call to action -->
|
||||
|
|
@ -257,6 +239,9 @@ And that's it! You can now iterate on your plug-in and upload it with additional
|
|||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
|
||||
<script src="../bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
<script src="../js/kobalt.js"></script>
|
||||
<script>generateKobalt(2);</script>
|
||||
|
||||
<!--
|
||||
<script src="../bootstrap/dist/js/docs.min.js"></script>
|
||||
-->
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue