web-dev-qa-db-fra.com

Mettre la balise <a> en dehors de la balise <li> dans le menu déroulant

J'essaie de créer un menu de liens sociaux pour le pied de page de mon thème. Je veux un menu personnalisable dans Dashboard, je veux que les liens soient relatifs à ce qui y est mis.

À l'origine pour obtenir cela, j'ai fait ceci:

<a href="http://www.facebook.com/" target="_blank"><i class="fa fa-facebook circle"></i></a>
<a href="http://www.google.com/" target="_blank"><i class="fa fa-google-plus circle"></i></a>
<a href="http://www.Twitter.com/" target="_blank"><i class="fa fa-Twitter circle"></i></a>
<a href="http://www.linkedin.com/" target="_blank"><i class="fa fa-linkedin circle"></i></a>

Pour les éléments de menu codés en dur.

Maintenant, je veux utiliser

<?php wp_nav_menu( array( 'theme_location' => 'social' ) ); ?>

Pour générer le <li> tout en sachant que cela place l’étiquette du lien, c'est-à-dire Facebook, dans les balises <li><a>.

c'est-à-dire <li class="fa fa-facebook circle"><a href="fb.com">Facebook</a></li>

Ce qui n'est pas génial, car 1. l'étiquette Facebook est un obstacle et 2. est la seule chose qui est cliquable.

Je souhaite que la balise link se trouve à l'extérieur de mes classes (elle est également définie automatiquement par Wordpress via la personnalisation du menu)

Je me rends compte que je pourrais écrire la classe <i> à l'intérieur de l'étiquette pour chaque élément de menu, mais cela va à l'encontre du but recherché.

Edit: J'aimerais une solution qui n'exclut pas le piratage d'une manière ou d'une autre.

customizationmenusthemes
1
insidesin

Ceci est une question difficile. Normalement, je dirais que text-indent:-99999px; fait partie du balisage de <a> - pour que le texte du lien disparaisse de l'écran. Mais vous avez cette balise fa en italique, qui est également du texte - elle est donc également déplacée de l'écran.

Cette solution est assez moche mais vous pouvez probablement la modifier pour votre usage.

Enveloppez les liens sociaux dans une div:

<div id="social-wrapper">
    <a href="http://www.facebook.com/" target="_blank"><i class="fa fa-facebook circle"></i>Facebook</a>
    <a href="http://www.google.com/" target="_blank"><i class="fa fa-google-plus circle"></i>Google</a>
    <a href="http://www.Twitter.com/" target="_blank"><i class="fa fa-Twitter circle"></i>Twitter</a>
    <a href="http://www.linkedin.com/" target="_blank"><i class="fa fa-linkedin circle"></i>LinkedIn</a>
</div>

Alors, .css comme ceci:

#social-wrapper .fa {
 color: #000;
}
#social-wrapper a {
  color: transparent;
  display: inline-block;
  margin: 0 8px;
  overflow: hidden;
  width: 15px;
}

Définissez cette largeur en fonction de la largeur de votre icône .fa. Voici un jsfiddle qui montre comment cela fonctionne.

EDIT:

ok, je ne savais pas que la solution ci-dessus ne fonctionnait pas. Voici une version moins laide, toujours en utilisant CSS. N'importe quoi au-delà de cela et vous devrez écrire votre propre implémentation de wp_nav_menu pour obtenir le contenu tel que vous le souhaitez et ne pas compter sur une solution CSS.

Même HTML que ci-dessus, avec un div wrapper.

Ce CSS:

#social-wrapper {
    text-indent: -99999px;
}
#social-wrapper a {
    width: 30px;
    float: left;
}
#social-wrapper .fa {
    display: inline-block;
    vertical-align: middle;
    width: 0;
    text-indent: 99999px;
}

Et voici un autre violon montrant comment cela fonctionne.

1
C C

Ma solution était étrange. Un petit hacky, et aller avec la solution de CC a fonctionné, mais je pense que quelque chose d'autre en bas de page me posait problème. (Je suis idiot)

#social_area {
    li a {
        display: block;
        color: transparent;
        overflow: hidden;
        margin-top: -45px;
        width: 100%;
    }
}

Où HTML ressemblait un peu à ça.

<ul id="menu-social-media">
    <li class="fa fa-facebook circle"><a title="Facebook" target="_blank" href="http://www.facebook.com/">Facebook</a></li>
    <li class="fa fa-instagram circle"><a title="Instagram" target="_blank" href="http://www.instagram.com/">Instagram</a></li>
    <li class="fa fa-pinterest circle"><a title="Pinterest" target="_blank" href="http://au.pinterest.com/">Pinterest</a></li>
    <li class="fa fa-Yelp circle"><a title="Yelp" target="_blank" href="http://www.Yelp.com/">Yelp</a></li>
</ul>

Entouré par le #social_area div.

Je pense avoir passé une heure à essayer de faire fonctionner cela, mais c'était le style d'un autre élément qui le ruinait. (Pourquoi cette merde ne fonctionne-t-elle pas!?)

Merci CC!

0
insidesin