Question

我创建了一个包含5个级别的精灵菜单。第1级包含“HOME”等，以及“SIGNUP”和“LOGIN”。第二级是第一级悬停时。第3级是活跃的。第四级是类似的，但它有“我的帐户”和＆amp;相反，“LOGOUT”和第五级只是“我的帐户”和“我的账户”。 “登出”。如果用户登录，我将如何告诉wordpress使用4rd;如果他们点击/悬停在“我的帐户”上，我将如何告诉第5级＆amp; “登出”。我正在使用最新版本的Wordpress。

Answer 1

我会使用精灵作为菜单/按钮背景，并给出不同级别的不同css类。

因此，对于第5级，您可以使用：hover类。对于第4级，你可以使用wordpress's如果用户登录功能给出不同的类 - 就像

<?php if ( is_user_logged_in() ) {  ?>
<div class="my-button class-5"></div>
<?php } else { ?>
<div class="my-button class-4"></div>
<?php }; ?>

其中'class-4'的背景设置为4级精灵，'class-5'的背景设置为5级精灵。

Answer 2

在菜单中使用CSS sprite，每个项目都是自己的图像（“Home”，“About ....”）是一个非常糟糕的主意。

这是无障碍的毒药
它可能对SEO有害
维护精灵图像需要做很多工作
当用户使用浏览器的“缩放”功能时，菜单项将无法缩放
关闭图像的用户无法查看菜单项的内容

在没有看到预期设计的情况下很难给出替代建议，但最常见的方法可能是构建基于<ul>的导航（每个项目为<li>）并为每个元素提供背景图片。根据您的具体情况，您可以在那里使用CSS sprites来显示悬停和未发现的状态。

wordpress中的css sprites

2 个答案: