Уважаемые форумчане подскажите пожалуйста, как можно сделать меню с раздвижными вниз подкатегориями DLE 10.2
Цитата: alik2039 от 29-11-2017, 21:45:56
Уважаемые форумчане подскажите пожалуйста, как можно сделать меню с раздвижными вниз подкатегориями DLE 10.2
Привыкай брат к тому, что если хочешь, чтобы кто-то копался в твоем дерьме, за это нужно заплатить. Ну а так, кое что я подскажу тебе бесплатно.
1) Создай блок, где будет выводится все элементы меню.
2) С помощью CSS сделать блок невидимым, типы display:none, visibility:invisible
3) С помощью СSS сделать следующее - если на элемент меню ты наводишь курсор, то должен плавно открываться блок с элементами меню. Если нужно сделать, чтобы блок с элементами меню открывался по клику на кнопку, то тут тебе в помощь JS. Это самые простенькие скрипты.
Кстати кружочки - может сделать как img стоящие перед элементами меню.
И рекомендую на ночь не кодить. Иначе хрен уснешь.
Дерзай, салага :)
Цитата: Sorokin Vladimir от 30-11-2017, 07:32:27
А «погуглить» тему про выпадающие меню – слабо!?
Вот нашел именно то, что мне надо, но не получается его перенастроить под свой шаблон.
Как уже можно было догадаться из названия, для реализации подобного меню у себя на сайте Вам понадобится библиотека jQuery. Если данная библиотека на Вашем сайте еще не была подключена ранее, то следует это сделать следующим образом:
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
Дальше необходимо прописать CSS стиль для нашего меню. Чтобы оно выглядело точно так же как и в примере, приведенном выше, используйте следующее оформление:
<style type="text/css">
ul#menu, ul#menu ul {
list-style-type:none;
margin: 0px;
padding: 0px;
width: 250px;
}
ul#menu a,ul#menu span { display: block; text-decoration: none; }
ul#menu li { margin-top: 1px; }
ul#menu li a,ul#menu li span {
background: #333333;
color: #FFFFFF;
padding: 7px;
}
ul#menu li a:hover,ul#menu li span:hover { background: #000000; }
ul#menu li ul li a {
background: #CCCCCC;
color: #000000;
padding-left: 20px;
}
ul#menu li ul li a:hover {
background: #AAAAAA;
border-left: 5px #000000 solid;
padding-left: 15px;
}
</style>
Меню, которое будет раздвигаться и сдвигаться при клике по его пунктам, следует прописать следующим образом:
<ul id="menu">
<li><span>Скрипты</span>
<ul>
<li><a href="log_info.php">Скрипт записи логов</a></li>
<li><a href="current_time.php">Текущая дата и время</a></li>
<li><a href="slide_show_jquery.php">Слайдшоу на jQuery</a></li>
<li><a href="scroll_to_top.php">Кнопка вверх</a></li>
</ul>
</li>
<li><span>Онлайн сервисы</span>
<ul>
<li><a href="csscompressor.php">Сжатие CSS кода онлайн</a></li>
<li><a href="javascriptcompressor.php">Сжатие JavaScript кода</a></li>
<li><a href="opennet.php">Калькулятор диапазонов IP</a></li>
<li><a href="qrcoder.php">Онлайн генератор QR кодов</a></li>
<li><a href="gtmetrix.php">Анализ скорости сайта</a></li>
</ul>
</li>
<li><a href="">Поддержка</a></li>
<li><a href="">Форум</a></li>
<li><span>Хитрости</span>
<ul>
<li><a href="csssprites.php">Использование CSS спрайтов</a></li>
<li><a href="rgb_cod_color.php">HEX и RGB коды цветов</a></li>
<li><a href="no_www.php">Убрать www из адреса сайта</a></li>
</ul>
</li>
</ul>
Теперь остается лишь где-нибудь в конце странички добавить наш JavaScript код, который будет отвечать за сворачивание и разворачивание меню (его подпунктов). Для этого скопируйте себе данный JavaScript код:
<script type="text/javascript">
$(dоcument).ready(function() {
$("#menu ul").hide();
$("#menu li span").click(function() {
$("#menu ul:visible").slideUp("normal");
if (($(this).next().is("ul")) && (!$(this).next().is(":visible"))) {
$(this).next().slideDown("normal");
}
});
});
</script>
Помогите адаптировать это меню под мой сайт, не получается изменить размер шрифта, ну и чтобы вписывалось в мой сайт. Заранее спасибо.
Добавлено: 30-11-2017, 11:01:41
Цитата: Sorokin Vladimir от 30-11-2017, 10:50:48
а подробней?
Хочется, что бы под категории основных категорий (компьютер, операционная система, смартфоны и телефоны) открывались нажав на них
давайте сделаем по другому, напишите куда мне скинуть архивчик с подборкой менюшек, которые я много раз вставлял в свои шаблоны - посмотрите они все очень просы в настройках стилей (цвет, шрифт и тд), потому что залазить в код вашего сайта (я так понял он на DLE) это последнее дело.
Цитата: Sorokin Vladimir от 30-11-2017, 11:29:48
давайте сделаем по другому, напишите куда мне скинуть архивчик с подборкой менюшек, которые я много раз вставлял в свои шаблоны - посмотрите они все очень просы в настройках стилей (цвет, шрифт и тд), потому что залазить в код вашего сайта (я так понял он на DLE) это последнее дело.
Вот мой адрес alik2039@yandex.ru, буду вам при много благодарен. Огромное спасибо, Буду ждать. Спасибо
В шаблоне menu.tpl замени статичный список на <ul class="dropdown-menu"> с JS-логикой через jQuery.slideToggle().
Добавь data-category-id для динамики, задай overflow: hidden и transition: max-height 0.3s ease. В добавок Ajax-загрузка подкатегорий по клику .