27 июн 2015
Контекстное меню для сайта на JavaScript
Ares Категория: Web-Мастеру » Уроки
У нас вы можете скачать бесплатно Контекстное меню для сайта на JavaScript .

Данный материал предоставлен сайтом Skripter.info исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.
Контекстное меню для сайта на JavaScript


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



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

Шаг 1. HTML

У нас будет список, который будет содержать по очередности подключенные пункты class=»menu» будет содержать в себе всю навигацию, class=»menu-item» нам необходим для отображения блока с навигационными пунктами:

<menu class="menu">
<li class="menu-item">
<button type="button" class="menu-btn">
<i class="fa fa-folder-open"></i>
<span class="menu-text">Открыть</span>
</button>
</li>
<li class="menu-item disabled">
<button type="button" class="menu-btn">
<span class="menu-text">Открыть в новой вкладке</span>
</button>
</li>
<li class="menu-separator"></li>
<li class="menu-item">
<button type="button" class="menu-btn">
<i class="fa fa-reply"></i>
<span class="menu-text">Обновить</span>
</button>
</li>
...
<li class="menu-separator"></li>
<li class="menu-item">
<button type="button" class="menu-btn">
<i class="fa fa-download"></i>
<span class="menu-text">Сохранить</span>
</button>
</li>
<li class="menu-item">
<button type="button" class="menu-btn">
<i class="fa fa-edit"></i>
<span class="menu-text">Изменить</span>
</button>
</li>
<li class="menu-item">
<button type="button" class="menu-btn">
<i class="fa fa-trash"></i>
<span class="menu-text">Удалить</span>
</button>
</li>
</menu>


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

Шаг 2. CSS

Теперь разберемся со стилям, их у нас не так уж и много, так как основную работу будет выполнять JS, кроме этого нам необходимо установить общие параметры:

.container {
left: 0;
margin: auto;
position: absolute;
top: 20%;
width: 100%;
text-align: center;
}
.menu {
position: absolute;
width: 200px;
padding: 2px;
margin: 0;
border: 1px solid #bbb;
background: #eee;
background: -webkit-linear-gradient(to bottom, #fff 0%, #e5e5e5 100px, #e5e5e5 100%);
background: linear-gradient(to bottom, #fff 0%, #e5e5e5 100px, #e5e5e5 100%);
z-index: 100;
border-radius: 3px;
box-shadow: 1px 1px 4px rgba(0,0,0,.2);
opacity: 0;
-webkit-transform: translate(0, 15px) scale(.95);
transform: translate(0, 15px) scale(.95);
transition: transform 0.1s ease-out, opacity 0.1s ease-out;
pointer-events: none;
}
.menu-item {
display: block;
position: relative;
margin: 0;
padding: 0;
white-space: nowrap;
}
.menu-btn {
background: none;
line-height: normal;
overflow: visible;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
display: block;
width: 100%;
color: #444;
font-family: 'Roboto', sans-serif;
font-size: 13px;
text-align: left;
cursor: pointer;
border: 1px solid transparent;
white-space: nowrap;
padding: 6px 8px;
border-radius: 3px;
}
.menu-btn::-moz-focus-inner,
.menu-btn::-moz-focus-inner {
border: 0;
padding: 0;
}
.menu-text {
margin-left: 25px;
}
.menu-btn .fa {
position: absolute;
left: 8px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.menu-item:hover > .menu-btn {
color: #fff;
outline: none;
background-color: #2E3940;
background: -webkit-linear-gradient(to bottom, #5D6D79, #2E3940);
background: linear-gradient(to bottom, #5D6D79, #2E3940);
border: 1px solid #2E3940;
}
.menu-item.disabled {
opacity: .5;
pointer-events: none;
}
.menu-item.disabled .menu-btn {
cursor: default;
}
.menu-separator {
display:block;
margin: 7px 5px;
height:1px;
border-bottom: 1px solid #fff;
background-color: #aaa;
}
.menu-item.submenu::after {
content: "";
position: absolute;
right: 6px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
border: 5px solid transparent;
border-left-color: #808080;
}
.menu-item.submenu:hover::after {
border-left-color: #fff;
}
.menu .menu {
top: 4px;
left: 99%;
}
.show-menu,
.menu-item:hover > .menu {
opacity: 1;
-webkit-transform: translate(0, 0) scale(1);
transform: translate(0, 0) scale(1);
pointer-events: auto;
}
.menu-item:hover > .menu {
-webkit-transition-delay: 100ms;
transition-delay: 300ms;
}


Шаг 3. JS

Нам необходимо перехватывать команду при нажатии на правую кнопку мыши, и отображать свое содержание, кроме этого нам необходимо добавить дополнительные параметры отображения:

var menu = document.querySelector('.menu');
function showMenu(x, y){
menu.style.left = x + 'px';
menu.style.top = y + 'px';
menu.classList.add('show-menu');
}
function hideMenu(){
menu.classList.remove('show-menu');
}
function onContextMenu(e){
e.preventDefault();
showMenu(e.pageX, e.pageY);
document.addEventListener('mousedown', onmousedown, false);
}
function onmousedown(e){
hideMenu();
document.removeEventListener('mousedown', onmousedown);
}
document.addEventListener('contextmenu', onContextMenu, false);


В результате таких несложных действий мы получаем достойную замену стандартному контекстному меню. Который может отображать дополнительные материалы.

Вот и все. Готово!

Скачивание файлов доступно только зарегистрированным пользователям










Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.