Главная / Каталог скриптов для uCoz / Разное, Бесплатно, Меню

Светлое вертикальное меню

Добавлено 18-02-2022 в 10:56

Категория Разное, Бесплатно, Меню
Авторwaak
Просмотры404
Комментарии1
Понравилось6

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

Установка меню

Копируем код ниже и ставим его в то место где будет располагаться данное меню обычно это первый или второй контейнер

Код

<div class="levmenu">
 <ul>
 <li>
 <a href="/load">Шаблоны</a>
 </li>
 <li>
 <a href="">Скрипты</a>
 </li>
 <li>
 <a href="">PSD макеты</a>
 </li>
 <li>
 <a href="">Каталог сайтов</a>
 </li>
 <li>
 <a href="">Новости</a>
 </li>
 <li>
 <a href="">Программы</a>
 </li>
 <li>
 <a href="">Помощь с сайтом</a>
 </li>

 </ul>
 
 <ul>
 <li>
 <a href="">Музыка</a>
 </li>
 <li>
 <a href="">Портфолио</a>
 </li>
 </ul>

 

 <ul>
 <li>
 <a href="/">Склонения</a>
 </li>
 <li>
 <a href="/">Градиент</a>
 </li>
 <li>
 <a href="/"> Окна ajax ucoz</a>
 </li>
 </ul>
 </div>

Отлично не забываем сохранить!

css таблица стилей

Копируем код ниже и добавляем его в самый низ своей таблице стилей

Код

.levmenu ul {
  padding: 20px 20px;
}
.levmenu ul li {
  display: block;
  border-radius: 10px;
}
.levmenu ul li a {
  display: block;
  color: #343c5e;
  font-size: 13px;
  line-height: 40px;
  padding: 0 20px;
  text-decoration: none;
}

.levmenu ul li a i {
  color: #343c5e;
  margin-right: 15px;

}
.color0 {color: #ff4754!important;}
.color1 {color: #FBB99C!important;}
.color2 {color: #2E96DE!important;}
.color3 {color: #ACC4FB!important;}
.color4 {color: #EDA8C1!important;}
.color5 {color: #FBB99C!important;}
.color6 {color: #9AFBA5!important;}
.color7 {color: #FBB89A!important;}
.color8 {color: #434343!important;}
.color9{ color: #d2d2d2!important;}

.levmenu ul li:hover {
  background: #FFF;
  box-shadow: 0 1px 5px #00000014;
}

.levmenu ul li:hover a i {
  font-size: 18px;
}

.levmenunam {
  margin: 0 35px;
  border-bottom: 1px solid #e0e0e0;
  display: block;
}

Отлично, не забываем сохранить!

Теперь для тех у кого не подключены шрифтовые иконки font-awesome нужно добавить в самый верх первой строчкой в таблицу стилей вот такую строчку

Код

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css);

для тех у кого они уже подключены повторно этого делать не нужно.
Отлично. Не забываем сохранить и почистить кеш у браузера что бы обновились стили.

Оставить комментарий

Добавлять комментарии могут только зарегистрированные пользователи.

Регистрация Вход

Создать сайт
Бесплатно

Меню

Полезно

Комментарии

pa patali2k

Спасибо большое!

06-06-2025 в 05:58 материал

waak

на все страницы вывести можно скриптом через запрос на персональную страницу пользователя а на странице со списком закладок я вывел так

Код

У вас $NUM_ENTRIES$ заклад<?if($NUM_ENTRIES$%10=0||$NUM_ENTRIES$%10>4||$NUM_ENTRIES$%100>10&&$NUM_ENTRIES$%100<15)?>ок<?else?><?if($NUM_ENTRIES$%10=1)?>ка<?else?>ки<?endif?><?endif?>

05-06-2025 в 22:07 материал

pa patali2k

Добрый день! Waak подскажи как вы сделали У вас N закладок, у меня выходит 1-5 например, так если можете подскажите как вывести кол.во закладок пользователя например в мини профиль, чтоб кол.во закладок показывало на любой странице

04-06-2025 в 16:51 материал

pa patali2k

Добрый день!
Сегодня снова попробовал установить скрипт и он снова не заработал, все перерыл, изменял, убирал и никак не заводился.
Решение: В общих настройках сайта нужно переключить Версия библиотеки jQuery: на jquery-1.12.4.min.js
В общем теперь просьба, не могли бы переписать скрипт закладок под jquery-3.6.0.min.js