Часто на сайтах вижу, что создают ссылки типа больше инфо и т.д., при клике на которые открывается выпадающее меню или инфа, при этом вся остальная часть страницы сдвигается вниз, а также можно всё обратно свернуть, например, здесь на главной так сделали.
6 ответов
Изучите материал здесь, там есть пример. Вообще занимательная серия статьей, советую!
По вашей ссылке на главной этот элемент называется аккордеон (accordeon), а есть еще toggle, это когда вы можете любые элементы открывать и закрывать, но другие от этого не изменяются, как в аккордеоне.
Человек выше правильно посоветовал вам библиотеку jQuery, на ней это реализуется. Поищите примеры в интернете.
на ruseller.com видел подобное меню. В любом случае через jquery
Как вариант без js с применением только css — попробуйте информацию, которая будет содержаться по ссылке «подробнее» , засунуть в относительно позиционированный блок с атрибутом display:none и отображать его по событию клика на ссылке, переводя скрытый чекбокс в состояние checked. Соответственно, исходя из состояния этого чекбокса показывать/скрывать инфу. Например: input:checked + #More_info { display:block }
Для этого допустим, что на сайте есть такое меню:
ul id="my-menu">
<li><a href="#0">Главная</a></li>
<li><a href="#0">О компании</a>
<ul>
<li><a href="#0">История</a></li>
<li><a href="#0">Настоящее</a></li>
<li><a href="#0">Будущее</a></li>
</ul>
</li>
<li><a href="#0">Контакты</a></li>
<li><a href="#0">Продукция</a>
<ul>
<li><a href="#0">Мясные продукты</a>
<ul>
<li><a href="#0">Колбаса</a></li>
<li><a href="#0">Сосиски и сардельки</a></li>
<li><a href="#0">Деликатесы</a></li>
</ul>
</li>
<li><a href="#0">Алкоголь</a>
<ul>
<li><a href="#0">Вино</a></li>
<li><a href="#0">Водка</a></li>
<li><a href="#0">Пиво</a></li>
</ul>
</li>
</ul>
</li>
</ul>
Некоторые оставляют корневые ссылки ссылками, но мы так делать не будем. У нас корневые ссылки ("О компании", "Продукция", "Мясные продукты", "Алкоголь") не будут вести ни на какую страницу, при клике по ним будет раскрываться подменю.
Итак, первым делом инициализируем библиотеку jquery.js. Желательно подключать ее в секции <head> документа:
<head>
..
<script type="text/javascript" src="jquery.js"></script>
</head>
Теперь мы может писать javascript-скрипты. Делать это будем в отдельном js-файле, который прилинкуем аналогично
jquery.js
. Сразу приведу базовый код:
$(document).ready(function() {
$('ul#my-menu ul').each(function(index) {
$(this).prev().addClass('collapsible').click(function() {
if ($(this).next().css('display') == 'none') {
$(this).next().slideDown(200, function () {
$(this).prev().removeClass('collapsed').addClass('expanded');
});
}else {
$(this).next().slideUp(200, function () {
$(this).prev().removeClass('expanded').addClass('collapsed');
$(this).find('ul').each(function() {
$(this).hide().prev().removeClass('expanded').addClass('collapsed');
});
});
}
return false;
});
});
});
Здесь мы делаем следующие вещи:
когда дерево DOM документа готово, пробегаемся в цикле по всем подменю (ul#my-menu ul); в каждой итерации назначаем класс 'collapsible' ссылке, которая отвечает за данное подменю; этой же ссылке назначаем обработчик события 'click', который в зависимости от состояния подменю будет раскрывать либо скрывать его. onlick возвращает 'false', чтобы не происходил переход по ссылке.
Мне кажется, когда ты скрываешь, например, подменю "Продукция", и потом раскрываешь его — дочерние подменю должны быть закрытыми независимо от того в каком положении они были раньше. Поэтому добавим в callback-функцию метода slideUp еще такую строчку:
$(this).find('ul').each(function() {
$(this).hide().prev().removeClass('expanded').addClass('collapsed');
});
В принципе, меню готово. Однако можно навесить еще пару небольших примочек. Например, реализовать запоминание раскрытости меню при переходе на другие страницы. Сделаем это через cookie. Смысл таков — когда меню раскрывается, в cookie заносится запись вида 'submenuMark-xx=opened', где xx - порядковый номер (индекс) данного подменю в списке всех подменю. Соответственно, когда закрывается - запись стирается из cookie.
Для работы с cookie нам будет удобен плагин jquery.cookie.js. Скачаем его и подключим рядом с jquery. Теперь напишем пару вспомогательных фукнций для работы с cookie:
function cookieSet(index) {
$.cookie('submenuMark-' + index, 'opened', {expires: null, path: '/'});
}
function cookieDel(index) {
$.cookie('submenuMark-' + index, null, {expires: null, path: '/'});
}
При загрузке документа нам нужно посмотреть какие подменю отмечены в куках и открыть их. Поэтому вставим следующий кусок кода в цикл по всем подменюшкам:
$('ul#my-menu ul').each(function(i) {
.....
if ($.cookie('submenuMark-' + i)) {
$(this).show();
$(this).prev().removeClass('collapsed').addClass('expanded');
}else {
$(this).hide();
$(this).prev().removeClass('expanded').addClass('collapsed');
}
.....
});
Как вы могли заметить, у нас теперь есть CSS-классы 'expanded', 'collapsed' и 'collapsible' — таким образом можно немного приукрасить наше меню с помощью CSS.
И самый последний штрих — везде, где в нашем коде открывается либо закрывается подменю, поставить вызов соответствующей куки-функции. Этого я описывать уже не буду — можно посмотреть в готовом скрипте.
http://alt-f4.ru/files/exp_menu.rar
HTML:
<ul id="my-menu">
<li><a href="#0">Главная</a></li>
<li><span>[+]</span><a #0="">О компании</a>
<ul>
<li><a href="#0">История</a></li>
<li><a href="#0">Настоящее</a></li>
<li><a href="#0">Будущее</a></li>
</ul>
</li>
<li><a href="#0">Контакты</a></li>
<li><a href="#0">Продукция</a>
<ul>
<li><span>[+]</span><a #0="">Мясные продукты</a>
<ul>
<li><a href="#0">Колбаса</a></li>
<li><a href="#0">Сосиски и сардельки</a></li>
<li><a href="#0">Деликатесы</a></li>
</ul>
</li>
<li><span>[+]</span><a #0="">Алкоголь</a>
<ul>
<li><a href="#0">Вино</a></li>
<li><a href="#0">Водка</a></li>
<li><a href="#0">Пиво</a></li>
</ul>
</li>
</ul>
</li>
</ul>
CSS:
<style type="text/css">
#my-menu > li ul {display: none;}
#my-menu > li > a {cursor: pointer;}
#my-menu li {padding-left: 0; }
</style>
JS:
jQuery(document).ready(function($) {
$('#my-menu a').click(function(){
var current_element = this;
$(this).next().animate( {'height':'toggle'},
200,
'linear',
function() {
if( $(current_element).next().css('display') == 'block' ) $(current_element).prev().html( "[-]");
else $(current_element).prev().html( "[+]");
} );
return false;
});
});
на мой взгляд так будет чуть попроще, как вариает в коллекцию )