0

我有这些导航菜单项的工作 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')); ?>

如何在其中添加图像链接？

4

1 回答 1

1

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

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

我是在这个网站上为中间的标志做的。

这将是：

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;
}
于 2013-07-08T22:13:20.593 回答