Проверено

VDS-хостинг - именно на этом хостинге работает наш сайт.
Sape - биржа временных ссылок, доход 80р/день.
Trustlink - биржа временных ссылок, доход 60р/день.
Telderi - здесь покупаю сайты для дальнейшего заработка.

Партнеры

ArendaAvtoTehniki.ru
arendaavtotehniki.ru

Адаптация МЕГА меню для DLE



Адаптировал: Golden
DLE: 9.3 (и ранние версии)
Демо: topscripts.ru


Скачиваем скрипт
Прикреплённые файлы:
Файл: jkmegamenu.zip
Размер: [2,1 Kb] (забрали: 35 раз)



Подключаем

Скрипты кидаем в папку js вашего шаблона

Открываем файл шаблона main.tpl
между тегами
<head></head>


Вставляем:
<script type="text/javascript" src="{THEME}/js/jkmegamenu.js"></script>
<script type="text/javascript">
      jkmegamenu.definemenu("megaanchor", "megamenu1", "mouseover")
</script>


В коде выше Вы можете найти значение "mouseover". Его можно заменить на "click" и тогда меню будет открываться не при наведении, а при нажатии на ссылку.

Если на странице будет несколько меню, тогда необходимо будет несколько раз их инициализировать. Для этого достаточно нужное количество раз повторить строку jkmegamenu.definemenu() с классами, которые относятся к этому меню.

Далее в любом месте документа вставляем ссылку с id="megaanchor". Именно при наведении мышки на эту ссылку у нас будет появляться меню. После ссылки необходимо оформить разметку меню. Как Вы видите, все предельно просто: с помощью заголовков 3-го уровня и неупорядоченных списков мы можем создать любую конфигурацию.

Пример HTML
<a href="#" id="megaanchor">Это Мега Меню :)</a>
....
....
<div id="megamenu1" class="megamenu">
<div class="column">

  <h3>Web Development</h3>
  <ul>
  <li><a href="#">javascript Kit</a></li>
  <li><a href="#">Dynamic Drive</a></li>
  <li><a href="#">CSS Drive</a></li>

  <li><a href="#">Coding Forums</a></li>
  <li><a href="#">DOM Reference</a></li>
  </ul>
  </div>
<div class="column">
  <h3>News Related</h3>
  <ul>
  <li><a href="#">CNN</a></li>
  <li><a href="#">MSNBC</a></li>
  <li><a href="#">Google</a></li>
  <li><a href="#">BBC News</a></li>
  </ul>
  </div>
<div class="column">
  <h3>Technology</h3>
  <ul>
  <li><a href="#">News.com</a></li>
  <li><a href="#">SlashDot</a></li>
  <li><a href="#">Digg</a></li>
  <li><a href="#">Tech Crunch</a></li>
  </ul>
  </div>
<br style="clear: left" /> <!--Break after 3rd column. Move this if desired-->
<div class="column">
  <h3>Web Development</h3>
  <ul>
  <li><a href="#">javascript Kit</a></li>
  <li><a href="#">Dynamic Drive</a></li>
  <li><a href="#">CSS Drive</a></li>
  <li><a href="#">Coding Forums</a></li>
  <li><a href="#">DOM Reference</a></li>
  </ul>
  </div>
<div class="column">
  <h3>News Related</h3>
  <ul>
  <li><a href="#">CNN</a></li>
  <li><a href="#">MSNBC</a></li>
  <li><a href="#">Google</a></li>
  <li><a href="#">BBC News</a></li>
  </ul>
  </div>
<div class="column">
  <h3>Technology</h3>
  <ul>
  <li><a href="#">News.com</a></li>
  <li><a href="#">SlashDot</a></li>
  <li><a href="#">Digg</a></li>

  <li><a href="#">Tech Crunch</a></li>
  </ul>
  </div>
</div>


С помощью стилей придаем данному блоку относительное позиционирование. Благодаря этому можем размещать дополнительные блоки внутри.

Стили
.megamenu{
position: absolute;
display: none;
left: 0;
top: 0;
background: white;
border: 1px solid #f06b24;
border-width: 5px 1px;
padding: 10px;
font: normal 12px Verdana;
z-index: 100;

}

.megamenu .column{
float: left;
width: 180px; /*width of each menu column*/
margin-right: 5px;
}

.megamenu .column ul{
margin: 0;
padding: 0;
list-style-type: none;
}

.megamenu .column ul li{
padding-bottom: 5px;
}

.megamenu .column h3{
background: #e0e0e0;
font: bold 13px Arial;
margin: 0 0 5px 0;
}

.megamenu .column ul li a{
text-decoration: none;
}

.megamenu .column ul li a:hover{
color: red;
}


Библиотека jQuery подключена в DLE по умолчанию, обязательна для работы скрипта, если же по каким либо причинам она отсутствует подключаем.

Другие новости по теме:

| Пишет: General | 12 июня 2011 22:02 | Сообщений: 6 | Новостей: 0
Спасибо хорошая штука lol
| Пишет: Golden | 12 июня 2011 22:04 | Сообщений: 77 | Новостей: 4524
Не за что, чуть освобожусь много разных меню выложу
| Пишет: General | 4 августа 2011 22:56 | Сообщений: 6 | Новостей: 0
Одного не могу понять, кучу раз уже по всякому попробовал, но при подключении этого JS файла у меня перестают работать стандартные JQuery функции, типа pop up окна. А так модуль рабочий.
| Пишет: vproject | 1 ноября 2011 13:09 | Сообщений: 1 | Новостей: 0
Значит пропусти установку JS
| Пишет: Dool | 19 декабря 2013 16:42 | Сообщений: 1 | Новостей: 0
перезалейте плиз