Question

我有这些导航菜单项的HTML和CSS，但我需要了解如何在WordPress中的每个菜单项之前添加这些独特的图像。由于这些是在鼠标悬停在菜单名称上的动画，因此我无法将它们用作CSS背景图像，因此我必须将它们放在HTML中。

这是HTML：

<aside>
    <nav id="side-nav">
        <ul>
            <li><a href="#"><img src="http://www.example.com/wp-content/themes/BLANK-Theme/images/2020-WashoeBasket-01.png" height="25" width="34">Shop</a></li>
            <li><a href="#"><img src="http://www.example.com/wp-content/themes/BLANK-Theme/images/2020-WashoeBasket-02.png" height="25" width="34">Dine</a></li>
            <li><a href="#"><img src="http://www.example.com/wp-content/themes/BLANK-Theme/images/2020-WashoeBasket-04.png" height="25" width="34">Visit</a></li>
            <li><a href="#"><img src="http://www.example.com/wp-content/themes/BLANK-Theme/images/2020-WashoeBasket-05.png" height="25" width="34">Culture</a></li>
            <li><a href="#"><img src="http://www.example.com/wp-content/themes/BLANK-Theme/images/2020-WashoeBasket-13.png" height="25" width="34">Lodgings</a></li>
            <li><a href="#"><img src="http://www.example.com/wp-content/themes/BLANK-Theme/images/2020-WashoeBasket-06.png" height="25" width="34">Entertainment</a></li>
            <li><a href="#"><img src="http://www.example.com/wp-content/themes/BLANK-Theme/images/2020-WashoeBasket-16.png" height="25" width="34">Services</a></li>
        </ul>
    </nav>  
</aside>

这是用于WordPress的PHP自动将页面名称和链接放入菜单项。

<?php wp_nav_menu(array('menu' => 'Main Nav Menu')); ?>

如何将图片链接添加到此？

Answer 1

我建议使用类制作图像css背景 - 在wordpress管理区域的菜单编辑器中，您可以选择为每个菜单项添加一个类。（如果没有显示点击'屏幕选项'并检查'css类'）。

然后在菜单项上添加text-indent: -9999px;以仅显示图像。

我在this website上为中间的徽标做了这件事。

这将是：

menu-item {
    background: url('http://www.example.com/wp-content/themes/BLANK-Theme/images/2020-WashoeBasket-01.png') no-repeat;
    text-indent: -9999px;
}

menu-item:hover{
    text-indent: 0px;
}

如何在每个导航菜单项之前添加动画图像？

1 个答案: