Научный консалтинг
Главная
Контакты
Номер телефона
Как мы работаем
Гарантии
Условия
Цены

Универсальный пункт выпадающего меню (улучшенный вариант)

Ранее мы уже описывали технологию создания пункта выпадающего меню, однако, она содержала недостатки. В частности, обработчики событий javascript содержались непосредственно в тегах разметки html, что усложняло доработку, расширение кода. Кроме того, как уже отмечалось, не меню раобтало не всегда корректно. В частности, оно не раскрывалось вновь после повторного клика, если мышь не была отведена от него. В этой статье эти недостатки устранены.

Задача, как и прежде, состоит в следующем:

  1. Меню должно распахиваться даже в случае, если в браузере отключен javscript (т.е. оно должно функционировать, по максимуму, на чистом CSS.
  2. Помимо того, использование возможностей javascript должно добавлять ему дополнительные функции, в частности, повторное открытие или закрытие меню при очередном клике на его пункте.
  3. Наконец, меню должно закрываться при клике мышью на любой области html-страницы, за исключением, естественно, области, занимаемой им самим (пока оно не закрыто, естественно).

Вот этим мы и займемся.

HTML-код универсального распахивающегося меню

Приведем вначале html-код:
<!--   Раскрывающееся меню  -->
   <div id="menu_but" class="ugolkrug_p" style="float: left;  border: none; margin-right: 20px; position: relative">
     <div class="menu_button" style=" text-align: center; position: relative; height: 50px; display:table; font-size: 14px">
     <div style='display: block; text-align: right;  position: absolute; right: 5px; top: 5px; padding: 0; height: 100%; width: 100%; font-size: 30px; color: black'></div>
     <div class=""  style=" display: table-cell; height: 50px; width: 130px; vertical-align: middle; letter-spacing: 2px; "  title="Развернуть меню"  >Нажмите, чтобы распахнуть меню</div>      </div>
     <div style="padding: 4px 4px 0 4px; display: none; position: absolute; bottom: -7px; left: -7px; z-index: 1000" id="comm1" class="dline_p ">
     <div class="menu">
       <div class="item_menu">Пункт 1</div>
       <div class="item_menu">Пункт 2</div>
       <div class="item_menu">Пункт 3</div>
     </div>
     </div>
   </div>

CSS:

.menu_box{
	padding: 4px 4px 0 4px;
	display: none;
	position: relative;
	bottom: 0;
	left: -5px;
	z-index: 1000;
}

.menu_button {
	background-color: antiquewhite;
	padding: 4px;
	position: relative;
	border: blueviolet;
	margin-right: 10px;
	border: solid; text-align: center;height: 80px;
	display:table; font-size: 14px

}

.item_menu {
	border: solid green;
	margin: 2px;
	padding: 5px;
	height: auto; width: 200px;
	display: block;
}

#menu_but {
	float: left;
	border: none;
	margin-right: 20px;
	position: relative;

}
#menu_but .menu_button > div[title] {
	display: table-cell; height: 50px; width: 130px;
	vertical-align: middle; letter-spacing: 2px;
}
#menu_but:hover .menu_box{display: block;}

#menu_but_ {
	float: left;
	border: none;
	margin-right: 20px;
	position: relative;}
#menu_but_ .menu_button > div[title] {
	border: none;
	position: relative;
	display: table-cell; height: 50px; width: 130px;
	vertical-align: middle; letter-spacing: 2px;
}
#menu_but_:hover .menu_box{display: block;}
#menu_but_:hover .menu_box{display: block;}
			

Код javascript

<!-- javascript : Кроссбраузерная переменная - функция остановки распространения события -->

<script type="text/javascript">

