Здравствуйте, уважаемые форумчане! Всем доброго времени суток!
Мне нужно для своего форума сделать горизонтальное меню из семи пунктов с выпадающими по клику подменю. Один из пунктов меню должен содержать третий уровень вложенности и открываться как меню-аккордеон, то есть вниз, а не вбок от второго уровня. При этом предыдущий открытый пункт меню должен закрываться при открытии любого другого пункта. А также при щелчке мыши по области страницы сайта вне меню должны закрываться все пункты меню (и второго и третьего уровня).
Почти три года назад я делала такое меню, использовав готовый скрипт:
<script type="text/javascript">
$(document).ready(function () {
function hideallDropdowns() {
$(".dropped .drop-menu-main-sub").hide();
$(".dropped").removeClass('dropped');
$(".dropped .drop-menu-main-sub .title").unbind("click");
}
function showDropdown(el) {
var el_li = $(el).parent().addClass('dropped');
el_li
.find('.title')
.click(function () {
hideallDropdowns();
})
.html($(el).html());
el_li.find('.drop-menu-main-sub').show();
}
$(".drop-down").click(function(){
showDropdown(this);
});
$(document).mouseup(function () {
hideallDropdowns();
});
});
</script>
(Меню стоит вот здесь:
http://mamasoldata.mybb.ru/. Находится наверху под возрастом форума. )
Но третий уровень там выпадает вбок. И оно НЕ адаптивное.
Сейчас нашла в инете скрипт спойлера:
<script type="text/javascript">
let sp_content2=$('.sp_content2'),sp_title2=$('.sp_tit le2');
sp_content2.hide();
sp_title2.on('click',function(){
let inx=$('.sp_title2').index(this);
if($(sp_content2[inx]).css('display')==='none'){
$(sp_content2).slideUp(100);
$(sp_content2[inx]).slideDown(100);
}else{
$(sp_content2).slideUp(100);
}
})
</script>
Некое подобие того, что я хотела бы сделать с меню находится вот здесь:
http://mamatest3.mybb.ru/ . Первый пункт «Вопросы» как раз открывается как аккордеон.
Понимаю, что это по сути «костыли». Поставила два скрипта, задав разные селекторы. Но в этом варианте меню дёргается и разъезжается.
Попробовала написать скрипт самостоятельно:
<script type="text/javascript">
$(document).ready(function() {
function hideallDropdowns() {
$('.menu .button').on('click', function() {
$(this).children('ul').slideToggle(500)
});
});
$(document).mouseup(function() {
hideallDropdowns();
});
});
</script>
Не работает(((.
Реализация вот здесь:
http://mamatest4.mybb.ru/ . Но там не прописаны правильно стили. Совсем запуталась(((.
Я небольшой специалист. Просто HTML-любитель. HTML-разметка у меня проблем не вызывает. В CSS ориентируюсь. Но сильно путаюсь в классах и селекторах. Учусь по урокам-статьям в интернете. Использую справочники.
Помогите, пожалуйста. Подскажите, что не так?
Ещё хотела спросить:
1. Как лучше сделать при написании стилей: присвоить всем подменю отдельные селекторы ( типа .sub-menu, .sub-sub-menu) или прописывать свойства, используя .menu ul li ul… и тому подобное?
2. Как лучше: вложить подменю в div или чтобы оно просто выпадало?
<ul>
<li>
<span> ВОПРОСЫ</span>
<div>
<ul class=”submenu”>
<li><a>…..</a></li>
<li><a>…</a></li>
</ul>
<div>
</li>
</ul>
Или
<ul>
<li>
<span> ВОПРОСЫ</span>
<ul class=”submenu”>
<li><a>…..</a></li>
<li><a>…</a></li>
</ul>
</li>
</ul>
3. Название пункта меню (например «ВОПРОСЫ») заключить лучше в <span></span> или в <div></div>?
4. Что лучше прописать тегу li основного меню: просто float: left; или display: inline; float: left; ? Спрашиваю, потому что мне ещё всё меню надо сделать адаптивным. (Собственно, адаптивной надо сделать всю шапку форума. Вот здесь я делала адаптивность:
http://mamatest2.rolebb.su/ . )
Извините, если что-то пропустила в своих вопросах. Мне очень Ваша помощь! Буду бесконечно благодарна и признательна за Ваши подсказки.
P.S. В силу того, что я работаю в сменном графике, читать Ваши ответы и применить их на практике могу только каждый четвёртый день.
Извините, если что не так.