Create a sub navigation tree on the left side in Lektor

Question

Create a sub navigation tree on the left side in Lektor

54 views Asked by Thorsten At 12 August 2023 at 12:05

I am seeking for the way to create a sub navigation tree on the left side for my Lektor project.

I know the Lektor documentation itself is done in that way and I checked out the whole project from GitHub.

But ... I am totally lost when trying to understand how this is done. I want to keep the main navigation in the top and create a sub navigation to all sub pages of one page on the left side. I think this is done with model doc-page.ini, template doc-page.html and some css.

Am I right with the following assumptions:

Main navigation in top is defined in layout.html
Sub navigation on the left is defined in doc-page.html
Css class to put main navigation into top is one of the navbar classes
Css class to put sub navigation into left is tree-nav class

If somebody could shed some light on this it would be great.

Is there any small example project available demonstrating how to create a page with navigation to all sub pages?

Or should I strip of everything not used from Lektor project to get my starting point?

Thanks in advance Thorsten

Original Q&A

There are 1 answers

**Thorsten** · Answer 1 · 2023-08-14T16:54:02+00:00

I managed to solve my question at the end.

I found this tutorial to create a web site with header, footer, navigation bar and 2 column layout: https://www.w3schools.com/css/css_website_layout.asp

I was able to create doc-page.html and add the necessary enhancements to styles.css and layout.html.

styles.css

* {
    box-sizing: border-box;
}

body {
    font-family: 'Verdana', sans-serif;
    padding: 10px;
    margin: 0 auto;
    width: 80%;
}

header,
footer,
.row {
    padding: 10px;
    background: #daeef3;
    overflow: hidden;
}

footer {
    font-size: x-small;
}

header,
footer,
.center {
    text-align: center;
}

header h1 {
    color: #169bbd;
    margin: 0;
    font-weight: normal;
    font-size: 42px;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

nav a {
    float: left;
    display: block;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    color: #2a99b6;
}

/* Change color on hover */
nav a:hover {
    color: #33bbdf;
}

.leftcolumn ul {
    list-style: none;
}

.leftcolumn a {
    color: #2a99b6;
}

.leftcolumn a:hover {
    color: #33bbdf;
}

/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {
    font-size: 0.85em;
    float: left;
    width: 25%;
}

/* Right column */
.rightcolumn {
    float: left;
    width: 75%;
    padding-left: 20px;
}

/* Fake image */
.fakeimg {
    background-color: #aaa;
    width: 100%;
    padding: 20px;
}

/* Add a card effect for articles */
.card {
    background-color: white;
    padding: 20px;
    margin-top: 20px;
}

/* Clear floats after the columns */
.row::after {
    content: "";
    display: table;
    clear: both;
}

.refrain {
    color: #169bbd;
    padding: 1em;
}

@media screen and (max-width: 1200px) {
    body {
        width: 90%;
    }
}

@media screen and (max-width: 960px) {
    body {
        width: 100%;
    }
}

/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {

    .leftcolumn,
    .rightcolumn {
        width: 100%;
        padding: 0;
    }
}

/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
    nav a {
        float: none;
        width: 100%;
    }
}

layout.html

<!doctype html>
<html lang="de">

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="{{ '/static/style.css'|url }}">
    <link rel="shortcut icon" href="{{ '/static/favicon.png'|asseturl }}">
    <title>{% block title %}Welcome{% endblock %}</title>
    {% block head %}{% endblock %}
</head>

<body>
    <header>
        <h1>Website</h1>
        <nav>
            <ul>
                <li><a href="{{ '/'|url }}" {% if this._path=='/' %} class="active" {% endif %}>Welcom</a></li>
                {% for href, title in [
                ['/docs', 'Docs'],
                ] %}
                <li><a href="{{ href|url }}" {% if this.is_child_of(href) %} class="active" {% endif %}>{{ title
                        }}</a></li>
                {% endfor %}
                <li><a href="/about" style="float:right" {% if this.is_child_of('/about') %} class="active" {% endif
                        %}>About</a></li>
            </ul>
        </nav>
    </header>
    <div class="row">
        {% block body %}{% endblock %}
    </div>
    <footer>
        &copy; Copyright 2023 by Me.<br>
        &lt;/&gt; with <a href="https://www.getlektor.com" target="_blank" rel="noopener noreferrer">Lektor</a>, validated with <a href="https://validator.w3.org/" target="_blank" rel="noopener noreferrer">W3C validator</a>
    </footer>
</body>

</html>

doc-page.html

{% extends "layout.html" %}
{% block title %}{{ this.title }}{% endblock %}
{% block body %}

<div class="leftcolumn">
    <ul>
        {% set root = site.get('/docs') %}
        {% for child in root.children recursive %}
            {% if child.children.count() == 0 %}
                {% if child.parent.path != '/poems' %}
                    <li{% if this._path==child._path %} class="active" {% endif %}>
                        <a href="{{ child|url }}">{{ child.title }}</a>
                    </li>
                {% endif %}
            {% else %}
                <li>{{ child.title }}
                    <ul>{{ loop(child.children) }}</ul>
                </li>
            {% endif %}
        {% endfor %}
    </ul>
</div>
<div class="rightcolumn">
    <h2>{{ this.longtitle }}</h2>
    {{ this.body }}
</div>
{% endblock %}

TechQA.

Create a sub navigation tree on the left side in Lektor

There are 1 answers

Related Questions in LEKTOR

Popular Questions

Popular Tags

Trending Questions