» »

Новое меню для сайта "Bundy" на CSS3

Новое меню для сайта "Bundy" на CSS3

Новое меню для пользователей uCoz. Данное меню очень простое и изменить код под себя очень легко. Я оставил комментарии в CSS коде. И так - это вертикальное меню с небольшим эффектом сдвига. При нацеливании текст не много сдвинется в право, а так-же фон у текста сменится на #fff, то есть белый цвет. В меню есть иконки темно-мандаринового цвета, это мой любимый цвет и его легко сменить на свой. Для этого есть ID #iswetter в нем цветовой код меняйте на свой.

Приступим к меню, я собрал все в одном коде и если хотите то можете из тегов < style >< / style > все засунуть в _st/my.css или где у вас хранятся стили.
Вот код:
Код

<ul>
<li id="liswetter" class="liswetter"> <a href="#"><i id="iswetter" class="fa fa-comment-o" aria-hidden="true"></i> Отзывы</li>
<li id="liswetter" class="liswetter"> <a href="#"><i id="iswetter" class="fa fa-file-archive-o" aria-hidden="true"></i> Материалы</li>
<li id="liswetter" class="liswetter"> <a href="#"><i id="iswetter" class="fa fa-users" aria-hidden="true"></i> Форум</li>
<li id="liswetter" class="liswetter"> <a href="#"><i id="iswetter" class="fa fa-exclamation-triangle" aria-hidden="true"></i> Swetter my1 ru</li>
<li id="liswetter" class="liswetter"> <a href="#"><i id="iswetter" class="fa fa-shopping-cart" aria-hidden="true"></i> Наши товары</li>
</ul>
<style>
/* Автор меню Bundy Александр Гусаров */
#liswetter {
list-style-type: none; /* Убираем маркеры, я не рекомендую убирать это */
margin:0px;
padding:0px;
margin-bottom:5px !important;padding-top:1px;}
#iswetter {color:#ffa812 ;} /* Это цвет иконов <i> */
.liswetter:hover {background:#FFF;border-radius: 2px;} /* Это эффект цвета при нацеливании на текст */
.liswetter a {color: black;padding:2px 2px;display:block;} /* Цвет текста и его настройка */
.liswetter a:hover {color: black;padding:2px 3px;display:block;} /* Цвет текста и его настройка при нацеливании не большой эффект увеличения */
</style>


Автор: Александр Г.
11.03.2018 Просмотров: 507 Комментарий: (11)

Поделиться в социальных сетях

Материал разместил

Комментарий: 11
bundy
bundy 11.03.2018 14:411
0
Забыл указать, для нормальной работы нужны шрифтовые иконки. Для их подключения пропишите в <head> это - <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
Kosten
Kosten 11.03.2018 18:012
0
Также под кнопки, этот стиль вверх сайта в самый потолок прописать можно, или загрузить папки и вывести в CSS.

Как загрузить, ЗДЕСЬ все описано.
-SAM-
-SAM- 12.03.2018 05:593
+1
bundy
bundy 12.03.2018 13:454
-2
Что????? Я сам делал код, 15 - 25 минут чистой работы. И вы еще что-то говорите о переделках и рипах? Я не переделываю и тем более уже не рипаю ни чего! Запомните, я делаю материалы сам. Если бы я рипал я бы 100% указал что это рип или переделка. Думаю вы зря сидите на посте VIP-персоны. Прошу предъявить док-ва чтого что это переделка или рип, хочу посмотреть на код и вид. Уж очень интересно, в чем меня обвиняете. Бесполезно вам объяснять. Советую уже не лезть ко мне, если нету доказательств что я рипал или тем более переделал или украл.
-SAM-
-SAM- 14.03.2018 11:116
0
Вот материал-первоисточник (до этого я ссылку не ту дал и не подчеркнул, что слово вот идёт, так как всего не припомнишь, а там код был убран с материала по причине наглого рипа и плагиата - он вообще тогда не рипал, а взял опубликованное пользователем dagada3211978). Так что, я выдал заслуженно минус в репу тебе, человек (только попробуй ответно минус выдать... это с учётом того, что он мне первый дал минус за мои слова, мол я клевету пишу... я ему не давал минус, чтобы негатив в свой адрес не словить - просто минусы идут ему от меня на ранее созданные учётные записи его, а теперь выдаю заслуженно и на эту учётку).

bundy
bundy 17.03.2018 13:348
-1
С чего первоисточник? Не охренел ли? Я сам писал. Может я буду снимать экран как пишу видео, а только потом кидать на ЗР и видео в комплекте?
Kosten
Kosten 17.03.2018 23:149
0
Но вы как автор обозначены в материале.
bundy
bundy 18.03.2018 13:1310
-1
Ну это я вижу, но дело в том что он говорит что автор не я. И материал переделан с источника. Я тот материал впервые вижу, после того как он дал ссылку. И вообще я делал не много похожим на ВК. (ЗНАЮ ЧТО НЕ ПОЛУЧИЛОСЬ ОСОБО.)
-SAM-
-SAM- 18.03.2018 14:0011
0
И о чём вообще речь, когда человек в ПЕРМАНЕНТНОМ бане находиться (и никто не давал амнистии).
bundy
bundy 12.03.2018 13:495
0
И еще Bundy это псевдоним, я под этим ником играю. Этой мой ник! А сайт создал с доменом Bundy для того чтобы занять, я на нем тестирую шаблоны. Так-же Swetter это не псевдоним, но на нем я тестирую коды которые пишу.
Я их не рекламирую и не распространяю. И давайте уже заканчивайте лезть ко мне, надоело уже. Обвинять в краже и рипах, да без доказательств тупо. А насчет кода и чем он забит, может он и забит, но вы же умные веб-программисты, а я только учусь. Почему бы вам "УМАМ" просто не поправить код? Не думаю что сложно, код маленький, но в полне понятный.
-SAM-
-SAM- 14.03.2018 15:037
+2
Ответ выше почему не поправить, ибо уже есть материал. Но я всё равно поправлю и здесь, чтобы хлам не ставили.

avatar