Меню как на Мафии

Posted 13 июня, 201510 yr

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

13 июня, 201510 yr

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

В custom.css

ul#ipsLayout_mainNav li a.elNavigation_app_calendar_Calendar:before{
    content:"\f073";
    padding-right:5px;
    font:normal normal normal 14px/1 FontAwesome;
}

ul#ipsLayout_mainNav li a.elNavigation_app_downloads_Downloads:before{
    content:"\f019";
    padding-right:5px;
    font:normal normal normal 14px/1 FontAwesome;
}

ul#ipsLayout_mainNav li a.elNavigation_app_forums_Forums:before{
    content:"\f086";
    padding-right:5px;
    font:normal normal normal 14px/1 FontAwesome;
}

ul#ipsLayout_mainNav li a.elNavigation_app_blog_Blogs:before{
    content:"\f017";
    padding-right:5px;
    font:normal normal normal 14px/1 FontAwesome;
}

ul#ipsLayout_mainNav li a.elNavigation_app_gallery_Gallery:before{
    content:"\f03e";
    padding-right:5px;
    font:normal normal normal 14px/1 FontAwesome;
}

ul#ipsLayout_mainNav li a.elNavigation_app_cms_0:before{
    content:"\f188";
    padding-right:5px;
    font:normal normal normal 14px/1 FontAwesome;
}

ul#ipsLayout_mainNav li a.elNavigation_app_cms_1:before{
    content:"\f02d";
    padding-right:5px;
    font:normal normal normal 14px/1 FontAwesome;
}

ul#ipsLayout_mainNav li a.elNavigation_app_nexus_Support:before{
    content:"\f059";
    padding-right:5px;
    font:normal normal normal 14px/1 FontAwesome;
}

Цитата

iliah, ARGRESSOR, AlexOrekhofff and 1 other
4

13 июня, 201510 yr

Author

В custom.css

ul#ipsLayout_mainNav li a.elNavigation_app_calendar_Calendar:before{
    content:"\f073";
    padding-right:5px;
    font:normal normal normal 14px/1 FontAwesome;
}

ul#ipsLayout_mainNav li a.elNavigation_app_downloads_Downloads:before{
    content:"\f019";
    padding-right:5px;
    font:normal normal normal 14px/1 FontAwesome;
}

ul#ipsLayout_mainNav li a.elNavigation_app_forums_Forums:before{
    content:"\f086";
    padding-right:5px;
    font:normal normal normal 14px/1 FontAwesome;
}

ul#ipsLayout_mainNav li a.elNavigation_app_blog_Blogs:before{
    content:"\f017";
    padding-right:5px;
    font:normal normal normal 14px/1 FontAwesome;
}

ul#ipsLayout_mainNav li a.elNavigation_app_gallery_Gallery:before{
    content:"\f03e";
    padding-right:5px;
    font:normal normal normal 14px/1 FontAwesome;
}

ul#ipsLayout_mainNav li a.elNavigation_app_cms_0:before{
    content:"\f188";
    padding-right:5px;
    font:normal normal normal 14px/1 FontAwesome;
}

ul#ipsLayout_mainNav li a.elNavigation_app_cms_1:before{
    content:"\f02d";
    padding-right:5px;
    font:normal normal normal 14px/1 FontAwesome;
}

ul#ipsLayout_mainNav li a.elNavigation_app_nexus_Support:before{
    content:"\f059";
    padding-right:5px;
    font:normal normal normal 14px/1 FontAwesome;
}

 content:"\f073";

это вот и есть картинка, можно ли ставить свою и где они лежат?

а изменение цвета кнопки при наведение где поменять?

у меня по ипс 4 одни вопросы блин) хорошо хоть конвертировать базу с 3.х.х научился без потерь)

Edited 13 июня, 201510 yr by iliah

Цитата

Artemka
1

13 июня, 201510 yr

 content:"\f073"; 
это вот и есть картинка, можно ли ставить свою и где они лежат?

