web-dev-qa-db-fra.com

Wordpress Style de widget de menu personnalisé

Je me demande si quelqu'un connaît la meilleure méthode pour diviser un widget de menu personnalisé (situé dans le pied de page de mon site) en deux colonnes. Il y a un total de 8 liens, donc j'aimerais qu'il soit divisé en 2 colonnes de 4 liens. Vous ne savez pas s'il existe une fonction pour cela ou s'il existe un CSS pour y parvenir? Le balisage HTML du widget se présente comme suit:

<ul>
    <li id="menu-item-133" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-6 current_page_item menu-item-133">
        <a href="#">Link</a>
    </li>
</ul>

répétez cette structure 7 fois plus pour le code des éléments de campagne.

menuswidgetscolumns
2
Danny

Purement avec CSS, vous pouvez définir une largeur pour les éléments de menu, les faire flotter, puis définir le UL à deux fois:

footer ul {
    width: 200px;
}
footer .menu-item {
    float: left;
    width: 100px
}

(Je ne sais pas quels éléments vous utilisez pour désigner votre pied de page, vous devrez le mettre à jour pour l'adapter à votre structure.)

2
totels

Vous pouvez affecter des classes CSS individuelles aux éléments de menu à partir d'un menu de navigation personnalisé, dans http://example.com/wp-admin/nav-menus.php.

Ainsi, les 4 premiers liens auront une classe widget-left-column et les autres widget-right-column.
Ainsi, vous pourrez faire votre travail CSS pour diviser le widget en deux colonnes (les questions CSS strictes sont hors sujet dans WordPress StackExchange).

Affectation de classes CSS à des éléments de menu de navigation personnalisés

Au lieu de répéter les mêmes captures d'écran, je vais reproduire ici la réponse de @ JeremyJared à une question similaire:

Tout d’abord, allez dans les options de l’écran et cochez la case CSS:

enable navigation menu classes

Ensuite, ouvrez l'élément de menu et donnez-lui une classe. Dans mon exemple, il aurait la classe .home-page:

navigation menu class

Notez que pour assigner plus d'une classe, vous devez utiliser un espace pour les séparer.
navigation menus multiple classes
Ce qui donne le code HTML suivant:
enter image description here

1
brasofilo