Перейти к публикации
Дизайн и модификация IPS Community IPBSkinsBETA
Поиск в
  • Дополнительно...
Искать результаты, содержащие...
Искать результаты в...
Vitalik-x

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

Рекомендованные сообщения

03/27/15 08:51 (изменено)

Ребят, нет решения для 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> в процентах (но тогда должно быть строго неизменное число пунктов меню).

Изменено пользователем Viktar83
  • Upvote 1

Поделиться сообщением


Ссылка на сообщение

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

Поделиться сообщением


Ссылка на сообщение
03/27/15 09:54 (изменено)

А, понял!

table-layout: auto;

 

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

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

Поделиться сообщением


Ссылка на сообщение
03/27/15 10:05 (изменено)

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

 

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

например:

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

 

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

Изменено пользователем Viktar83
  • Upvote 1

Поделиться сообщением


Ссылка на сообщение

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

 

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

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

Поделиться сообщением


Ссылка на сообщение

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

 

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

Поделиться сообщением


Ссылка на сообщение
04/06/15 19:28 (изменено)

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

 

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

Impossible :unsure:

 

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

 

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

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

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

Поделиться сообщением


Ссылка на сообщение

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

Поделиться сообщением


Ссылка на сообщение
04/18/15 11:20 (изменено)

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

 

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

Изменено пользователем Одмин
  • Upvote 1

Поделиться сообщением


Ссылка на сообщение

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

Поделиться сообщением


Ссылка на сообщение

up

Поделиться сообщением


Ссылка на сообщение

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

#community_app_menu > li > a

Свойство background

Поделиться сообщением


Ссылка на сообщение

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас

  • Сейчас на странице   0 пользователей

    Нет пользователей, просматривающих эту страницу.

×
×
  • Создать...