Контекстное меню в IPS Community Suite 4
Перейти ACP - Customization -> Theme - ваш скинь -> Edit HTML and CSS -> Template -> globalTemplate и найти:
</body> </html>
перед ним поместить ето код:
<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-item"> <button type="button" class="menu-btn"> <i class="fa fa-star"></i> <span class="menu-text">Любимый</span> </button> </li> <li class="menu-item submenu"> <button type="button" class="menu-btn"> <i class="fa fa-users"></i> <span class="menu-text">Социальное</span> </button> <menu class="menu"> <li class="menu-item"> <button type="button" class="menu-btn"> <i class="fa fa-comment"></i> <span class="menu-text">Комментарий</span> </button> </li> <li class="menu-item submenu"> <button type="button" class="menu-btn"> <i class="fa fa-share"></i> <span class="menu-text">Поделиться</span> </button> <menu class="menu"> <li class="menu-item"> <button type="button" class="menu-btn"> <i class="fa fa-twitter"></i> <span class="menu-text">Twitter</span> </button> </li> <li class="menu-item"> <button type="button" class="menu-btn"> <i class="fa fa-facebook-official"></i> <span class="menu-text">VK</span> </button> </li> <li class="menu-item"> <button type="button" class="menu-btn"> <i class="fa fa-google-plus"></i> <span class="menu-text">Google Plus</span> </button> </li> <li class="menu-item"> <button type="button" class="menu-btn"> <i class="fa fa-envelope"></i> <span class="menu-text">Email</span> </button> </li> </menu> </li> </menu> </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> <script> 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); </script>
Сохранить
Перейти ACP - Customization -> Theme - ваш скинь -> Edit HTML and CSS -> CSS -> custom.css
и добавить в нижней части этого кода:
/* Menu */
.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 {
display: block;
color: #444;
font-family: 'Roboto', sans-serif;
font-size: 13px;
cursor: pointer;
border: 1px solid transparent;
white-space: nowrap;
padding: 6px 8px;
border-radius: 3px;
}
button.menu-btn {
background: none;
line-height: normal;
overflow: visible;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
width: 100%;
text-align: left;
}
a.menu-btn {
outline: 0 none;
text-decoration: none;
}
.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: 300ms;
transition-delay: 300ms;
}
Сохранить
щелкните правой кнопкой мыши
Ето все ....
Рекомендуемые комментарии
Присоединяйтесь к обсуждению
Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.
Примечание: Ваш пост будет проверен модератором, прежде чем станет видимым.