javascript - 复杂菜单的想法

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 应该显示三 Angular 形而不是边框​​半径
• IE7 不会显示三 Angular 形或边框半径

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