web-dev-qa-db-fra.com

Wordpress Split Menu

Je code mon premier thème WordPress et j'essaie de résoudre ce problème:

Sur la version de bureau du site Web, je voudrais scinder le menu en 2 sections. L'une apparaîtrait à gauche du logo et l'autre à droite de mon logo (le logo est centré). Le seul moyen de le faire est de créer 2 objets MENU distincts dans WP, puis de les positionner en CSS en conséquence.

Cela pose toutefois un problème lorsque je veux convertir le menu en un menu déroulant adapté aux appareils mobiles, car dans l'approche ci-dessus, je me retrouve avec 2 listes d'éléments de menu (gauche et droite) et je ne sais pas comment. voudrais-je les fusionner en une seule liste pour un menu déroulant adapté aux appareils mobiles.

Je comprends que je peux écrire du CSS personnalisé pour ajouter une marge entre le point de menu n ° 2 et le point n ° 3, par exemple. Mais comme je suis en train d’écrire un thème, cette approche ne fonctionnera pas, car elle nécessite de savoir à l’avance combien d’éléments de menu seront présents. J'ai besoin que ce soit quelque chose qui fonctionne indépendamment du nombre d'éléments de menu et qui permette aux utilisateurs de réorganiser les éléments de menu à l'aide de WP UI du menu.

Est-ce la mauvaise façon de s'y attaquer? Si vous pouviez suggérer comment mieux aborder cette question, je vous en serais très reconnaissant.

menusmobile
2
hanazair

Je voulais juste que tout le monde sache que j’avais fini par utiliser la suggestion de @selfagency ci-dessus. Elle n’était pas publiée dans le format de REPONSE, je n’étais donc pas en mesure de voter pour elle, la voici:

"Peut-être configurer un troisième menu pour mobile sous Apparence> Menu et afficher le menu mobile dans votre feuille de style tout en masquant les deux autres. Il est donc plus logique de le faire de cette façon si vous souhaitez optimiser l'expérience des utilisateurs mobiles"

J'ai trouvé la solution la plus simple et cela fonctionne très bien! Je vous remercie :)

Le résultat pourrait être vu sur www.speakforwolves.org

0
hanazair

Vous pouvez le faire via css en poussant le premier élément du deuxième menu, puis en positionnant: absolute votre logo, par exemple. (pas testé)

#element li:nth-child(4) {
 margin-left:300px;
}
#logo {
 position:absolute;
 left:500px
 top:50px;
}

Changer les pixels à la longueur désirée

Cela peut également être fait avec jQuery append p. Ex.

$( "#element li:nth-child(3)" ).append( '</ul><ul class="right">' );

Vous pouvez alors cibler le deuxième menu avec sa nouvelle classe, par exemple. .droite

0
Gareth Gillman