Контекстное меню в 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;
}Сохранить
щелкните правой кнопкой мыши
Ето все ....
Recommended Comments
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.