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

Последнее обновление:

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

Ранее мы уже описывали технологию создания пункта выпадающего меню, однако, она содержала недостатки. В частности, обработчики событий 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? Вот то же самое меню:

Нажмите, чтобы распахнуть меню
Пункт 1
Пункт 2
Пункт 3

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

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

Комментарии:
Всего комментариев:0
Пожалуйста, не забудьте ознакомиться с правилами оставления комментариев.



Подписаться на комментарии на этой странице

Мы можем выполнить

Другие услуги
Интересная и полезная
информация