web-dev-qa-db-fra.com

Comment faire pour que les liens de navigation principaux ressemblent davantage à des boutons?

J'ai récemment réorganisé la barre de navigation de mon site Web et j'essaie d'explorer des modifications simples qui feront apparaître les liens moins comme du texte plat et plus comme des boutons cliquables. J'ai ajouté des icônes à chacun, mais je pense que je dois aller plus loin.

J'ai joué avec l'ombre du texte (encart et décalage), différentes couleurs, etc. mais rien ne fonctionne tout à fait comme je le voudrais.

enter image description here

Toutes les idées seraient grandement appréciées.

navigationhyperlinks
2
Nick S.

Structure HTML

HTML vous permet de créer des boutons (<button>) ou des liens (<a>), qui sont des éléments distincts qui ont des implications sur l'accessibilité, le référencement, etc. En général, utilisez des boutons HTML pour "faire des choses", et utilisez des liens HTML pour "aller". Dans votre cas, utilisez des liens HTML.

Aspect visuel

Voici quelques options qui s'offrent à vous:

  1. Conception tactile: utilisez des ombres et des bordures claires pour donner à chaque bouton un aspect "en relief". L'ajout de textures peut également les aider à se sentir tactiles.
  2. Emplacement prévu: Si vous localisez vos boutons en haut de votre page et qu'il n'y a pas d'autres centres de navigation évidents sur la page, de nombreux utilisateurs supposeront correctement qu'ils sont des boutons car ils se trouvent à l'emplacement prévu et il n'y a aucune confusion à proximité.
  3. Séparation nette: vos icônes sont trop grandes. Réduisez-les pour que le panneau soit plus net et que le texte et l'icône de chaque option soient plus clairement regroupés.
3
sscirrus

Il existe de nombreux styles qui agissent comme des repères visuels qui suggèrent une pressabilité. Biseau surélevé, ombre portée, brillance arrondie (style Apple), etc. Vous voulez un style qui fonctionne avec le style de votre page dans son ensemble.

Dans votre cas, une possibilité consiste à rendre les icônes toutes de la même hauteur (le "X" sur l'expo semble trop haut), puis à réduire la taille du texte. L'icône sera mise en évidence (et les icônes sont cliquables par convention) mais le texte sera toujours lisible.

Une autre option consiste à en faire des onglets. Tout ce dont vous avez besoin est une forme d'onglet unique autour de l'élément sélectionné pour indiquer "tous ces onglets sont des onglets de navigation". Ou vous pouvez mettre des onglets autour de chaque option, comme le font les navigateurs, mais ce n'est pas toujours nécessaire et prend de l'espace qui peut être serré.

Il existe de nombreuses façons d'aller ici, vous devez décider ce qui correspond le mieux à votre site. Et ne soyez pas trop lourd, il est déjà assez évident que ce sont des liens de navigation, il vous suffit donc de mettre un peu l'accent sur cela pour augmenter son évidence.

1
obelia

Je reviens aux commentaires de votre question pour décider si vous devez faire ressembler les liens à des boutons, mais si vous décidez d'aller de l'avant, il y a deux aspects à cela: le premier est l'apparence (à quoi cela ressemble-t-il à un bouton) et le second est le comportement (combien cela fonctionne comme un bouton). S'il existe des problèmes d'implémentation technique qui vous empêchent de le faire ressembler exactement à un bouton, vous pouvez toujours envisager de modifier son comportement (par exemple, à quoi il ressemble lorsque vous survolez ou cliquez sur le lien). À partir de la capture d'écran, il semble également que vous ayez positionné les liens, ce qui peut rendre difficile leur conception différente car il existe des contraintes d'écran et de mise en page, mais pour plus d'informations, ce serait utile.

0
Michael Lai

Avez-vous travaillé sur css3? Utilisez-vous HTML 5? Il peut y avoir d'autres options dans HTML 5, je ne les connais pas. Cependant, voici une idée sur la façon dont vous pouvez utiliser certains CSS (dégradés inclus: D) pour boutonner votre texte: (Ce n'est pas tout, mais quelque chose pour vous aider à démarrer). HTH

    border: 1px Solid #3B7882; 
border-radius:4px; 
width: 90px; 
height:27px;
color: #FFFFFF;
background-color: #909090;
margin: 9px 2px 0 0;
width: 4%;
height : 2%;
float: left;
border-top-left-radius: 6%;
border-top-right-radius: 6%;
padding-top: 10px;
padding-bottom: 12px;
cursor: pointer;
background: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(1, rgba(134,130,122,0)), /* Top */
color-stop(0, rgba(134,150,101,45)) /* Bottom */
);
/* for IE  */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#368655E, endColorstr=#848176)";
background: -ms-linear-gradient(top left, #368655E, #848176);
0
happybuddha