Question

我有一个稍微复杂的菜单，可以从PSD文档中编码并集成到Wordpress中。

它的外观如下：

我的工作成果如下：

http://slavisaperisic.com/FlexE/meni_setap.html

现在，当我编写函数wp_list_pages();时，我得到了默认标记：

<ul>
<li class="page_item"><a href=""></a></li>
<li class="page_item"><a href=""></a></li>
<li class="page_item"><a href=""></a></li>
</ul>

但是我创建的标记（这给了我适当风格的动态菜单）看起来像这样：

<div id="menu">

                    <div id="menu-left"></div>
                    <div id="main-menu">
                        <ul>
                            <li class="active first">
                                <div class="left_li"></div>
                                <a href="#" class="active">Exploring</a>
                                <div class="right_li"></div>
                            </li>
                            <li class="second">
                                <div class="left_li"></div>
                                <a href="#">Using</a>
                                <div class="right_li"></div>
                            </li>
                            <li class="third">
                                <div class="left_li"></div>
                                <a href="#">Downloading</a>
                                <div class="right_li"></div>
                            </li>
                        </ul>
                    </div>
                    <div id="menu-right"></div>

                </div>

我将它设置为样式，使其跟随菜单项中单词的长度。显然，我不能使用wp_list_pages()函数，因为它给我的结构与我需要的结构不同。

你有什么想法吗？也许把我指向某个地方，我可以学习不同的代码或者向我解释一下？

Answer 1

尝试使用此尺寸。我已经在Chrome和Firefox中测试了它。

标记式：

<ul>
  <li class="page_item active"><a>Exploring</a></li>
  <li class="page_item"><a>Using</a></li>
  <li class="page_item"><a>Downloading</a></li>
</ul>

CSS：

ul, li { margin: 0; padding: 0; list-style: none; }
ul {
  float: left;
  background-color: #EEE;
  border: 2px solid #DDD;
  height: 46px;
  position: relative;
  border-radius: 12px 12px 0 0;
}
ul:after {
  display: block;
  content: "";
  position: absolute;
  right: -45px;
  top: 3px;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent transparent #DDD transparent;
  border-color: rgba(255,255,255,0) rgba(255,255,255,0) #DDD rgba(255,255,255,0);
  border-width: 0 45px 45px 0;
}
li {
  float: left;
  height: 26px;
  font-size: 1.2em;
  padding: 10px 10px 10px 40px;
  background-color: #EEE;
  border-radius: 10px 10px 0 0;
  position: relative;
}
li:after {
  display: block;
  z-index: 1;
  position: absolute;
  right: -40px;
  top: 4px;
  width: 0;
  height: 0;
  content: "";
  border-style: solid;
  border-color: transparent transparent #EEE transparent;
  border-color: rgba(255,255,255,0) rgba(255,255,255,0) #EEE rgba(255,255,255,0);
  border-width: 0 42px 42px 0;
}
li a {cursor: pointer;}
li a, li.active a:hover {color: #999;}
li a:hover, li.active a {color: white;}
li.active {background-color: lightblue;}
li.active:after {border-bottom-color: lightblue;}

你可以在这里看到它：
http://static.robinwinslow.co.uk/menustyling.html

我无法在这台Ubuntu机器上测试IE，但我认为：

IE9应该没问题
IE8应显示三角形但不显示边界半径
IE7不会显示三角形或边框半径

这是一个足够好的解决方案吗？

Answer 2

您可以使用wp_nav_menu创建自定义菜单。详细信息可以是http://codex.wordpress.org/Function_Reference/wp_nav_menu

使用此功能，您可以创建类似于：

的标记

    <li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-5 current_page_item">
        <a href="http://sewsoon.co.uk/">
            <strong>Home</strong>
            <span>Start Over</span>
        </a>
    </li>

但是，您可能希望在以下之前使用伪元素：和之后：保持标记更具语义性。根据您是否包含javascript库，您可以使用http://selectivizr.com/来修补即支持。

复杂菜单的想法

2 个答案: