Изменить навигацию ipb 3.3.1

[Viktar83 73]

Ребят, нет решения для 3.4? Перекопал весь основной CSS и понял куда вставлять, но что вставить для растягивания меню по всей ширине...?

Такое возможно только в table.

Т.е. пункты меню переписать не в виде списка:

<ul>
 <li>пункт меню</li>
 <li>пункт меню</li>
 <li>пункт меню</li>
</ul>

а в виде таблицы

<table>
 <tr>
   <td>пункт</td>
   <td>пункт</td>
   <td>пункт</td>
 </tr>
</table>

Или представить список в виде таблицы, используя свойства css:

display: table;
display: table-row;
display: table-cell;

 

А конкретно, в ipb_styles.css в конце дописать (для стандартного стиля):

 

/********************************************************/
/**************** nav menu like table *******************/

#primary_nav .main_width {
 display: table;
 table-layout: fixed;
}
#community_app_menu {
 display: table-row;
}
#community_app_menu>li { 
 display: table-cell;
 float: none !important;
 text-align: center;
}

Примерный результат:

И дальше работать с элементами <li> как с ячейками таблицы. В GlobalTemplate поменять их местами, чтобы изменить порядок, и т.д.

 

---

ПС: Если не заморачиваться с таблицей, то можно просто указать ширину <li> в процентах (но тогда должно быть строго неизменное число пунктов меню).

Изменено 27 марта 2015 пользователем Viktar83

[Одмин 42]

@Viktar83, я выбрал вариант с <li>, но получилось так, что кнопки поровну разделили ширину, а надо чтобы каждая кнопка принимала ширину согласно своему содержанию, т.е. одна кнопка больше, другая меньше (судя по их содержанию), а все вместе они занимают пространство 100% ширины страницы. Как-то так можно поправить? :)

[Одмин 42]

А, понял!

table-layout: auto;

 

Но остался один вопрос! При таком раскладе все ячейки внешне сливаются, а надо чтобы между ними был пробел. Как это сделать через CSS?

Изменено 27 марта 2015 пользователем Одмин

[Viktar83 73]

Но остался один вопрос! При таком раскладе все ячейки внешне сливаются, а надо чтобы между ними был пробел. Как это сделать через CSS?

 

http://htmlbook.ru/css/border-spacing

например:

#primary_nav .main_width {
 display: table;
 table-layout: auto;
 border-spacing: 5px 0;
}

 

Или задать <li> бордер под цвет фона :lol:

Изменено 27 марта 2015 пользователем Viktar83

[Одмин 42]

@Viktar83, благодарю!

 

Или задать <li> бордер под цвет фона :lol:

Не, лучше через css, в общем спасибо! :D

[Одмин 42]

@Viktar83, Вы не могли бы еще подсказать по теме, каким образом можно начать еще одну полосу ниже имеющейся? То есть, я добавляю кнопки в верхнее меню, но когда кнопок становится много, они начинают сжиматься и становятся некрасивыми (внутренний текст кнопок начинает сжиматься в высоту), а надо чтобы под полосой кнопок начиналась новая полоска. Как такое можно сообразить? Тут дело такое, что надо чтобы текст в кнопках был в одну строку (и при сжатии кнопок не вылезал на вторую строчку ниже), а сами кнопки при критическом их кол-ве вылезали на строку ниже...

 

P.S. Напомню, мы используем <li> вместо <td> :)

[Viktar83 73]

@Viktar83, Вы не могли бы еще подсказать по теме, каким образом можно начать еще одну полосу ниже имеющейся? То есть, я добавляю кнопки в верхнее меню, но когда кнопок становится много, они начинают сжиматься и становятся некрасивыми (внутренний текст кнопок начинает сжиматься в высоту), а надо чтобы под полосой кнопок начиналась новая полоска. Как такое можно сообразить? Тут дело такое, что надо чтобы текст в кнопках был в одну строку (и при сжатии кнопок не вылезал на вторую строчку ниже), а сами кнопки при критическом их кол-ве вылезали на строку ниже...

 

P.S. Напомню, мы используем <li> вместо <td> :)

Impossible :unsure:

 

Одновременно чтобы ячейки растягивались и при этом переносились на другую строку... Не знаю, не получается. Тут нужен другой подход <_<

 

запретить перенос слов можно:

  word-wrap: normal;
 white-space: nowrap;
 overflow-wrap: normal;

Изменено 6 апреля 2015 пользователем Viktar83

[Одмин 42]

Ну если что-то интересное придумаете, сообщите, поэкспериментируем.

[Одмин 42]

В общем, я сам все решил.

 

В globalTemplate в <ul class='ipsList_inline' id='community_app_menu'> после </ul> просто добавить еще один <ul class='ipsList_inline' id='community_app_menu'>. Вот и все дела))

Изменено 18 апреля 2015 пользователем Одмин

[mrx69 0]

Здраствуйте! Помогите пожалуйста по навигации... я нашел где менять цвет текста кнопок навигации но не нашел...как поменять цвет самой кнопки...#community_app_menu а где там прячится цвет??? Зарание Спасибо! мой форум пока офлайн не в сети.

[mrx69 0]

up

[newbie 1723]

как поменять цвет самой кнопки

#community_app_menu > li > a

Свойство background