Créer son propre menu en barre latéral

[Tôt]

Bonjour,

Vous trouverez ci‑dessous un exemple de code à intégrer dans une barre latérale afin de proposer un menu alternatif au menu horizontal fourni par Delta.

Code Sélectionner Étendre

<div style="text-align:center;">
    <fieldset style="max-width:350px; width:90%; padding:15px; border:1px solid #ccc; border-radius:10px;">
        <legend style="font-size:18px; font-weight:bold;">Accès rapide</legend>

        <p style="margin-bottom:10px; font-size:15px;">Choisissez une section :</p>

        <form action="https://www.deltacms.fr/test/" method="post">
            <button type="submit" style="width:100%; padding:10px; margin-bottom:8px;
            background:#0078D4; color:white; border:none; border-radius:6px;">Test 1</button>
        </form>

        <form action="https://www.deltacms.fr/test2/" method="post">
            <button type="submit" style="width:100%; padding:10px; margin-bottom:8px;
            background:#0078D4; color:white; border:none; border-radius:6px;">Test 2</button>
        </form>

        <form action="https://www.deltacms.fr/test3/" method="post">
            <button type="submit" style="width:100%; padding:10px; margin-bottom:8px;
            background:#0078D4; color:white; border:none; border-radius:6px;">Test 3</button>
        </form>

    </fieldset>
</div>

Vous pouvez bien entendu adapter la couleur de fond, la couleur du texte, ainsi que vos propres URL et intitulés de liens selon vos besoins.

Cordialement,

[Gedeonluc]

Bonjour,
Merci beaucoup pour ce partage. Je suis justement en train de travailler sur la création de mon site, donc ce type d'exemple de code pour une barre latérale avec un menu alternatif me sera très utile. Je vais le tester et l'adapter à ma structure.

[Tôt]

Bonjour,

Il est dommage que la communauté de ce forum ne soit pas encore plus développée afin de favoriser les échanges autour des possibilités offertes par le script Delta et le partage de réalisations ou de codes.

Disposant malheureusement de peu de temps, je reconnais ne pas encore exploiter l'ensemble des fonctionnalités qu'il permet.

Au fil de mes expérimentations, je ne manquerai pas de partager les astuces et découvertes qui pourraient être utiles à la communauté.

Je vous souhaite une excellente continuation dans le développement de votre site, actuel ou futur, avec Delta.

N'hésitez pas à poser vos questions ; Sylvain et Lionel seront les mieux placés pour vous apporter un accompagnement sur les aspects techniques.

Cordialement,

[Gedeonluc]

Bonjour,
Merci pour vos encouragements et votre disponibilité future pour partager vos découvertes. Excellente continuation à vous aussi dans vos projets avec Delta.

[Omère]

Bonjour à tous
Merci Tôt pour le partage de ce snippet
C'est vrai qu'un petit menu d'accès rapide dans la sidebar est toujours pratique pour la navigation.
Pour optimiser un peu le code et éviter d'avoir un formulaire <form> par bouton (ce qui alourdit inutilement le HTML et force des requêtes POST), il est aussi possible d'utiliser simplement une liste de liens <a> stylisés en boutons avec du CSS. Ça reste super léger et plus propre au niveau sémantique pour du simple lien interne :

Code Sélectionner Étendre

<div style="text-align:center;">
    <fieldset style="max-width:350px; width:90%; padding:15px; border:1px solid #ccc; border-radius:10px;">
        <legend style="font-size:18px; font-weight:bold;">Accès rapide</legend>
        <p style="margin-bottom:10px; font-size:15px;">Choisissez une section :</p>
       
        <a href="https://www.deltacms.fr/test/" style="display:block; padding:10px; margin-bottom:8px; background:#0078D4; color:white; text-decoration:none; border-radius:6px;">Test 1</a>
        <a href="https://www.deltacms.fr/test2/" style="display:block; padding:10px; margin-bottom:8px; background:#0078D4; color:white; text-decoration:none; border-radius:6px;">Test 2</a>
        <a href="https://www.deltacms.fr/test3/" style="display:block; padding:10px; margin-bottom:8px; background:#0078D4; color:white; text-decoration:none; border-radius:6px;">Test 3</a>
    </fieldset>
</div>
Et pour rejoindre la remarque de Tôt sur la communauté : avec un peu de temps et en continuant à poster nos petites astuces au fur et à mesure, le forum va prendre de l'ampleur petit à petit.

[Tôt]

Bonjour,

Bien vu Omère.

Merci de ta participation.

Cordialement,

[Lionel]

Bonjour,

Le style ne doit pas être inclut dans les balises html, mais ajouté à la feuille CSS disponible à cet effet, via des classes, exemple :

html

Code Sélectionner Étendre

<a href="https://www.deltacms.fr/test/" class="bouton">Test 1</a>
<a href="https://www.deltacms.fr/test2/" class="bouton">Test 2</a>
<a href="https://www.deltacms.fr/test3/" class="bouton">Test 3</a>
CSS (custom.css)

Code Sélectionner Étendre

    .bouton {
    display:block;
    padding:10px;
    margin-bottom:8px;
    background:#0078D4;
    color:white;
    text-decoration:none;
    border-radius:6px;
    }