Единый форум поддержки

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Единый форум поддержки » Справочная » FAQ по созданию выпадающего списка в главном меню без применения JS


FAQ по созданию выпадающего списка в главном меню без применения JS

Сообщений 1 страница 7 из 7

1

Все (ну или почти все) знают, что в Администрировании -> Настройках есть пункт -> Дополнительные пункты меню, через который мы можем добавлять дополнительные пункты к нашему главному меню, но не все догадываются, что в этом пункте к меню можно прикрутить практически любой html код,
стандартное добавление выглядит так:

1 = <a href="ссылка на дополнительный пункт меню"><span>Название пункта меню (описание)</span></a>

где цифра впереди это порядковый номер позиции дополнительного пункта в меню, начиная с 0 и т.д.

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

1 = <a href="/pages/spravochnik">
<span>Справочник
<ul>
<li><a href="/pages/ssylka">Пункт 1</a></li>
<li><a href="/pages/ssylka2">Пункт 2</a></li>
<li><a href="/pages/ssylka3">Пункт 3</a></li>
<li><a href="/pages/ssylka4">Пункт 4</a></li>
<li><a href="/pages/ssylka5">Пункт 5</a></li>
</ul>
</span></a>

НО вставлять весь этот код нужно без пробелов между тегами, т.е. так

Код:
1 = <a href="/pages/spravochnik"><span>Справочник<ul><li><a href="/pages/ssylka">Пункт 1</a></li><li><a href="/pages/ssylka2">Пункт 2</a></li><li><a href="/pages/ssylka3">Пункт 3</a></li><li><a href="/pages/ssylka4">Пункт 4</a></li><li><a href="/pages/ssylka5">Пункт 5</a></li></ul></span></a>

теперь создадим эффект выпадания списка дополнительных пунктов в главном меню при наведении курсора
в html-верх или в свой стиль добавляем код:

Код:
<style>
/*выпадающее меню*/
#pun-navlinks {
  opacity: 0.9;
  filter: alpha(opacity=90);
  text-align: center !important;
}

#pun-navlinks ul li {
  margin: 0 20px 0 0;
  padding: 0.9em 0 !important;
  position: relative;
}

#pun-navlinks ul li ul {
  width: 175px;
  display: none;
  position: absolute;
  z-index: 10000;
  top: 30px;
  left: -35px;
  background: #828282;
  -moz-border-radius: 10px; 
  -webkit-border-radius: 10px; 
  -khtml-border-radius: 10px;  
  border-radius: 10px;
}

#pun-navlinks.section ul.container ul li {
  float: left;
  display: block;
  width: 100%;
  text-align: center;
  font-weight: bold;
  padding: 0.5em 0 !important;
  margin: 0 !important;
  position: static !important;
}

#pun-navlinks ul li:hover ul {
  display: block !important;
}

/* 2nd Menu */
#pun-navlinks ul li:hover li a {
  color: #fff;
}

/* 2nd Menu Hover Persistence */
#pun-navlinks ul li:hover li a:hover, #pun-navlinks ul li:hover li:hover a {
  background: #555;
  color: #ffcc33;
  text-decoration: none;
  font-weight: bold;
}
</style>

была предпринята попытка сделать стиль выпадающего меню, не нарушающим вид главного меню, но возможно что его ещё надо править,
спасибо rps в помощи корректировки стиля!

преимущество такого создания меню в виде выпадающего списка, в том что этот выпадающий список будет отображаться и работать даже при администрировании форума и при отключенной поддержки JavaScript в браузере у пользователя

0

2

Romych
Надо сделать такие кнопки, которые б скрывали стандартные пункты (не все, некоторые), а вместо них выводили выпадающий список... Например вместо "Сообщения" пусть открывается список с пунктами "Входящие", "Написать сообщение", "Исходящие" и так далее, кому что нужно. Главное - без JavaScript.

0

3

rps написал(а):

