Иконка ресурса

Боковое меню 1.0.0

Нет прав для скачивания
Совместимость с XenForo
  1. 1.0
  2. 1.1
  3. 1.2
  4. 1.3
  5. 1.4
  6. 1.5
С разрешения автора сделал модификацию данного меню.
1. Картинки заменил на одну, теперь на спрайтах.
sprite_ew.png

2. Ну немного изменил расположение кнопок (это не столь важно, каждому на свое усмотрение)
3. Внес изменения в js, в соответствии с моей картинкой, сделал сам файл ew_menu.js, в моем варианте в PAGE_CONTAINER, вносится только
Код:
<script type="text/javascript" src="js/ew_menu.js"></script>
Находим:
Код:
</xen:hook>
</body>
И заменяем:
Код:
<script type="text/javascript" src="js/ew_menu.js"></script>
</xen:hook>
</body>
4. Изменил немного стили CSS, прозрачность увеличил с 0.7 до 0.4 и при наведении курсора проявляется не вся менюшка, а только отдельная кнопка, на которую наведен курсор.
Добавить в EXTRA.css:
Код:
#ew_toolbox{z-index:99;width:32px;position:fixed;left:1px;top:250px;background:transparent;}
.sprite_ew {
    display:block;
    width:32px;
    height:32px;
    background:url(styles/EternalWorld/Menu/sprite_ew.png)!important;
    background-repeat:no-repeat;
    border-radius: 0!important;
    border: 0!important;
    float: left;
}
#to {background-position:0 0!important;opacity: .4;}
#to:hover {opacity:1}
#back {background-position:0 -32px!important;opacity: .4;}
#back:hover {opacity:1}
#up {background-position:0 -64px!important;opacity: .4;}
#up:hover {opacity:1}
#down {background-position:0 -96px!important;opacity: .4;}
#down:hover {opacity:1}
#autodown {background-position:0 -128px!important;opacity: .4;}
#autodown:hover {opacity:1}
#pause {background-position:0 -160px!important;opacity: .4;}
#pause:hover {opacity:1}
#contact {background-position:0 -192px!important;opacity: .4;}
#contact:hover {opacity:1}
#refresh {background-position:0 -224px!important;opacity: .4;}
#refresh:hover {opacity:1}
Еще одно маленькое дополнение (по желанию). Если в CSS заменить строчку:
Код:
#ew_toolbox{z-index:99;width:32px;position:fixed;left:1px;top:250px;background:transparent;}
На:
Код:
#ew_toolbox{z-index:99;width:32px;position:fixed;left:-20px;top:250px;background:transparent;}
#ew_toolbox{
     -webkit-transition: 0.55s;
     -moz-transition: 0.55s;
     transition: 0.55s;
}
#ew_toolbox:hover{left:1px;}
То меню будет скрываться где то на 2/3, а при наведении появляться с небольшим замедлением.
Во воложениях PSD картинки - sprite_ew.zip
  • Мне нравится
Реакции: Славчик
Автор
Skaiman
Скачивания
17
Просмотры
245
Первый выпуск
Обновление
Оценка
0.00 звёзд 0 оценок

Другие ресурсы пользователя Skaiman

Поделиться ресурсом

Назад
Сверху Снизу