Идеи для сложного меню

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

Я не могу проверить в IE на этом компьютере с Ubuntu, но я думаю:

• 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/ для исправления, т.е. поддержки.