Панель с навигацией для подвала сайта на СSS Панель с навигацией для подвала сайта на СSS

 

В данном уроке мы рассмотрим как можно стилизовать подвал, или как его еще называют, футер сайта. Если вы присматривались, то внизу сайта можно найти схожие ссылки, которые находятся в панели навигации, это делается с целью упростить навигацию на сайте, чтобы вы не возвращались в самое начало. Мы создадим фиксированную  панель в подвале сайта с отзывчивым интерфейсом, кроме этого добавим несколько социальных иконок. Кроме этого панель легко настроить под цветовой интерфейс сайта.

 

ИСХОДНИКИ

 

Панель имеет фиксированное позиционирование на странице, то есть при любом разрешении экрана панель будет оставаться на нужном месте. И так, давайте приступим.

 

Шаг 1. HTML

Нам необходимо создать список элементов, в котором будут содержаться разделы, также добавим социальные иконки:

<div id="stickey_footer">
<ul id="footer_menu">
 <li><a href="#"><span>Home</span></a></li>
 <li><a href="#">Services</a>
 <li><a href="#">Portfolio</a>
 <li><a href="#">Friends</a>
 <li><a href="#">Blog</a>
 <li><a href="#">Testimonials</a>
 <li><a href="#">Contact</a>
 </ul>

 <ul id="social_icons">
 <li><a href="#" ><img src='images/twitter.png' alt="" /><span>Twitter</span></a></li>
 <li><a href="#" ><img src='images/digg.png' alt="" /><span>Digg</span></a></li>
 <li><a href="#" ><img src='images/flickr.png' alt="" /><span>Flickr</span></a></li>
 <li><a href="#" ><img src='images/facebook.png' alt="" /><span>Facebook</span></a></li>
 </ul>

</div>

 

По желанию можно добавить свое количество подпунктов и иконок для социальных сетей.

 

Шаг 2. CSS

Стили достаточно простые, нам необходимо определить общие параметры, установить скругление, заливку для панели, добавить тени. Кроме этого нам необходимо добавить общие параметры для социальных иконок и их позиционирования на панели.

#stickey_footer {
 background: none repeat scroll 0 0 #1D1D1D;
 border: 1px solid rgba(0, 0, 0, 0.3);
 bottom: 0;
 font-family: Arial, Helvetica, sans-serif;
 height: 40px;
 left: 50%;
 margin: 0 auto 0 -490px;
 padding: 0 10px;
 position: fixed;
 text-shadow: 1px 1px 1px #000000;
 width: 960px;
}

#stickey_footer {
 -moz-border-radius: 10px 10px 0px 0px;
 -webkit-border-radius: 10px 10px 0px 0px;
 border-radius: 10px 10px 0px 0px;
}

#stickey_footer:hover {
 background: none repeat scroll 0 0 #2b2a2a;
}

#stickey_footer {
 -moz-box-shadow:0px 0px 11px #191919;
 -webkit-box-shadow:0px 0px 11px #191919;
 box-shadow:0px 0px 11px #191919;
}
#footer_menu {
 margin: 0;
 padding: 0;
 width:auto;
}
#footer_menu li {
 list-style: none;
 float: left;
 font-size:12px;
 padding: 12px 14px 14px 14px;
 border-right:1px solid rgba(0, 0, 0, 0.4);
 background: rgba(0, 0, 0, 0.1);
}
#footer_menu .imgmenu {
 padding:5px 8px 3px 14px;
 float:left;
 background:url("images/home.png") 13px 5px no-repeat;
 width:36px;
 height:30px;
 border:none;
 border-right:1px solid rgba(0, 0, 0, 0.4);
 cursor:pointer;
}
#footer_menu li:hover {
 background:#202020;
 background: rgba(0, 0, 0, 0.3);
}
#footer_menu .imgmenu:hover {
 background:url("images/home_hover.png") 13px 5px no-repeat;
}
#footer_menu li a {
 display: block;
 color: #cccccc;
 text-decoration: none;
}
#footer_menu li a:hover {
 color: #ffffff;
}
#footer_menu li span {
 display:none;
}
#stickey_footer #social_icons {
 float:right;
 width:auto;
 margin:5px 15px 0px;
 padding:0px;
 overflow:hidden;
}
#stickey_footer #social_icons li {
 margin-right:12px;
 float:left;
 width:24px;
 padding:0px;
 height:32px;
 list-style:none;
 _margin-right:0px;
}

 

Вот и все. Готово!


🔖 Выбор по тегам ×

Top