У вас есть вопрос о том, как добавить меню в форум дискурса / добавить пункты меню в область заголовка основного дискурса?
Недавно я добавил пользовательские заголовки навигации в Crunchify Forum , Форум Discourse.org пока работает отлично. У нас прошел форум по хостингу Linode.
Я хотел иметь хотя бы несколько ссылок на свой оригинальный блог на Crunchify Forum и решил осмотреться. Я ищу много и единственное решение, которое мне нравится, которое было на форуме FeverBee . Поэтому я начал реализовывать подобное меню и хотел бы поделиться подробными шагами со своими читателями.
- Как добавить ссылки меню заголовка
- Пользовательский заголовок навигации, такой как discourse.org
- Лучший способ настроить заголовок для Discourse meta?
- Как добавить внешнюю ссылку в верхнее меню?
- Вставить пользовательские пункты меню в главном меню
- Добавьте заголовок навигации, который вернет вас на родительский сайт.
Этот урок поможет вам, если у вас есть какие-либо из перечисленных выше вопросов.
Давайте начнем:
Шаг 1
- Перейти на страницу администрирования вашего форума
- Нажмите на
Customizeкнопка - Нажмите на
CSS/HTMLкнопка - Нажмите на
Newи добавьте свойpreferred Name
Шаг 2
Нажмите на CSS tab и добавьте ниже к CSS section ,
Этот CSS будет обеспечивать отображение заголовка меню только на рабочем столе с min-width of 1024px , Мы используем @media Свойства CSS .
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
/ * =============== CSS Crunchify Header Menu ================ * /
// Скрыть заголовок меню на мобильных устройствах
@ мультимедийный экран и ( максимальная ширина : 1024 пикс. ) {
, crunchify — контейнер {
дисплей : никто ! важно ;
}
}
// Показать меню заголовка только на рабочем столе с размером> 1024px
@ мультимедийный экран и ( мин — ширина : 1024 пикс. ) {
span # crunchify-top-links {
дисплей : блок ! важно ;
поле : 10px 0 0 0 ;
}
div # crunchify-navbar {
max — ширина : нет ;
ширина : авто ;
z — индекс : 1040 ;
положение : исправлено ;
верх : 0 ;
слева : 38 % ;
}
, nav — ссылка — контейнер литий {
дисплей : inline — блок ;
плавать : слева ;
}
, nav — ссылка — контейнер {
цвет : RGB ( 255 , 255 , 255 ) ;
текст — оформление : нет ;
текст — выровнять : центр ;
линия — высота : 48 пикселей ;
размер шрифта : 14px ;
набивка : 0 1em ;
}
, d — заголовок , иконки , значок {
плавать : правильно ;
цвет : # EC7825;
}
, nav — ссылка — контейнер {
дисплей : в соответствии
}
}
|
Шаг 3
Нажмите на Header section и добавьте ниже код . Измените ссылки в соответствии с вашими потребностями в блоке кода ниже.
|
1
2
3
4
5
6
7
8
9
10
|
< div id = crunchify-navbar class = crunchify-container >
< span id = crunchify-top-links >
< ul class = nav-link-container >
< li > < a href = https://crunchify.com target = _blank class = nav-link > BLOG < / a > < / li >
< li > < a href = https://crunchify.com/category/java-tutorials/ target = _blank class = nav-link > КОД JAVA < / a > < / li >
< li > < a href = https://crunchify.com/category/spring-mvc/ target = _blank class = nav-link > SPRING MVC < / a > < / li >
< li > < a href = https://pro.crunchify.com/ target = _blank class = nav-link > УСЛУГИ < / a > < / li >
< li > < a href = https://crunchify.com/contact/ target = _blank class = nav-link > КОНТАКТ < / a > < / li >
< / ul > < / span >
< / div >
|
Шаг 4
Идти к Section и добавьте ниже код. Этот javascript будет гарантировать, что когда ваш экран scrolled down to 120px это будет скрывать меню заголовка
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<скрипт>
$ ( окно ) . прокрутка ( функция ( ) {
если ( $ ( это ) . scrollTop ( ) > 120 )
{
$ ( '.crunchify-container' ) . fadeOut ( ) ;
}
еще
{
$ ( '.crunchify-container' ) . fadeIn ( ) ;
}
} ) ;
|
Шаг 5
Нажмите Save button и нажмите checkbox for Enabled вариант.
Просто обновите свой форум, и вы должны увидеть красивый заголовок навигации на вашем форуме.
Live Demo
Проверьте это Crunchify Forum: https://ask.crunchify.com .
0.00 (0%) 0 votes
