Menu в WordPress через wp_nav_menu

[TrueTrue]

Здравствуйте, учусь делать сайт, сделал меню в WordPress с иcпользованием PHP, заказчик пристал, что нужно через wp_nav_menu, 3 день не могу добиться необходимого результата.

Есть меню(рубрик и страниц), в нём пара пунктов имеют дочерние пункты.

Вобщем, мне нужно получить такую структуру.

Но сколько я не мучился, у меня получается так:

не могу понять, как используя wp_nav_menu, заставить его выводить все пункты меню, последовательно. Он выводит все Родительские, а дочерние, как бы сверху налагает. Кто сталкивался или знает, подскажите, пожалуйста.

Edited March 27, 2012 by TrueTrue

[Alma]

меню выводится, а как оно отображается - это уже от Css зависит.

смотрели какой html код выдает ваша функция и какие css свойства у списков меню?

[TrueTrue]

меню выводится, а как оно отображается - это уже от Css зависит.

смотрели какой html код выдает ваша функция и какие css свойства у списков меню?

По поводу CSS, я знаю...

Смотрел,

Вот что я пишу в CSS

.menu-item 
{
 width: 150px; 
 height:11px;
 margin: 2px; 
 padding: 9px 5px 5px 15px; 
 float:left; 
 line-height: 40%; 
 border: 3px solid #FF6600;
}

Edited March 27, 2012 by TrueTrue

[Alma]

.menu-item 
{
 width: 150px; 
 height:11px;
 margin: 2px; 
 padding: 9px 5px 5px 15px; 
 float:left; 
 line-height: 40%; 
 border: 3px solid #FF6600;
}

.menu-item

{

width: 150px;

height:11px;

margin: 2px;

padding: 9px 5px 5px 15px;

float:left;

line-height: 40%;

border: 3px solid #FF6600;

}

если .menu-item это <li>, то зря вы высоту указали.

именно это и не дает места для подменю, ведь оно в пункте меню, который ограничен по высоте...

хотя если вы бы еще и код хтмл написали многое стало бы очевиднее...

[TrueTrue]

.menu-item 
{
 width: 150px; 
 height:11px;
 margin: 2px; 
 padding: 9px 5px 5px 15px; 
 float:left; 
 line-height: 40%; 
 border: 3px solid #FF6600;
}

.menu-item

{

width: 150px;

height:11px;

margin: 2px;

padding: 9px 5px 5px 15px;

float:left;

line-height: 40%;

border: 3px solid #FF6600;

}

если .menu-item это <li>, то зря вы высоту указали.

именно это и не дает места для подменю, ведь оно в пункте меню, который ограничен по высоте...

хотя если вы бы еще и код хтмл написали многое стало бы очевиднее...

в Index.php ничего особенного нет:

<div id="main_menu">
   <?php wp_nav_menu( 'id=navbar' );?>
</div>

#main_menu	  
{
  width: 180px; 
  margin: 8px 0px 0px 33px; 
  padding: 0px;  
  float: left;
  border:0px solid red;
}

[NeoXidizer]

дайте html код, который выводится

[TrueTrue]

дайте html код, который выводится

<div id="main_menu">
                <div class="menu-left-container"><ul id="menu-left" class="menu"><li id="menu-item-266" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-266"><a href="http://localhost/">Главная</a></li>
<li id="menu-item-267" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-267"><a href="http://localhost/o-nas.html">О нас</a></li>
<li id="menu-item-271" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-271"><a href="http://localhost/category/nashi-raboty">Наши работы</a>
<ul class="sub-menu">
    <li id="menu-item-276" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-276"><a href="http://localhost/nashi-raboty/vanna.html">ванна</a></li>
    <li id="menu-item-277" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-277"><a href="http://localhost/nashi-raboty/prixozhaya.html">прихожая</a></li>
    <li id="menu-item-278" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-278"><a href="http://localhost/nashi-raboty/garderobnaya.html">гардеробная</a></li>
    <li id="menu-item-279" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-279"><a href="http://localhost/nashi-raboty/gostinaya.html">гостиная</a></li>
    <li id="menu-item-280" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-280"><a href="http://localhost/nashi-raboty/detskaya.html">детская</a></li>
    <li id="menu-item-281" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-281"><a href="http://localhost/nashi-raboty/kuxnya.html">кухня</a></li>