а изменение цвета кнопки при наведение где поменять?

Это шрифт font awesome, погугли коды для иконок.

Цвет при наведении:

#ipsLayout_mainNav > li > a:hover {
		opacity: 1;
		color: #fff;
      background: #3FB2E1;
	}

Цитата

iliah
1

14 июня, 201510 yr

Author

Это шрифт font awesome, погугли коды для иконок.

Цвет при наведении:
#ipsLayout_mainNav > li > a:hover {
		opacity: 1;
		color: #fff;
      background: #3FB2E1;
	}

Спасибо!! Вроде настроил. За значки особое спасибо то что надо!

Цитата

14 июня, 201510 yr

Спасибо

Цитата

20 июня, 201510 yr

Спасибо! Много где искал подобное, но нашел только здесь

Цитата

20 июня, 201510 yr

Чтоб не мучаться для тех кто не особо знаток в стилях и шрифтах, просто пропишите в head

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

И можете смело прописывать шрифты в менюшках и где угодно) Это подключение с офсайта)

Цитата

20 июня, 201510 yr

Для чего это делать, если шрифт изначально присутствует в четвёрке и обычные вставки классов шрифта понимаются движком без проблем.

Цитата

7 декабря, 20159 yr

В 13.06.2015, 21:20:13, Topce сказал:

В custom.css


ul#ipsLayout_mainNav li a.elNavigation_app_calendar_Calendar:before{
    content:"\f073";
    padding-right:5px;
    font:normal normal normal 14px/1 FontAwesome;
}

ul#ipsLayout_mainNav li a.elNavigation_app_downloads_Downloads:before{
    content:"\f019";
    padding-right:5px;
    font:normal normal normal 14px/1 FontAwesome;
}

ul#ipsLayout_mainNav li a.elNavigation_app_forums_Forums:before{
    content:"\f086";
    padding-right:5px;
    font:normal normal normal 14px/1 FontAwesome;
}

ul#ipsLayout_mainNav li a.elNavigation_app_blog_Blogs:before{
    content:"\f017";
    padding-right:5px;
    font:normal normal normal 14px/1 FontAwesome;
}

ul#ipsLayout_mainNav li a.elNavigation_app_gallery_Gallery:before{
    content:"\f03e";
    padding-right:5px;
    font:normal normal normal 14px/1 FontAwesome;
}

ul#ipsLayout_mainNav li a.elNavigation_app_cms_0:before{
    content:"\f188";
    padding-right:5px;
    font:normal normal normal 14px/1 FontAwesome;
}

ul#ipsLayout_mainNav li a.elNavigation_app_cms_1:before{
    content:"\f02d";
    padding-right:5px;
    font:normal normal normal 14px/1 FontAwesome;
}

ul#ipsLayout_mainNav li a.elNavigation_app_nexus_Support:before{
    content:"\f059";
    padding-right:5px;
    font:normal normal normal 14px/1 FontAwesome;
}

Вставил в custom.css этот код и ни чего не изменилось, подскажите как сделать такое меню?

Цитата

7 декабря, 20159 yr

2 часа назад, Sergis сказал:

Вставил в custom.css этот код и ни чего не изменилось, подскажите как сделать такое меню?

У вас версия форума какая? Это было для IPB 3.4 актуально.

Цитата

7 декабря, 20159 yr

Только что, andros0789 сказал:

У вас версия форума какая? Это было для IPB 3.4 актуально.

Версия IPS 4.1.4, не подскажете код для этой версии?

Цитата

7 декабря, 20159 yr

1 минуту назад, Sergis сказал:

Версия IPS 4.1.4, не подскажете код для этой версии?

