Javascript 复杂菜单的创意

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

这就是它的样子：

我的工作成果如下：

现在，当我编写函数

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\u list\u pages（）
函数，因为它提供的结构与我需要的结构不同

你有什么想法吗？也许可以把我带到某个地方，在那里我可以学习如何编写不同的代码或向我解释它？
您可以使用wp\u nav\u 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库，您可以使用它来修补ie支持。
试试这个大小。我已经在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>

您可以在此处看到它的作用：


我不能在这个Ubuntu机器上进行IE测试，但我认为：


IE9应该可以
IE8应显示三角形，但不显示边界半径
IE7不会显示三角形或边界半径

这是一个足够好的解决方案吗？
您发布的示例似乎有效。这里到底有什么问题？@Sparky672:OP想知道如何设计第一个代码段的样式，使其与第二个代码段的功能类似，因为即使第二个代码段是功能性的，他仍然坚持使用第一个标记。顺便说一句，对于菜单项文本，我还是使用图像。是的，图像而不是文本会使事情简化很多，但这并没有让菜单变得那么有活力…@Sparky672:我似乎很清楚。对Wordpress内部进行黑客攻击显然不如对模板进行样式化来达到预期的效果，您可以通过创建
Walker\u nav\u menu
子类和重写菜单行为来重写WordPress的导航菜单。在这种情况下，这对我来说不是一个很好的解决方案，但您展示了我可以在将来获得和使用的一些优秀技能。谢谢：）
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;}