将图标添加到<li>菜单</li>

时间:2012-05-29 13:15:00

标签: php html-lists

  

我正在开展一个学校项目,我被困在了一个地方   想要在<li> - 标签之间放置一个图像(&gt;&gt;&lt;&lt;&lt;因为它是一个   在wordpress中导航它在php中完成。

     

这就是我所拥有的:

     

img http://img825.imageshack.us/img825/253/screenshot20120529at305.png

     

这就是我想要的(看看菜单之间的蓝色东西   项):

     

img http://img703.imageshack.us/img703/253/screenshot20120529at305.png

     

我认为这是我需要放置我的图片/ menuitem.png的php。   但是哪里?非常感谢帮助

function inkthemes_nav() {
    if (function_exists('wp_nav_menu'))
        wp_nav_menu(array('theme_location' => 'custom_menu', 'container_id' => 'menu', 'menu_class' => 'ddsmoothmenu',
     

'fallback_cb'=&gt; 'inkthemes_nav_fallback'));           其他               inkthemes_nav_fallback();       }

function inkthemes_nav_fallback() {
    ?>
    <div id="menu">
        <ul class="ddsmoothmenu">
            <?php
            wp_list_pages('title_li=&show_home=1&sort_column=menu_order');
            ?>
        </ul>
    </div>
    <?php
}

function inkthemes_home_nav_menu_items($items) {
    if (is_home()) {
    //home
        $homelink = '<li class="current_page_item">' . '<a href="' . home_url('/') . '">' . __('Home', 'themia') . '</a></li>';
    } else {
     //niet home
        $homelink = '<li>' . '<a href="' . home_url('/') . '">' . __('Home', 'themia') . '</a></li>/>';

    }
    $items = $homelink . $items;
    return $items;
}

3 个答案:

答案 0 :(得分:3)

尝试使用仅限CSS的解决方案:

.ddsmoothmenu li {
  background: url('image/menuitem.png') no-repeat left center;
  padding-left:30px /* you have to adjust this manually */
}
.ddsmoothmenu li:first-child{
  background:none;
  padding-left:0;
}

答案 1 :(得分:0)

您必须在两个位置都添加一个图像标记,但这也会在最后一个项目后面放置一个图像。

$homelink = '<li class="current_page_item">' . '<a href="' . home_url('/') . '">' . __('Home', 'themia') . '</a></li> HERE';
    } else {
     //niet home
 $homelink = '<li>' . '<a href="' . home_url('/') . '">' . __('Home', 'themia') . '</a></li>/> HERE';

最好是使用css添加它,例如:

#menu li {
 padding-right: 30px;
 background: url('path/to/image') no-repeat right center;
}

#menu li:last-child {
 background: none;
}

答案 2 :(得分:0)

请参阅css属性list-style-image。您可以使用css类:first-child

在第一个上阻止此操作

以下为例:

.ddsmoothmenu li {
    list-style-image: url('image/menuitem.png');
}
.ddsmoothmenu li:first-child{
    list-style-image:none;
}
相关问题