#elUserLink_menu a[href*="/profile/"]:before {
     content: "\f007"
 }
 #elUserLink_menu a[href='/index.php?/messenger/']:before {
     content: "\f01c"
 }
 #elUserLink_menu a[href*="/content/"]:before {
     content: "\f03a"
 }
 #elUserLink_menu a[href*="/followed/"]:before {
     content: "\f1d8"
 }
 #elUserLink_menu a[href*="/attachments/"]:before {
     content: "\f0c6"
 }
 #elUserLink_menu a[href*="/settings/"]:before {
     content: "\f013"
 }
 #elUserLink_menu a[href*="/clients/"]:before {
     content: "\f07a"
 }
 #elUserLink_menu a[href*="edit"]:before {
     content: "\f040"
 }
 #elUserLink_menu a[href*="/ignore/"]:before {
     content: "\f05e"
 }
 #elUserLink_menu a[href*="/notifications/options/"]:before {
     content: "\f0ac"
 }
 #elUserLink_menu a[href*="/modcp/"]:before {
     content: "\f046"
 }
 #elUserLink_menu a[href*="/admin"]:before {
     content: "\f023"
 }
 #elUserLink_menu a[href*="/logout/"]:before {
     content: "\f08b"
 }
 #ipsLayout_mainNav a:before {
     margin-right: 3px;
     opacity: 0.6;
 }
 #ipsLayout_mainNav a:hover:before,
 #ipsLayout_mainNav a.ipsNavActive:before {
     opacity: 1;
 }
 html[dir="rtl"] #ipsLayout_mainNav a:before {
     margin-right: 0;
     margin-left: 3px;
 }
 #elCreateNew_menu a:before {
     content: "\f0fe"
 }
 #elCreateNew_menu a[href*="module=status"]:before {
     content: "\f086"
 }
 #ipsLayout_mainNav a[class*="downloads_"]:before,
 #elCreateNew_menu a[href*="/files/"]:before {
     content: "\f019"
 }
 #ipsLayout_mainNav a[class*="gallery_"]:before,
 #elCreateNew_menu a[href*="/gallery/"]:before {
     content: "\f03e"
 }
 #ipsLayout_mainNav a[class*="nexus_Store"]:before {
     content: "\f07a"
 }
 #ipsLayout_mainNav a[class*="nexus_Support"]:before {
     content: "\f1cd"
 }
 #ipsLayout_mainNav a[class*="blog_"]:before,
 #elCreateNew_menu a[href*="/blogs/"]:before {
     content: "\f02d"
 }
 #ipsLayout_mainNav a[class*="calendar_"]:before,
 #elCreateNew_menu a[href*="/calendar/"]:before {
     content: "\f073"
 }
 #ipsLayout_mainNav a[class*="cms_"]:before,
 #elCreateNew_menu a[href*="/articles"]:before {
     content: "\f0f6"
 }
 #ipsLayout_mainNav a[class*="forums_"]:before,
 #elCreateNew_menu a[href*="/forum/"]:before {
     content: "\f086"
 }
 #ipsLayout_mainNav a[class*="core_Core"]:before {
     content: "\f015"
 }
 #ipsLayout_mainNav a[class*="chat_"]:before {
     content: "\f022"
 }
 #ipsLayout_mainNav a#elNavigationMore_dropdown:before {
     content: "\f0fe";
     display: none;
 }

Это примерное будет выглядеть вот так=) В custom положите, думаю тут все доступно описано, а здесь изображения https://fortawesome.github.io/Font-Awesome/icons/

Цитата

rustav and Helios
2

7 декабря, 20159 yr

10 минут назад, andros0789 сказал:

Это примерное будет выглядеть вот так=) В custom положите, думаю тут все доступно описано

Что то не получается, вставил этот код в custom, не меняется, что то не так делаю? Не очень разбираюсь в этом)

Цитата

7 декабря, 20159 yr

4 часа назад, Sergis сказал:

Что то не получается, вставил этот код в custom, не меняется, что то не так делаю? Не очень разбираюсь в этом)

Можете сделать проще, к каждому меню добавить отдельно, от вас требуется правой кнопкой мыши посмотреть какой айди присвоен каждому меню и прописать для каждой вкладки свой стиль вот пример:

