页面菜单只有一个图像链接,而不是页面标题?

时间:2011-05-19 作者:user5057

wordpress为我的nav1生成了以下代码:

<div id="nav1">
<ul class="menusm">
    <li class="page_item page-item-6"><a title="Inicio" href="http://localhost/road/" class="top_level">Inicio</a></li>
    <li class="page_item page-item-11"><a title="Quienes Somos" href="http://localhost/road/quienes-somos" class="top_level">Quienes Somos</a></li>
    <li class="page_item page-item-13"><a title="Servicios" href="http://localhost/road/servicios" class="top_level">Servicios</a>
        <ul class="children" style="display: none;">
            <li class="page_item page-item-25"><a title="Inteligencia" href="http://localhost/road/servicios/inteligencia" class="">Inteligencia</a></li>
            <li class="page_item page-item-27"><a title="Personal, Equipos, Armamentos" href="http://localhost/road/servicios/personal-equipos-armamentos" class="">Personal, Equipos, Armamentos</a></li>
            <li class="page_item page-item-22"><a title="Seguridad Operativa" href="http://localhost/road/servicios/seguridad-operativa" class="">Seguridad Operativa</a></li>
        </ul>
    </li>
    <li class="page_item page-item-17"><a title="Contacto" href="http://localhost/road/contacto" class="top_level">Contacto</a></li>
    <li class="page_item page-item-37 current_page_item"><a title="Cotice su stand en ferias" href="http://localhost/road/pedir-cotizacion" class="top_level">Cotice su stand en ferias</a></li>
</ul><div class="clr"></div>

我想要最后一个<li> 标签标题为“Cotice su stand en ferias”,使用按钮代替文本作为<li>\'s、 有没有一种方法可以做到这一点,而不必完全删除该项目并在#nav1?

提前谢谢你的帮助。

编辑:明白了。

#nav1 ul li:last-child {background: url(images/cotizacion-icono.jpg) no-repeat scroll;}

3 个回复
最合适的回答,由SO网友:chrisjlee 整理而成

jQuery Solution

如果您使用的是jQuery,则可以使用:

var $li = jQuery(\'ul > li:last-child\',\'#nav1\');

选择最后一个子菜单。

选择后,可以将其与其他功能链接:

$li.wrapInner(\'<input type="button" value="My Button!">\');

然后,所有这些加在一起:

jQuery(document).ready(function() {
   // Cache your selection
   var $li = jQuery(\'ul > li:last-child\',\'#nav1\');
   // Replace it with your button
   $li.wrapInner(\'<input type="button" value="My Button!">\');
});

Pure CSS Solution

设置下拉导航:

模板中的PHP:

<?php $args = array(
    \'sort_column\' => \'menu_order, post_title\',
    \'menu_class\'  => \'menu\',
    \'include\'     => \'\',
    \'exclude\'     => \'\',
    \'echo\'        => true,
    \'show_home\'   => false,
    \'link_before\' => \'<span>\', // Wrap your span here
    \'link_after\'  => \'</span>\' ); // close it with a span too
?>

SO网友:Jan Fabry

如果使用WordPress 3.0中新增的自定义导航菜单功能,则可以在导航标签框中使用直接HTML。因此,在那里编写图像代码而不是常规标题没有问题。

Menu admin page with HTML code

Front page menu with image

SO网友:Geert

使用jQuery可以something like this:

$(\'#nav1\').find(\'> ul > li:last-child a\').wrapInner(\'<button/>\');
然而pure CSS 看起来是更干净的方式。使用border-radius 您可以轻松地将按钮外观应用于常规锚定。

结束

相关推荐

Menu API not switching menus?

我正在使用菜单API,我想切换到其他菜单,但出于某种原因,它保留了第一个菜单这是我的密码在函数中。php add_action( \'init\', \'register_my_menus\',10 ); function register_my_menus() { register_nav_menu(\'main-navigation\', \'Main Navigation\'); } 下面是我的主题文件(header.ph