Панель трендов с помощью CSS и jQuery

Хочу сегодня поделиться с вами интересной задумкой. На многих англоязычных порталах, частенько присутствует так называемая панель трендов. Обычно это однострочная панель прилепленная к низу экрана, на которой создатели портала анонсируют популярные статьи. Панель достаточно хорошо привлекает внимание и соответственно вы можете перенаправить трафик со всего сайта в нужное вам русло. Существует множество плагинов для WordPress, которые позволяют сделать что-то подобное. Но нам всегда интересен чистый легкий код. Так же мы будем использовать свойство opacity для того, чтобы панель становилась ярче при наведении на нее курсора мыши.

Шаг 1

Начнем мы как всегда с HTML кода, который позволить нам отобразить популярные ссылки в панели трендов.

Вставит этот код необходимо перед закрывающим тэгом body.

Шаг 2

Зададим внешний вид нашей панели с помощью CSS.

#stickybar {
	border-bottom:1px solid #ECF1EF;
	background:#151715;
        font-size:16px;
        color:#FFF;
	padding:10px 20px;
	position:fixed;
	bottom:0;
	left:0;
	z-index:2000;
	width:100%;
        text-align:center;
}
#stickybar a {
       color:#FFF;
       text-decoration:none;
}
#closebtn {
       background:url('close.png') top no-repeat;
       border:none;
       margin-left:15px;
       position:absolute;
}

Если вы хотите поменять фоновый цвет панели — измените свойство background у идентификатора #stickybar. Можете использовать плагин EyeDropper для Google Chrome для подбора нужного цвета.

Шаг 3

Ну и заключительный шаг, на котором мы прибегнем к помощи JavaScript дабы поиграть с эффектом прозрачности и создать действие для кнопки закрытия. Использовать будем библиотеку jQuery, так что если она у вас еще не подключена, вставьте такую вот строчку после тега head:

либо скачайте библиотеку jQuery с сайта http://jquery.com, закачайте ее на сервер и пропишите путь к ней. Подробней о jQuery можно почитать в мини-курсе по jQuery Для дизайнеров.
После того как вы добавили библиотеку jQuery добавьте следующий код до закрывающего тэга head:

Если вы хотите изменить скорость затемнения или процент прозрачности поправьте параметры fadeSpeed и fadeTo. Напоминаю, что прозрачность задается в пределах от 0.0 до 1.0.

Посмотреть демо
Вот в принципе и все манипуляции. В итоге вы получите простую и легкую панель трендов для вашего сайта. Есть вопросы? Задайте их в комментариях.