a[data-navitem-id="10"]:before {
    content: "\f019";
    font-family: FontAwesome;
}

Вот на скрине видно id 32 и 10)) Вот создаете для каждой вкладки свой стиль и радуетесь) а картинки прописываете у казывал выше, с сайта фонтавесом) Удачи

Цитата

Redneck, Helios, benix and 1 other
4

7 декабря, 20159 yr

16 минут назад, andros0789 сказал:

Можете сделать проще, к каждому меню добавить отдельно,

Спасибо большое! Так получилось!

Цитата

7 декабря, 20159 yr

Вот и на меню стало похоже

Цитата

7 декабря, 20159 yr

1 час назад, Redneck сказал:

Спасибо большое! Так получилось!

Пожалуйста) Я думаю самый простой способ)

Цитата

8 декабря, 20159 yr

20 часов назад, andros0789 сказал:

Можете сделать проще, к каждому меню добавить отдельно, от вас требуется правой кнопкой мыши посмотреть какой айди присвоен каждому меню и прописать для каждой вкладки свой стиль вот пример:

a[data-navitem-id="14"]{background:#15a606 !important;color:white !important;}
a[data-navitem-id="14"]:before {
    content: "\f02d";
   font-family: FontAwesome;
  
}

Сделал вот так, цвет поменялся, но при наведении мышки на это меню цвет не меняеться, как правильно сделать не подскажете? И еще как сделать всю полоску, где меню чуть шире в высоту?

Цитата

8 декабря, 20159 yr

3 минуты назад, Sergis сказал:
a[data-navitem-id="14"]{background:#15a606 !important;color:white !important;}
a[data-navitem-id="14"]:before {
    content: "\f02d";
   font-family: FontAwesome;
  
}
Сделал вот так, цвет поменялся, но при наведении мышки на это меню цвет не меняеться, как правильно сделать не подскажете? И еще как сделать всю полоску, где меню чуть шире в высоту?

К стилю добавить :hover и добавить туда цвет при наведении. А "шире в высоту" это надо добавить height побольше и все))

Цитата

rustav and Helios
2

10 декабря, 20159 yr

В 08.12.2015 в 16:24, andros0789 сказал:

К стилю добавить :hover и добавить туда цвет при наведении. А "шире в высоту" это надо добавить height побольше и все))

В какое место добавлять :hover? И про ширину не понял, меня интересует вся полоска, что бы чуть шире в высоту была (пример, как на этом сайте), а не пункты меню. я же не разбираюсь в этом, скинь пожалуйста готовый код, по этим вопросам.

Цитата

11 декабря, 20159 yr

a:hover

Цитата

27 декабря, 20159 yr

У меня такой вопрос:

А как добавить такие же иконки, только к группам? Что бы возле ника светились. Видел на нескольких форумах такое.

Цитата

27 декабря, 20159 yr

29 минут назад, MurderCore сказал:

У меня такой вопрос:

А как добавить такие же иконки, только к группам? Что бы возле ника светились. Видел на нескольких форумах такое.

Группы пользователей - Нужная группа - Форматирование

<i class="fa fa-book"></i>

Вставляем код в начало если хотим что бы перед ником было, или в конец.

Иконки можно брать с офф. сайта

http://fortawesome.github.io/Font-Awesome/icons/

Цитата

MurderCore
1

27 декабря, 20159 yr

2 часа назад, MurderCore сказал:

У меня такой вопрос:

А как добавить такие же иконки, только к группам? Что бы возле ника светились. Видел на нескольких форумах такое.

Перед названием группы или после добавляешь

<i class="fa fa-star"></i>

Цитата

MurderCore
1

Sign In

Меню как на Мафии

Featured Replies

Join the conversation

Последние посетители 0

Account

Navigation

Search

Configure browser push notifications

Chrome (Android)

Chrome (Desktop)

Safari (iOS 16.4+)

Safari (macOS)

Edge (Android)

Edge (Desktop)

Firefox (Android)

Firefox (Desktop)