Перейти к содержимому


Яркие Иконки Меню

яркие иконки техника

  • Авторизуйтесь для ответа в теме
Сообщений в теме: 24

#21 Dars

Dars

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 1 410 сообщений

Отправлено 09 Ноябрь 2014 - 12:54

Просмотр сообщенияUltraMag (09 Ноябрь 2014 - 11:53) писал:

На сайте samara-light.ru этот вариант представлен.
Можно так же отцентрировать иконку и само меню?
И цвет иконки при наведении.
На данном сайте при наведении не меняется фон. Только цвет надписи. Иконка задана фоном, следовательно, она меняется так же, как и остальной фон блока. В вашем случае - немного затемняется.
Выравнивание достигается путем изменения параметров в диапазоне от 16 до -675 (точно так же, как и на сайте, приведенном вами).

#22 Ирина345

Ирина345

    Активный участник

  • Модераторы
  • 5 709 сообщений

Отправлено 09 Ноябрь 2014 - 13:11

Просмотр сообщенияUltraMag (09 Ноябрь 2014 - 11:53) писал:

На сайте samara-light.ru этот вариант представлен.
Можно так же отцентрировать иконку и само меню?
И цвет иконки при наведении.
здравствуйте, для того что бы отцентрировать меню найдите в style.css
.img_link_wrapper {
float: left;

}
замените на


.img_link_wrapper {
float: left;

margin-right: 61px;
}


далее найдите
#search input[type="submit"], .nav-container .menu_block_dropdown .et_categ_box a:hover, .et_categ_box a:hover {background-color:rgba(0,0,0,0.2);text-shadow:0 0 30px #FFF;color: white;border-top: 1px solid #C9C9C9;}
замените на

#search input[type="submit"], .nav-container .menu_block_dropdown .et_categ_box a:hover, .et_categ_box a:hover {background-color:rgba(0,0,0,0.2);text-shadow:0 0 30px #FFF;color: white;border-top: 1px solid #C9C9C9;opacity: 1;}
далее найдите

.et_categ_box a, .et_categ_box a:hover, #scroll-box a, #scroll-box a:hover{background:url(http://design.ultramag-samara.ru/icons-uni-white.png?6119) left no-repeat;display: inline-block;line-height: 1.3em;position: relative;color:#F2DBDB;border-top: 1px solid rgba(48, 26, 26, 0.71);padding: 0 18px;margin: 0;text-decoration:none;font-size:12px;font-family: 'Cuprum', Verdana, Geneva, sans-serif;text-transform:uppercase;line-height: 49px;}
замените на

.et_categ_box a, .et_categ_box a:hover, #scroll-box a, #scroll-box a:hover{background:url(http://design.ultramag-samara.ru/icons-uni-white.png?6119) left no-repeat;display: inline-block;line-height: 1.3em;position: relative;color:#F2DBDB;border-top: 1px solid rgba(48, 26, 26, 0.71);padding: 0 18px;margin: 0;text-decoration:none;font-size:12px;font-family: 'Cuprum', Verdana, Geneva, sans-serif;text-transform:uppercase;line-height: 49px;opacity: 0.8;}


#23 admin

admin

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 504 сообщений
  • ГородСамара

Отправлено 09 Ноябрь 2014 - 13:45

При нажатии на кнопку нужно что бы с левой стороны был такой же отступ как с правой. Т.е. иконка и название меню были в центре кнопки.

Прикрепленные изображения

  • фото 7х1000.jpg


#24 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 11 Ноябрь 2014 - 03:37

В style.css найдите:
.et_categ_box a, .et_categ_box a:hover, #scroll-box a, #scroll-box a:hover
в данном блоке стилей измените
padding: 0 16px;
на:
padding: 0 16px 0 38px;

и далее двигайте сами иконки, например находим:
.cat-name:nth-child(6) {
	background: url("http://design.sait.ru/icons-uni-white.png") no-repeat 0 -326px;
}
меняем на:
.cat-name:nth-child(6) {
	background: url("http://design.sait.ru/icons-uni-white.png") no-repeat 18px -326px;
}


#25 admin

admin

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 504 сообщений
  • ГородСамара

Отправлено 11 Ноябрь 2014 - 06:37

Просмотр сообщенияVaccina (11 Ноябрь 2014 - 03:37) писал:

В style.css найдите:
.et_categ_box a, .et_categ_box a:hover, #scroll-box a, #scroll-box a:hover
в данном блоке стилей измените
padding: 0 16px;
на:
padding: 0 16px 0 38px;

и далее двигайте сами иконки, например находим:
.cat-name:nth-child(6) {
background: url("http://design.sait.ru/icons-uni-white.png") no-repeat 0 -326px;
}
меняем на:
.cat-name:nth-child(6) {
background: url("http://design.sait.ru/icons-uni-white.png") no-repeat 18px -326px;
}
Спасибо!





Темы с аналогичным тегами яркие иконки, техника

Количество пользователей, читающих эту тему: 1

0 пользователей, 0 гостей, 0 анонимных


    Bing (1)