\n Comme vous pouvez le constater, ce site Web met l’accent sur le minimalisme; l’accent est mis sur l’image et le slogan qui est \u00ab\u00a0Townhouse Office Space To Let in Glasgow\u00a0\u00bb. La facilit\u00e9 d’acc\u00e8s \u00e0 la barre de navigation est minimis\u00e9e, mais claire.\n<\/p>\n
\n Un autre exemple est un site Web de conception Web Hashtag17<\/strong> qui offre \u00e9galement plusieurs autres services. L’enjeu est de pr\u00e9senter tous les services propos\u00e9s sur une seule page, sans encombrer la page. La technique adapt\u00e9e par l’agence \u00e9tait de montrer un instantan\u00e9 de tous les services au bas du site Web sur un fond blanc qui aidera l’utilisateur \u00e0 naviguer vers l’une des 17 pages de cette zone unique.\n<\/p>\n \n L’avantage ici est qu’un seul regard montrera au spectateur les 17 services propos\u00e9s par cette soci\u00e9t\u00e9. Le fond blanc offre une approche sans distraction et les utilisateurs peuvent imm\u00e9diatement rep\u00e9rer la zone pour laquelle ils pourraient rechercher de l’aide.\n<\/p>\n \n La plupart des sites Web r\u00e9actifs positionnent le menu de navigation en haut. Cela pr\u00e9sente des avantages \u00e9vidents, tels que la facilit\u00e9 de mise en \u0153uvre, l’absence de d\u00e9pendance \u00e0 JavaScript et un CSS simple. Cependant, ce n’est pas le positionnement optimal pour les mobiles o\u00f9 l’immobilier est un d\u00e9fi. Une fa\u00e7on int\u00e9ressante de g\u00e9rer la navigation dans la conception de sites Web r\u00e9actifs consiste \u00e0 la pousser vers le bas du site, comme l’a sugg\u00e9r\u00e9 l’auteur Luke Wroblewski. Une barre de navigation prend moins de place sur le bureau et peut donc \u00eatre plac\u00e9e au-dessus. De plus, c’est l\u00e0 que les utilisateurs le chercheraient aussi. Mais sur les appareils plus petits, il est id\u00e9al de le pousser vers le bas o\u00f9 il ne prendra pas beaucoup de place. La liste de navigation est plac\u00e9e dans le pied de page du site Web ou juste au-dessus du pied de page. Il y a un lien d’ancrage vers celui-ci dans la partie en-t\u00eate du site Web.\n<\/p>\n \n L’avantage de ceci est l’espace pour plus de contenu dans la partie ci-dessus du pli du site Web; en m\u00eame temps, la navigation est plus facile et accessible et discr\u00e8te. Un avantage suppl\u00e9mentaire est que l’utilisateur peut lire l’int\u00e9gralit\u00e9 du contenu et faire d\u00e9filer jusqu’au bas de la page o\u00f9 il trouve la barre de navigation. Cela leur donnera plus d’options pour cliquer. D’autres avantages sont que cette approche ne n\u00e9cessite pas l’utilisation de JavaScript et est donc plus facile \u00e0 g\u00e9rer et \u00e0 d\u00e9panner. Cette m\u00e9thode est plus simple pour concevoir des sites Web r\u00e9actifs car la position de l’en-t\u00eate et du pied de page (qui sont fixes) permet une transition facile.\n<\/p>\n \n La partie d\u00e9licate de ce type d’agencement de l’\u00e9l\u00e9ment de navigation est qu’une personne doit sauter d’avant en arri\u00e8re pour acc\u00e9der aux liens. Par cons\u00e9quent, il s’agit d’un type d’interaction maladroit, qui peut \u00eatre assez lourd sur mobile et peut entraver la fluidit\u00e9 de la navigation mobile. Un autre inconv\u00e9nient est que si un utilisateur ne lit pas le contenu, il peut ne pas d\u00e9filer jusqu’en bas de l’\u00e9cran et ainsi manquer la barre de navigation, et savoir maintenant o\u00f9 la chercher.\n<\/p>\n \n Ici, le menu s’ouvre dans l’en-t\u00eate lui-m\u00eame et donne un aspect propre et \u00e9l\u00e9gant avec une fonction afficher\/masquer. Il est facile \u00e0 coder et constitue une transition en douceur. Mais le d\u00e9fi est qu’Android peut ne pas offrir une transition aussi fluide avec les animations CSS.\n<\/p>\n \n Un bon exemple d’utilisation du Toggle est Starbucks<\/strong> :\n<\/p>\n \n De plus, si le menu est volumineux, il pourrait encore prendre beaucoup de place. Ce probl\u00e8me peut \u00eatre r\u00e9solu en cr\u00e9ant diff\u00e9rents menus pour diff\u00e9rents appareils. Un moyen efficace de le faire est d’utiliser le plugin Responsive Select Menu.\n<\/p>\n \n Contrairement aux autres m\u00e9thodes de navigation, cette technique implique l’utilisation de Javascript. Cela nous fait de la propri\u00e9t\u00e9 de forme. Il convertit la liste de menu en un \u00e9l\u00e9ment de s\u00e9lection. Bien qu’il puisse s’agir de l’\u00e9l\u00e9ment le plus performant de tous les navigateurs, car ils sont d\u00e9riv\u00e9s de menus d\u00e9roulants, les concepteurs peuvent les trouver restrictifs en raison de la difficult\u00e9 \u00e0 les personnaliser sur diff\u00e9rents navigateurs. Les plus grands avantages de ces menus dans les conceptions de sites Web r\u00e9actifs sont qu’ils fonctionnent. Un autre point positif est qu’ils peuvent \u00eatre utilis\u00e9s pour contr\u00f4ler les liens de navigation lorsqu’ils sont en exc\u00e8s ; cela peut \u00eatre un probl\u00e8me pour l’approche TopNav. Ils lib\u00e8rent \u00e9galement beaucoup d’espace sur la mise en page Web, qui peut \u00eatre utilis\u00e9e pour la conception Web. Les menus de s\u00e9lection peuvent \u00eatre adapt\u00e9s aux diff\u00e9rents appareils – diff\u00e9rents navigateurs mobiles g\u00e9reront les menus de s\u00e9lection de diff\u00e9rentes mani\u00e8res.\n<\/p>\n \n Un moyen simple d’utiliser Select Menu consiste \u00e0 utiliser TinyNav<\/strong>, un plugin JQuery.\n<\/p>\n \n Incluez le fichier JS apr\u00e8s avoir charg\u00e9 votre version de jQuery, puis \u00e9crivez le code suivant :\n<\/p>\n \n Ajoutez quelques lignes \u00e0 votre CSS. Cachez la classe tinynav. R\u00e9glez-le pour qu’il s’affiche au point d’arr\u00eat de votre choix :\n<\/p>\n \n L’inconv\u00e9nient est qu’ils peuvent ne pas \u00eatre aussi soign\u00e9s et esth\u00e9tiques que d’autres techniques de menu de navigation. Ils sont meilleurs sur des pages simples avec des mises en page uniques telles que celle d ‘ ApacheCoube<\/strong>.\n<\/p>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-327943-63844cf3ef2fc.webp\")
<\/a><\/p>\n\n Quand la barre de navigation porte le poids de la page web !
\n<\/h5>\n#access li a {\n padding: 0;\n margin: 0;\n font-size: 16px;\n height: 57px;\n}\n.container {\n padding-bottom: 549px;\n position: relative;\n}\n.nav-strip {\n position: absolute;\n bottom: 0;\n}<\/code><\/pre>\n\n Cela peut \u00eatre corrig\u00e9 en utilisant le menu bascule
\n<\/h5>\n<\/a><\/p>\n\n Une autre m\u00e9thode consiste \u00e0 utiliser l’approche du menu de s\u00e9lection.
\n<\/h5>\n\n<script>\n<![CDATA[\n\n$(function() {\n\u00a0\u00a0$(\"#nav\").tinyNav();\n});\n]]>\n<\/script><\/code><\/pre>\n\/* styles for desktop *\/\n.tinynav { display: none }\n \n\/* styles for mobile *\/\n@media screen and (max-width: 600px) {\n .tinynav { display: block }\n #nav { display: none }\n}<\/code><\/pre>\n