Перейти к содержанию
  • Контекстное меню в IPS Community Suite 4


    Silence

    Контекстное меню в 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;
    }

    Сохранить

    щелкните правой кнопкой мыши

    Ето все .... 



    Обратная связь

    Рекомендуемые комментарии

    В 31.07.2016 г. в 23:39, Виктор Лобанов сказал:

    И хрен знает что где смотреть. нет что бы скрин приложить

     

    В 11.10.2016 г. в 01:36, HooLIGUN сказал:

    Что это вообще такое?

    Что ето контекстное меню - https://ru.wikipedia.org/wiki/Контекстное_меню

    Контекстное меню в IPS Community Suite 4 .... Вы можете изменить линк с вашен:

    12.png

    Поделиться этим комментарием


    Ссылка на комментарий
    Поделиться на другие сайты


    Для публикации сообщений создайте учётную запись или авторизуйтесь

    Вы должны быть пользователем, чтобы оставить комментарий

    Создать учетную запись

    Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

    Регистрация нового пользователя

    Войти

    Уже есть аккаунт? Войти в систему.

    Войти


×