См. Http://angelaandtom.co.uk/#
Когда вы нажимаете на ссылку "РАБОТА" внизу слева, открывается слайд меню. Если выбрать одну из этих ссылок, изображения будут исчезать и выходить с помощью jQuery. Проблема в том, что по мере того, как пользователь щелкает между этими ссылками, меню тоже исчезает, я не хочу, чтобы это произошло. Я хочу, чтобы меню оставалось постоянным, а скрытые изображения исчезали.
Мой код jQuery очень длинный, поскольку я новичок в этом и сделал это единственным способом, которым я мог это понять. Я уверен, что есть более быстрый способ достижения этих эффектов, однако я не уверен, что мой код - это проблема, влияющая на меню или нет?
$('#contact').click(function () {
$('#contact-info').animate({
width: 'toggle'
});
$('#work-menu').fadeOut('100');
$('.hidden-work').fadeOut('100');
});
$('#menu').click(function () {
$('#work-menu').animate({
width: 'toggle'
});
$('#contact-info').fadeOut('100');
$('.hidden-work').fadeOut('100');
});
$('#dust').click(function () {
$('#dust-div').fadeToggle('500');
$('#contact-info').fadeOut('100');
});
$("#dust").click(function () {
$("#dust a").addClass("active");
$("#fatal a, #youth a, #hurt a, #black a").removeClass("active");
$('#youth-div, #fatal-div, #hurt-div, #black-div').fadeOut('100');
});
$("#fatal").click(function () {
$("#fatal a").addClass("active");
$('#fatal-div').fadeIn('500');
$("#dust a, #youth a, #hurt a, #black a").removeClass("active");
$('#dust-div, #youth-div, #black-div, #hurt-div').fadeOut('100');
});
$("#hurt").click(function () {
$("#hurt a").addClass("active");
$('#hurt-div').fadeIn('500');
$("#fatal a, #youth a, #dust a, #black a").removeClass("active");
$('#dust-div, #youth-div, #fatal-div, #black-div').fadeOut('100');
});
$("#youth").click(function () {
$("#youth a").addClass("active");
$('#youth-div').fadeIn('500');
$("#dust a, #fatal a, #hurt a, #black a").removeClass("active");
$('#dust-div, #black-div, #fatal-div, #hurt-div').fadeOut('100');
});
$("#black").click(function () {
$("#black a").addClass("active");
$('#black-div').fadeIn('500');
$("#dust a, #fatal a, #hurt a, #youth a").removeClass("active");
$('#dust-div, #youth-div, #fatal-div, #hurt-div').fadeOut('100');
});
$("#menu").click(function () {
$("#fatal a, #youth a, #hurt a, #dust a").removeClass("active");
$('#dust-div').fadeOut('100');
});
Меню расположено над областью страницы, которая исчезает, в результате меню исчезает. Вы можете установить z-index: 1;
on #work-menu
. Это должно решить вашу проблему. (Здесь скрипка)