1
Онлайн всего: 1
Гостей: 1
Пользователей: 0
1
Для добавления необходима авторизация
Ваша корзина
Ваша корзина пуста
Зона обмена Вертикальное цветное меню с иконками и мини профилем

Архив
Объём архива 3.4 Kb
Количество скачиваний 12

Скачать архив
закрыть
Скачивание файлов без ограничений доступно только зарегистрированным пользователям. ВХОДРЕГИСТРАЦИЯ
waak
написать автору
пожаловаться
ID материала № 32
Авторwaak
CMSuCoz
Просмотров 350
Добавлено 10.01.2018
Комментариев 8

Вертикальное цветное меню с иконками и мини профилем

Здравствуйте! сегодня зашёл на сайт одноклассники и увидел там новое меню и решил быстренько его сверстать для своих пользователей
меню очень симпатичное в нём присутствует мини профиль и 17 пунктов под каждый подобрана своя иконка и цвет фона
вам останется только указать ссылки на нужные страницы ну и при необходимости сменить иконки на свой так же можно удалить не нужные пункты или добавить новые

По умолчанию меню свёрнуто и показывает всего 7 пунктов плюс пункт Ещё после клика на этот пункт то откроются ещё 10 и в место пункта Ещё откроется пункт Закрыть

Вид по умолчанию



Вид скрытой части меню

Установка

В любой блок или в нужное место вставим код меню
Код

<div class="meu_waak_siti">  
  <ul>  
<?if($USER_LOGGED_IN$)?>
  <li><a href="/index/8-$USER_ID$"><span><?if($USER_AVATAR_URL$)?><img src="$USER_AVATAR_URL$"><?else?><i></i><?endif?></span> $USERNAME$</a></li>  
  <?else?>

  <li><a href="$LOGIN_LINK$"><span><i></i> </span> Вход</a></li>
   
  <?endif?>  

  <li><a href=""><span><i class="m1"></i></span> Лента</a></li>  
  <li><a href=""><span><i class="m2"></i></span> Рекомендации</a></li>  
  <li><a href=""><span><i class="m3"></i></span> Друзья</a></li>  
  <li><a href=""><span><i class="m4"></i></span> Фото</a></li>  
  <li><a href=""><span><i class="m5"></i></span> Группы</a></li>  
  <li><a href=""><span><i class="m6"></i></span> Игры</a></li>  
  </ul>  
</div>  
<div class="meu_waak_siti meu_waak_siti2">  
  <ul>  
  <li><a href=""><span><i class="m7"></i></span> Подарки</a></li>  
  <li><a href=""><span><i class="m8"></i></span> Платежи и подписки</a></li>  
  <li><a href=""><span><i class="m9"></i></span> Заметки</a></li>  
  <li><a href=""><span><i class="m10"></i></span> Форум</a></li>  
  <li><a href=""><span><i class="m11"></i></span> Праздники</a></li>  
  <li><a href=""><span><i class="m12"></i></span> Закладки</a></li>  
  <li><a href=""><span><i class="m13"></i></span> О себе</a></li>  
  <li><a href=""><span><i class="m14"></i></span> Аукционы</a></li>  
  <li><a href=""><span><i class="m15"></i></span> Достижения</a></li>  
  <li><a href=""><span><i class="m16"></i></span> Услуги и скидки</a></li>  
  <li>  
  <a href="javascript://" onclick="$('.meu_waak_siti2').slideToggle('slow');$('.meu_waak_siti3').slideToggle('slow');"><span><i class="m18"></i></span> Закрыть</a>  
  </li>  
  </ul>  
</div>  

<div class="meu_waak_siti meu_waak_siti3">  
  <ul>  
  <li>  
  <a href="javascript://" onclick="$('.meu_waak_siti2').slideToggle('slow');$('.meu_waak_siti3').slideToggle('slow');"><span><i class="m17"></i></span> Ещё</a>  
  </li>  
  </ul>  
</div>


В таблицу стилей в самый конец
Код

.meu_waak_siti ul {list-style: none;}  

.meu_waak_siti ul li a {  
  padding: 4px 5px;  
  font-size: 14px;  
  line-height: 30px;  
  display: block;  
}  

.meu_waak_siti ul li a:hover {background: #F6F6F6;}  

.meu_waak_siti ul li a span {  
  display: block;  
  width: 28px;  
  height: 28px;  
  background-color: #ADADAD;  
  border-radius: 50%;  
  margin-right: 10px;  
  float: left;  
  overflow: hidden;  
}  
.meu_waak_siti ul li a i {  
  background-image: url(img/micon.png);  
  background-position: 0 -28px;  
  background-size: 28px 560px;  
  width: 28px;  
  height: 28px;  
  display: block;  
}  

.m1 {background-position: 0 -84px!important;background-color: #86cbf6;}  
.m2 {background-position: 0 -112px!important;background-color: #ff6f81;}  
.m3 {background-position: 0 -140px!important;background-color: #f7cd40;}  
.m4 {background-position: 0 -168px!important;background-color: #ffb55a;}  
.m5 {background-position: 0 -196px!important;background-color: #aed488;}  
.m6 {background-position: 0 -224px!important;background-color: #ff8869;}  
.m7 {background-position: 0 -252px!important;background-color: #78cbc4;}  
.m8 {background-position: 0 0!important;background-color: #bb69c4;}  
.m9 {background-position: 0 -308px!important;background-color: #9ba9d7;}  
.m10 {background-position: 0 -336px!important;background-color: #f66091;}  
.m11{background-position: 0 -364px!important;background-color: #beaaa5;}  
.m12 {background-position: 0 -392px!important;background-color: #82d795;}  
.m13 {background-position: 0 -420px!important;background-color: #7d9af7;}  
.m14 {background-position: 0 -448px!important;background-color: #a488bc;}  
.m15 {background-position: 0 -476px!important;background-color: #c76b54;}  
.m16 {background-position: 0 -504px!important;background-color: #697dc4;}  
.m17 {background-position: 0 -532px!important;background-color: #ddd;}  
.m18 {background-position: 0 -532px!important;background-color: #ddd;transform: rotate(180deg);}  

.meu_waak_siti2 {display: none;}


Теперь скачаем архив и загрузим картинку из него в папку img в свой файловый менеджер
8 6
Вимание:
При копирование материалов. указание автора материала и наличие в теле копируемого (перерабатываемого) материала активной ссылки на сайт talantlev.ucoz.ru обязательно!
Уважайте чужой труд!
milan_shubin
31.01.2018 в 22:16
Привет, можно сделать как бы сказать, ну горизонтальный?))
0
waak
31.01.2018 в 22:24
Можно всё нужно только желание!
milan_shubin
31.01.2018 в 22:25
Можешь дать подсказку как сделать?)))
waak
31.01.2018 в 22:28
Что подсказать? просто стили переписать ну и структуру тоже так как пунктов много и они не влезут
milan_shubin
31.01.2018 в 22:30
эх, спс за ответь!
waak
31.01.2018 в 22:36
Пойми если бы это заняло 10 мин я бы помог а так у меня нет сейчас времени
waak
31.01.2018 в 22:41
ну ты бы сказал что поставил меню на сайт! там у тебя мало пунктов так что тебе просто нужно добавить вот эту строчку в таблицу стилей

Код

.meu_waak_siti ul li {
  float: left;
}
milan_shubin
31.01.2018 в 22:44
Спасибо, помогло )
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Гость
Для добавления необходима авторизация