【问题标题】:Adding icon to <li> menu将图标添加到 <li> 菜单
【发布时间】:2012-05-30 02:00:33
【问题描述】:

我正在做一个学校项目,但我被困在一个地方 想在&lt;li&gt;-tags 之间放一张图片( >>

这是我所拥有的:

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' => '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;
}

【问题讨论】:

    标签: php html-lists


    【解决方案1】:

    尝试使用纯 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;
    }
    

    【讨论】:

    • 使用 :first-child 比使用 :last-child 更好,因为后者在 ie7 和 ie8 中不起作用
    【解决方案2】:

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

    $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;
    }
    

    【讨论】:

      【解决方案3】:

      查看css属性list-style-image。您可以在第一个使用 css 类:first-child

      这里举个例子:

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

      【讨论】:

      • list-style-image 不是play nice with IE
      • 这对比 7 更新的版本有影响吗?
      猜你喜欢
      • 2012-11-01
      • 1970-01-01
      • 2013-04-03
      • 2019-08-26
      • 1970-01-01
      • 2018-01-27
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多