[Résolu] Menu Vertical et affichage sur même page

Bonjour, bonsoir,

Aujourd'hui, je réalise une page d'accueil pour mon entreprise.

J'ai un trou de mémoire complet sur une chose bête. J'utilise donc CSS/HTML/ comme langage (pour le moment, je pense intégrer du php à un moment ou un autre).

J'ai un menu vertical au centre de mon écran.

Comme ceci :


Je souhaiterai afficher le contenu de ce que je choisi dans mon menu à la suite, sur la même page (Page principale).

J'ai totalement oublié comment faire.

Il me suffit donc une simple piste, une petite chose pour me rafraîchir les idées car j'ai un gros blackout sur ce que j'ai pu apprendre auparavant.

Je m'étais dis de faire une div invisible avec mon contenu et l'afficher en JS mais il doit y avoir une manière plus simple et intelligente de faire, que je ne retrouve plus.

Merci d'avance.

Bonjour,

Je pense que ce que vous recherchez sont les liens ancrés.

Vous créez un lien <a href="#masection">Lien vers contenu</a>

Puis plus loin <section id="masection"> Lorem ipsum......</section>

Lorsque vous cliquez sur le lien, vous êtes envoyez à la balise qui contient le même id de la valeur du href.

Pour en apprendre plus:
https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/creer-des-liens

Ce que j'ai réalisé (je ne sais pas si c'est mieux ou plus intelligent, c'est la solution que j'ai vu) :

Un menu HTML avec un évennement JS onclick :

<ul class="menu-vertical">
    <li class="mv-item"><a href="#" onclick="showdiv('extra');">EXTRANET ET SITES INTERNES</a></li>
    <li class="mv-item"><a href="#" onclick="showdiv('outils');">OUTILS ET FICHIERS UTILES</a></li>
    <li class="mv-item"><a href="#" onclick="showdiv('sitesWeb');">LES SITES WEB</a></li>
    <li class="mv-item"><a href="#" onclick="showdiv('liensUtiles');">LIENS UTILES EXTERNES</a></li>
</ul>

Et le Script JS correspondant :

<script language="JavaScript"> 
var _hidediv = null;
function showdiv(id) {
    if(_hidediv)
        _hidediv();
    var div = document.getElementById(id);
    div.style.display = 'block';
    _hidediv = function () { div.style.display = 'none'; };
}
</script>

Et ça marche, je ne sais pas si c'est plus efficace, mieux ou plus ou moins adapté, mais ça correspond à mes besoins.

Merci de l'aide !

allan00958 a écrit :
Tout dépends de ce que vous voulez réalisez.

Si j'ai bien compris votre demande, les liens ancrés font parfaitement l'affaire. Lisez l'article que j'ai inclus.

J'ai lu, merci beaucoup. Si je comprend bien, les sections sont affichés de base, elles ne sont pas masqué, c'est bien ça ?

C'est ça. Votre solution en JS les cache à la base. Après tout dépends de ce que vous cherchez à réaliser, de point de vue du design.

Merci pour votre aide. J'opte pour ma solution étant donné qu'elle fonctionne. Je pourrai me servir des sections pour la suite, pour d'autres réalisations, donc un énorme merci !