Перейти к содержанию
  • Контекстное меню в 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

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



    Присоединяйтесь к обсуждению

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

    Гость
    Добавить комментарий...

    ×   Вставлено с форматированием.   Вставить как обычный текст

      Разрешено использовать не более 75 эмодзи.

    ×   Ваша ссылка была автоматически встроена.   Отображать как обычную ссылку

    ×   Ваш предыдущий контент был восстановлен.   Очистить редактор

    ×   Вы не можете вставлять изображения напрямую. Загружайте или вставляйте изображения по ссылке.


×
×
  • Создать...