Надо сделать такие кнопки, которые б скрывали стандартные пункты (не все, некоторые), а вместо них выводили выпадающий список... Например вместо "Сообщения" пусть открывается список с пунктами "Входящие", "Написать сообщение", "Исходящие" и так далее, кому что нужно. Главное - без JavaScript.

в общем идея с заменой главного меню пунктами с выпадающим списком ссылок без применения JS мне нравится, и всё вроде бы получается, что касается пункта меню Сообщения, кроме отображения новых сообщений, поэтому совсем без JS обойти не удалось, но свёл его присутствие к минимум,
в общем получается так

замена пункта Сообщения в главном меню на пункт с выпадающим списком подпунктов
с минимальным применением JS

заходим в Администрирование -> Настройки -> Дополнительные пункты меню
добавляем туда

Код:
4 = <a  href="/messages.php"><span id="MSG">Сообщения<ul><li><a href="/messages.php?box=0">Входящие</a></li><li><a href="/messages.php?box=1">Отправленные</a></li><li><a href="messages.php?action=new">Новое сообщение</a></li></ul></span></a>

в html-верх:

Код:
<style>
/*выпадающее меню*/
#pun-navlinks {
  opacity: 0.9;
  filter: alpha(opacity=90);
  text-align: center !important;
  position: relative;
}

#pun-navlinks ul li {
  margin: 0 20px 0 0;
  padding: 0.9em 0 !important;
  position: relative;
}

#pun-navlinks ul li ul {
  width: 175px;
  display: none;
  position: absolute;
  z-index: 10000;
  top: 30px;
  left: -35px;
  background: #828282;
  -moz-border-radius: 10px; 
  -webkit-border-radius: 10px; 
  -khtml-border-radius: 10px;  
  border-radius: 10px;
}

#pun-navlinks.section ul.container ul li {
  float: left;
  display: block;
  width: 100%;
  text-align: center;
  font-weight: bold;
  padding: 0.5em 0 !important;
  margin: 0 !important;
  position: static !important;
}

#pun-navlinks ul li:hover ul {
  display: block !important;
}

/* 2nd Menu */
#pun-navlinks ul li:hover li a {
  color: #fff;
}

/* 2nd Menu Hover Persistence */
#pun-navlinks ul li:hover li a:hover, #pun-navlinks ul li:hover li:hover a {
  background: #555;
  color: #ffcc33;
  text-decoration: none;
  font-weight: bold;
}
li#navpm a { display: none;}
</style>

а лучше всего это работает, если вы используете свой стиль, меню будет корректно отображаться и при администрировании форума (вставлять естественно без тегов <style>)

ну и теперь JS часть
в html-низ:

Код:
<script language="javascript">
var msgStr = $('li#navpm a span').text().slice(9);
$('span#MSG').append(msgStr );
</script>

вот собственно и всё

увеличить

+2

4

Romych
Шикарно! Всё-таки решил делать... ;)

0

5

Поставила я эту штуку пока на тестовик (пост #3)...
Всё настроила, вроде всё хорошо... Но почему-то гостю видны эти самые "сообщения".
Скрин
Ссылка на тестовик:

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Какие проблемы? Что не так? О_о

Отредактировано Baby Policeman (Пт, 11 Ноя 2011 19:48:02)

0

6

Baby Policeman написал(а):

Какие проблемы? Что не так?

Все так. Действительно есть баг с видимостью этого доп. пункта меню гостям.

Baby Policeman, установите в ХТМЛ-низ скрипт

<script type="text/javascript">
if (GroupID == 3)
document.getElementById("navextra1").style.display = "none";
</script>

Цифра красным - номер доп. поля пункта меню, это не позиция ссылки в меню навигации, которая ставится в Администрирование -> Настройки -> Дополнительные пункты меню
Номер ставится по порядку. Если у Вас два доп. пункта меню и "сообщения" посталены вторым пунктом, то ставите navextra2 и т.д. Позиция при этом может быть и другая.

+1

7

Кофеман
Спасибо, всё получилось))

0


Вы здесь » Единый форум поддержки » Справочная » FAQ по созданию выпадающего списка в главном меню без применения JS