Автор

31 03.2013
Панель с навигацией для подвала сайта на С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;
}

 

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


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеCSS3

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

Большие изображения в шапке сайта часто используются в наши дни в качестве фона для сайта. Они визуально разделяют сайт на несколько важных разделов, при этом пользователи могут сосредоточиться на основных элементах — навигация, текстовая информация и призыв к действию. Изображения, зачастую, служат только визуальным украшением, но сегодня мы рассмотрим как сделать анимационную шапку сайта с эффектом зума и объемности, что будет весьма притягивать взор посетителей.


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

Как установить кнопки социальных сетей для своего сайта или как добавить блок с кнопками социальных сетей — тема данного урока. Я постараюсь дать вам информацию о самых популярных способах размещения кнопок.

Размещение кнопок социальных сетей на сайте при помощи официальных виджетов:

Кнопка Вконтакте- Мне нравится
Кнопка FaceBook — Like
Кнопка Twitter — Твитнуть
Кнопка Одноклассники — Класс
Кнопка Google — Plus 1


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

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


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

Смелая навигация, слайд-шоу, когда активна, заменяет текущий контент в трехмерном пространстве.


105 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close