Jump to content
Дизайн и модификация IPS Community IPBSkinsBETA
Search In
  • More options...
Find results that contain...
Find results in...
Sign in to follow this  
Vitalik-x

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

Recommended Posts

Ребят, нет решения для 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;
}

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

post-57438-0-72214700-1427446567_thumb.jpg

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

 

---

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

Edited by Viktar83
  • Upvote 1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

А, понял!

table-layout: auto;

 

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

Edited by Одмин

Share this post


Link to post
Share on other sites

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

 

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

например:

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

 

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

Edited by Viktar83
  • Upvote 1

Share this post


Link to post
Share on other sites

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

 

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

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

Share this post


Link to post
Share on other sites

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

 

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

Share this post


Link to post
Share on other sites

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

 

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

Impossible :unsure:

 

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

 

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

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

Edited by Viktar83

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

 

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

Edited by Одмин
  • Upvote 1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

#community_app_menu > li > a

Свойство background

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...