• Страница 1 из 1
  • 1
Форум » Веб-разработка » HTML + CSS — коды » Синее горизонтальное меню для сайта
Синее горизонтальное меню для сайта
workman
Воскресенье, 27 Сентября 2015 | Сообщение 1
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
Установка очень проста.
Данные стили пихаем в самый низ Таблицы стилей (CSS)
Код
#navigation{height:48px;margin:0;padding:0;background:url(http://blacklisting.brigada31.ru/images/navigation-bg.jpg) no-repeat left top;background-size:cover}
#navigation ul{list-style:none;margin:0;padding:0}
#navigation ul li{display:inline;margin:0}
#navigation ul li a{height:33px;display:block;float:left;padding:17px 15px 0 15px;font:bold 12px Arial;color:#FFF;text-decoration:none;background:url(http://blacklisting.brigada31.ru/images/navigation-separator.png) no-repeat right center}
#navigation ul li a:hover{color:#363636;background:url(http://blacklisting.brigada31.ru/images/navigation-hover.png) repeat-x left top}
#navigation ul li#active a{color:#363636;background:url(http://blacklisting.brigada31.ru/images/navigation-hover.png) repeat-x left top}


Данный HTML код запихиваем где желаем видеть и естественно вставляем свои ссылки и про анкоры не забываем
Код
<div id="navigation"><ul>
<li><a href="#">Анкор</a></li>
<li><a href="#">Анкор</a></li>
<li><a href="#">Анкор</a></li>
<li><a href="#">Анкор</a></li>
<li><a href="#">Анкор</a></li>
<li><a href="#">Анкор</a></li>
</ul></div>


Выглядеть будет так


Если нужно сделать постоянно активной какую-нибудь кнопку,то пишем в ссылке так
Код
<li><a href="#" id="active">Анкор</a></li>


Просмотреть DEMO
Прикрепления: 1601656.png (43.6 Kb)


Сообщение отредактировал
workman - Воскресенье, 27 Сентября 2015, 01:05
Страна: (RU)
Kosten
Воскресенье, 27 Сентября 2015 | Сообщение 2
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Простое и удобное меню, которое сейчас больше цениться, чем дизайнерское с широким CSS и с прогибами. Все отошло давно, сейчас ставят проще и удобно чтоб было.
Страна: (RU)
workman
Воскресенье, 27 Сентября 2015 | Сообщение 3
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
Да просто хотел уйти от файлов, а потом не стал раздувать из мухи слона и прописал картинки
Страна: (RU)
FeStemBer
Воскресенье, 04 Октября 2015 | Сообщение 4
Оффлайн
Проверенные
Сообщений:355
Награды: 1
Смотрится красиво и под светлый дизайн подойдет, основа, это синее и белое в дизайне как считается больше всего.
Страна: (RU)
Форум » Веб-разработка » HTML + CSS — коды » Синее горизонтальное меню для сайта
  • Страница 1 из 1
  • 1
Поиск: