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 回答