var eventutil = {
    stopPropagation: function(event) {
        if (event.stopPropagation) {
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
    }

</script >

<!-- javascript : открыть/закрыть меню со ссылками -->
<script type="text/javascript">
  /* <!-- [CDATA [*/
   //  Показываем или скрываем меню при клике на кнопке "Нажмите. чтобы распахнуть меню"
   
document.getElementById('menu_but').firstElementChild. onclick = function(event) {
       openMenu('comm1');
       eventutil.stopPropagation(event);
   };

   //  показываем меню при наведении мыши
   
document.getElementById('menu_but').firstElementChild. firstElementChild. onmouseover = function(event) {
       eventutil.stopPropagation(event);
       document.getElementById('comm1').style.display = "block";
       del_label();
   };

   //  Останавливаем распространение события onclick при клике мышью на пунктах меню (чтобы меню не исчезало)
   
document.getElementById('menu_but').onclick = function(event) {eventutil.stopPropagation(event);};
   //  Закрываем меню при клике где-нибудь на странице
   
document.body.onclick = function () {document.getElementById('comm1').style.display = "none";
       show_label();
   };



   function openMenu(id1)
   {if (document.getElementById(id1).style.display == "block")
   {document.getElementById(id1).style.display = "none";
       show_label();
   }
   else{document.getElementById(id1).style.display = "block";
       del_label();
   }}

   function del_label() {document.getElementById('menu_but').firstElementChild. firstElementChild. innerHTML = '&times;';
       document.getElementById('menu_but').firstElementChild.firstElementChild. nextElementSibling.innerHTML = '<span style="font-size: 16px">Свернуть</span>';
   }

   function show_label() {document.getElementById('menu_but').firstElementChild. firstElementChild. innerHTML = '';
       document.getElementById('menu_but').firstElementChild. firstElementChild. nextElementSibling.innerHTML = '<span >Кстати, мы можем выполнить...</span>';
   }
  /*]] --> */
</script>

Особенности работы меню с javascript

Теперь рассмотрим, как все работает. При нажатии на надпись "Нажмите, чтобы распахнуть меню" внизу появится меню (из трех пунктов, для примера). Если javascript отключен в браузере, то будет функционировать только CSS. Поэтому при отведении мыши меню закроется; клики мыши на слове "Свернуть" работать не будут.

Тогда как с javascript фунциональность меню несколько увеличивается. При отводе мыши меню само по себе не сворачивается, что может быть более удобным при его просмотре. Кроме того, на тачпадах и иных гаджетах, где нет события наведения мыши, указанный режим работы в чистом CSS функционировать не будет.

Закрыть меню, при фукнционирующем javascript, возможно двумя путями: либо кликнуть на надписи "Свернуть", либо отвести мышь куда-нибудь за пределы меню и сделать клик (т.е., по сути, сделать клик на bode, за исключением области, занимаемой меню). При этом меню закроется. а надпись на нем сменится на "Нажмите, чтобы распахнуть меню".

При повторном клике на этой надписи меню вновь раскроется, и т.д.

Конечно, такое меню - очень простое, так как сделано на скорую руку, лишь в качестве примера. Его, естественно, надо бы оформить, чтобы было красиво.

Кстати, легко переделать его, чтобы из вертикального получить - горизонтальное. Для этого всего-то и надо заменить

.item_menu {
...
display: block;}


на

.item_menu {
...
display: inline-block;}

Кстати, если надо, чтобы меню НАКЛАДЫВАЛОСЬ ПОВЕРХ текста, а не раздвигало его в стороны, надо заменить стили

.menu_box{
... position: relative; bottom: -7px;}


на

.menu_box{
... position: absolute; top: 83px;}


При этом раскрывающаяся часть меню будет вырванной из основного потока и потому будет накладываться на текст. Регулируя прозрачность фона как самого меню, так и отдельных его пунктов, а также высоту, размер шрифта, цвет и т.д., можно достичь требуемого дизайна.

Работа меню на чистом CSS

А что будет, если в браузере отключен javascript? Вот то же самое меню:

За основу взят тот же самый код html и CSS, только изменены идентификаторы (id), чтобы они не были доступны в javscript. Изменение свелось к тому, что вместо id="menu_but" теперь фигурирует id="menu_but_", а вместо id="comm1" - соответственно, id="comm1_" (соответственно, в стилях также следует сделать указанные изменения). Остальное все, в том числе и стили, осталось неизменным.

Как видно, все работает: дополнительные стили, вызывающие распахивание меню при наведении мыши, прописанные для чистого CSS, срабатывают. не мешая, однако, работе javascript (в случае, если он функционирует). Единственный нюанс: вместо "Нажмите..." следовало бы написать "Наведите мышь...". И, конечно, на устройствах, где нет события наведения мыши, меню на чистом CSS (без javascript) не откроется. Т.е. там без javascript в данном случае не обойтись.

Вот что мы можем сделать для Вас:
Интересная и полезная
информация
Изменить размер шрифта:
?