Des idées pour un menu mixte sur page d'accueil

Je suis en train de monter une maquette de page d'accueil pour un futur site.
La page d'accueil possède plusieurs zones dans le style 'one page design' avec un effet de scroll et 'spy' sur le menu.
Le menu contient deux zones, séparées par un pipe '|' : la zone de gauche commande les liens internes de la page d'accueil et la zone de droite contient des liens vers des pages du site.

Je me pose des questions sur la pertinence de ce système, au niveau de la sémantique, même si ce la fonctionne parfaitement.

Comment feriez vous dans ce cas?


Modifié par lionel_css3 (26 Oct 2017 - 20:13)

lionel_css3 a écrit :

...
la zone de gauche commande les liens internes de la page d'accueil et la zone de droite contient des liens vers des pages du site.
...

Salut Lionel,

Tu te retrouves dans ce cas de figure, si je ne m'abuse : Les liens d'évitement

Perso, rester simple, c'est être pragmatique selon moi. Aussi, les liens d'évitements ne sont ni plus ni moins qu'une navigation. Alors je ferai ceci (une navigation avec une liste de liens):

<nav role="navigation">
        <ul>
            <li><a href="">Accueil</a></li>
            <li><a href="">Présentation</a></li>
            <li><a href="">Descriptif</a></li>
            <li><a href="">Tarifs</a></li>
            <li><a href="">Contact</a></li>
            <li><a href="">menu-1</a></li>
            <li><a href="">menu-2</a></li>
            <li><a href="">menu-3</a></li>
        </ul>
    </nav>

ou cela (une navigation avec des liens):

    <nav role="navigation">
        <a href="">Accueil</a>
        <a href="">Présentation</a>
        <a href="">Descriptif</a>
        <a href="">Tarifs</a>
        <a href="">Contact</a>
        <a href="">menu-1</a>
        <a href="">menu-2</a>
        <a href="">menu-3</a>
    </nav>

Je pense qu'en CSS, tu dois savoir que le "pipe" n'est pas du tout un souci... une class ou un :nth-child avec un :before au cas où ou un borderl-left. N'oublie pas le display block sur les liens
Modifié par niuxe (26 Oct 2017 - 23:38)

en fait j'ai du mal m'exprimer.

Le soucis que j'avais c'était de faire comprendre au visiteur d'un simple que les liens à gauche du pipe sont des liens vers des ancres de la page courante et que les liens à droite sont des liens vers d'autres pages du site web.
Tout en sachant que dans le contenu de la page courante il y aura aussi des liens vers ces autres pages du site.

J'avais idée de scinder le menu en deux : une moitié à gauche, une moitié à droite, je n'ai pas encore mais je m'étonne de ne plus voir sur le site de Bootstrap 4 (j'utilise cette version) es exemples avec deux barres de navigation combinées, ont elles été abandonnées?

Bonjour.

'Faire comprendre'… hum, deux choses l'une : soit une convention existe pour ce cas de figure… et j'avoue que je ne la connais pas et puis de toute façon, il faudrait qu'elle soit suffisamment répandue pour qu'elle ne laisse aucun doute pour le visiteur de votre site, soit cette convention n'existe pas et, même si vous parvenez pas à différencier suffisamment les deux séries de liens, ça ne veut pas dire que votre visiteur comprendra à quoi ça correspond.
De mon point de vue, pour la communication, rien ne vaut le langage écrit… bien moins ambiguë.

Le plus simple c'est de faire un menu déroulant ou encore deux menu horizontaux superposés pour que la hiérarchie soit compréhensible. Et je suppose que ta barre de menu est fixe pour que cela fonctionne ?

Honnêtement si tu n'as pas masse de contenu dans tes pages, cela n'apporte pas grand chose. Dans ce cas j'aurai juste supprimé le menu avec les ancres.

J'ai réussi a employer deux listes dans ma barre de navigation, en fait il suffisait de scinder en deux <ul> et employer les nouvelles possibilités flexbox de Bootstrap 4 (ml-auto et mr-auto) pour décoller les deux listes.
J'ai allégé le "témoin" du lien actif (border-bottom au lieu du background-color) et j'ai mis en gras le menu de droite, et je n'ai plus besoin du pipe.
J'ai l'impression que c'est un peu plus clair... et compréhensible.

    <nav class="navbar navbar-expand-lg navbar-light mb-3 fixed-top" id="navbar">
      <div class="container">

        <a class="navbar-brand" href="index.php">
          <img src="assets/logo-goeland-menu.png" alt="">
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" 
          data-target="#menu-main" aria-controls="menu-main" aria-expanded="false" 
          aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="menu-main">

          <ul class="navbar-nav mr-auto"> 
            <li class="nav-item page-scroll">
              <a class="nav-link" href="#introduction">Accueil </a>
            </li>
            <li class="nav-item page-scroll">
              <a class="nav-link" href="#presentation">Présentation</a>
            </li>
            <li class="nav-item page-scroll">
              <a class="nav-link" href="#descriptif">Descriptif</a>
            </li>
            <li class="nav-item page-scroll">
              <a class="nav-link" href="#tarif">Tarifs</a>
            </li>
          </ul>

          <ul class="navbar-nav ml-auto"> 
            <li class="nav-item">
              <a class="nav-link" href="http://truc"><b>Aménagements</b></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="http://truc"><b>Options</b></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="http://truc"><b>Occasions</b></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="http://contact.php"><b>Contact</b></a>
            </li>
          </ul>

        </div>
      </div>
    </nav> 

bzh a écrit :
Le plus simple c'est de faire un menu déroulant ou encore deux menu horizontaux superposés pour que la hiérarchie soit compréhensible. Et je suppose que ta barre de menu est fixe pour que cela fonctionne ?

Honnêtement si tu n'as pas masse de contenu dans tes pages, cela n'apporte pas grand chose. Dans ce cas j'aurai juste supprimé le menu avec les ancres.

Je préfère éviter les menus déroulants quand je le peux.

Oui, la barre de menu est fixe et elle obtient aussi une couleur de fond (gris neutre) dès que l'on scrolle dans la page, pour garder en lisibilité.
le menu avec les ancres ne concerne que la page d'accueil et il y aura quand même un peu de contenu, environ 5 ou 6 hauteurs d'écran donc je tiens à conserver cet effet de navigation interne avec scroll animé, en plus ça plait beaucoup aux gens...

Christele a écrit :
Bonjour,
Super le look de ton site 2017 par rapport a Evasion24

pas compris ce que tu voulais dire

Christele a écrit :

tu as largement de quoi faire deux lignes, le menu des pages tel que actuellement , et en dessous une lignes
"allez a : xxxxx yyyy zzzz" plus fin et dans le bleu du logo

non, je veux pas faire deux lignes, c'est moche et en plus c'est un menu 'bootstrap' qui est caché sur les tablettes et mobiles, avec un bouton 'hamburger icon' pour l'ouvrir donc je préfère ne pas trop cannibaliser la structure de Bootstrap.

OK je comprends,
Pour ton site vu le logo et vu que le site Evasion24 annonçait un new look pour 2017, j'ais cru que c'était toi ,excuses moi

Christele a écrit :
OK je comprends,
Pour ton site vu le logo et vu que le site Evasion24 annonçait un new look pour 2017, j'ais cru que c'était toi ,excuses moi

ah oui pardon, j'avais mal compris mais tu n'as pas à t'excuser lol..... c'est bien moi
Modifié par lionel_css3 (27 Oct 2017 - 17:25)