在WordPress水平菜单中对图像使用CSSID和类

时间:2012-03-15 作者:Rafael

刚找到这个很棒的网站,所以,我是Wordpress的新手。我有一个HTML/CSS网站开发从PSD文件。无论是页眉还是页脚,一切都很顺利,但当我看到WP菜单时,我只是有存货。下面是一个代码菜单示例:

<div id="mainheader">
    <div id="menuprincipal">
    <img src="imagens/menu_alienhead.png" width="33" height="53" alt="Alien Head" style="margin-left: 15px; float:left" />
    <ul>
          <li><a href=\'#\' class="menunews" title=\'News\'> </a></li>
          <li><a href=\'#\' id=\'menubiografia\' title=\'Biografia\'> </a></li>
etc etc
</ul>
</div><!--Fim do menuprincipal-->


</div><!--Fim do mainheader-->
以CSS为例:

 a#menunews, a#menunews:link, a#menunews:visited, a#menunews:active {
background: transparent url(imagens/menu/menu_news.png) no-repeat left top;
display: block;
height: 55px;
width: 56px;
 }
 a#menunews:hover {background-position: left bottom;}
然后我发现WP菜单接受类,我将其中一些iTen转换为:

.menunews {
background: url(images/menu/menu_news.png) no-repeat left top;
height: 55px;
width: 56px;
display:block;
}
以及

    #navmenu li:hover {
background-position: left bottom;
}
我的问题是,我是否可以使用第一个结构构建菜单,以及ID?我不知道wp\\U菜单列表输出在哪里。。。

使用菜单管理面板中的类,它可以工作,但页面标题保持在图像上方,链接仅在图像上工作,而不是图像本身,就像块一样,就像原始CSS一样。

出于视觉目的,菜单应类似于以下网站:http://www.realmofobscura.com/顺便说一下,它是用WP制成的。

非常感谢教程、链接或任何内容=)

1 个回复
SO网友:Rarst

菜单非常灵活,但内部也相当复杂。

从开始wp_nav_menu() 容器元素等的基本自定义文档。您可能需要将其分解为基本列表项,以集成到更复杂的标记中。

你也可以使用定制步行器,但我不推荐任何新手去那里(呵呵,大多数专业人士似乎都害怕步行者)。

PS注意,虽然询问菜单机制是一个主题,但纯粹的CSS问题(“如何让它看起来像这样”)被考虑在内not specific to WordPress 最好去别处问问。

结束