</ul>
</li>
<li id="menu-item-268" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-268"><a href="http://localhost/galereya.html">Галерея</a></li>
<li id="menu-item-269" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-269"><a href="http://localhost/zakaz-mebeli.html">Заказ мебели</a></li>
<li id="menu-item-270" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-270"><a href="http://localhost/kontakty.html">Контакты</a></li>
</ul></div></div>

Edited March 27, 2012 by TrueTrue

[NeoXidizer]

у вас код частично обрезан - http://jsfiddle.net/UJ6a2/

вы через functions.php вывод wp_nav_menu никак не изменяли?

[Alma]

и все-таки мое предположение верное, уберите высоту и будет счастье вам.

хотя возможно еще некоторые правки понадобятся в стилях...

.menu-item

{

width: 150px;

height:11px;

margin: 2px;

padding: 9px 5px 5px 15px;

float:left;

line-height: 40%;

border: 3px solid #FF6600;

}

[TrueTrue]

у вас код частично обрезан - http://jsfiddle.net/UJ6a2/

вы через functions.php вывод wp_nav_menu никак не изменяли?

Я ничего не менял, странно, но когда я взял код прямо из браузера и вставил на jsfiddle.net то всё норм, а когда запостил и скопировал из поста, то появляется какой-то "лишний" Тег <li>

http://jsfiddle.net/UJ6a2/6/

и все-таки мое предположение верное, уберите высоту и будет счастье вам.

хотя возможно еще некоторые правки понадобятся в стилях...

.menu-item

{

width: 150px;

height:11px;

margin: 2px;

padding: 9px 5px 5px 15px;

float:left;

line-height: 40%;

border: 3px solid #FF6600;

}

Я сделал как вы писали, получилось вот что:

[NeoXidizer]

http://jsfiddle.net/Xkhvn/

кроссбраузерность не проверял, работает в Google Chrome и Firefox

Edited March 27, 2012 by NeoXidizer

[Alma]

Я сделал как вы писали, получилось вот что:

ну так вы на пол пути к успеху

вам надо эти бордеры не на <li>, а на <a> сделать.

вы Css в какой мере владеете? это не сложно вобщем-то переправить...

ну или так как вам выше предложили

[TrueTrue]

http://jsfiddle.net/Xkhvn/

кроссбраузерность не проверял, работает в Google Chrome и Firefox

Спасибо огромное, вроде получилось то, что нужно.)))) Немного разобрался и подкорректировал.)

[TrueTrue]

Ещё если не сложно, хочу попросить подсказать мне вот что:

У меня при переходе на конкретный пункт меню, он подсвечивается, вот так:

.current_page_item a{color: #DD4020;}

Мне необходимо сделать, что бы так же и Пункт "Наши Работы", который имеет дочерние пункты, подсвечивался.

Я пытаюсь сделать это вот таким образом:

.menu-item-object-category .current-menu-item a {color: #DD4020;}

У меня ничего не выходит

Мне нужно, что бы он выделялся когда осуществлён переход, на один из его дочерних пунктов.

Edited March 28, 2012 by TrueTrue

[Alma]

.current-menu-parent>a,
.current_page_parent>a {
  color: #DD4020;
}

[NeoXidizer]

нужно подсвечивать current-menu-item

[TrueTrue]

нужно подсвечивать current-menu-item

Ещё одна лажа.

Название страниц(разделов) может изменятся. Поэтому, я не могу жёстко устанавливать правый паддинг на пункт меню "Наши Работы". А свойство "Witch", для текста, почему-то не срабатывает. Мне нужно бордер сделать жёстко размером 150px например. Как это можно сделать?

[TrueTrue]

Шо и это фсё? тупик))) Решения нет?

Edited March 28, 2012 by TrueTrue

[Alma]

Шо и это фсё? тупик))) Решения нет?

ну сделайте его блочным элементом, тогда ширину можно задать.

или ссылочку дайте, я гляну конкретно

[NeoXidizer]

честно - переверстать без <ul><li>, но мне лень стили писать)