Панель навигации для подвала блога.

панель навигации
Всем, привет. Сегодня попробуем немного стилизовать футер блога. Для того, чтобы упростить навигацию, внизу блога сделаем фиксированную панель ссылок с иконками социальных сетей. Очень часто на сайтах можно встретить верхнее меню навигации и нижнее, чтобы не возвращать посетителей обратно в самое начало. У меня на блоге один из таких вариантов установлен в подвале.
В статье фиксированная панель в нижней части блога был предложен ещё один пример с использованием JavaScript. Начинающим блогерам, установка панели навигации, которую предлагаю сегодня, не составит труда. Код устанавливается в гаджет HTML/JavaScript.

При любом разрешении экрана панель будет видна в определённом месте. Посмотрите пример на тестовом блоге в футоре.

Давайте перейдём к реализации. Сначала скопируйте в блокнот следующий код HTML, где создадим списки элементов с содержанием и кнопами соц.сетей.

<div id="stickey_footer">
<ul id="footer_menu">
 <li><a href="http://www.shpargalochki.ru/ ">Главная</a></li>
 <li><a href="http://www.shpargalochki.ru/p/blog-page_1.html ">Содержание</a></li>
 <li><a href="http://www.shpargalochki.ru/p/blog-page_29.html">Об авторе</a></li>
 <li><a href="http://www.shpargalochki.ru/p/blog-page_2746.html">Форма связи</a></li>

 </ul>

 <ul id="social_icons">
 <li><a href="#" ><img src='http://s019.radikal.ru/i618/1406/76/98d12801cd3d.png' alt=" Твиттер" /><span>Twitter</span></a></li>
 <li><a href="#" ><img src='http://s019.radikal.ru/i618/1406/40/71d113bc8bce.png' alt="Гугл+" /><span>Гугл+</span></a></li>
 <li><a href="#" ><img src='http://s52.radikal.ru/i137/1406/1d/b342e2f0d04f.png' alt="youtube" /><span>youtube</span></a></li>
 <li><a href="#" ><img src='http://i069.radikal.ru/1406/d9/74471340c15b.png' alt="Фейсбук" /><span>Facebook</span></a></li>
 </ul>

</div>


Если есть необходимость, можно добавить ещё пункты меню и иконок, добавляя соответственно -

<li><a href="http://www.shpargalochki.ru/ ">Главная</a></li>

 <li><a href="#" ><img src='http://s019.radikal.ru/i618/1406/76/98d12801cd3d.png' alt=" Твиттер" /><span>Twitter</span></a></li>

То, что выделено красным цветом, это адреса ваших страниц и адрес картинки-иконки. Вместо решёток пишите свои адреса в социальных сетях.
Чтобы придать большей уникальности панели навигации, сделайте свои иконки. Об этом здесь.

Сейчас копируйте код CSS, где зададим стили.Они достаточно простые фон, тень, закругление углов и расположение кнопок.

<style>#stickey_footer {
 background: none repeat scroll 0 0 #2F4F4F;
 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 #8FBC8F;
}

#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:30px;
 float:left;
 width:24px;
 padding:0px;
 height:32px;
 list-style:none;
 _margin-right:0px;
}</style>


Тут, думаю, всё понятно. Отметила цвет фона панели, цвет при наведении курсора, тень. В конце кода позиционирование иконок относительно правого края.

Можете поиграться с этими элементами и подогнать под ваш дизайн. Или копируйте просто готовый код, только поменяйте  все адреса на свои.

В гаджет HTML/JavaScript устанавливайте первый код, под ним второй и сохраняйте. Переместите его куда-нибудь в нижнею часть макета и не забудьте сохранить расположение.

Вот и всё. Поверьте, когда вы сделаете такую фиксированную панель навигации, вашим посетителям будет намного проще ориентироваться.

У меня всё. Спасибо за ваше внимание и до новых встреч.


здесь можно оформить подписку на новые шпаргалки

Введите Ваш email


16 комментариев:

  1. Надо попробовать. Если, что с меня вопросы :)

    ОтветитьУдалить
  2. Привет, Ирина. Тут главное иконки свои можно подобрать а с цветом и размерами всегда пожалуйста, обращайся. Мне вот своя нижняя уже поднадоела. Поработаю над дизайном. Да и этот вариант что в статье более лёгкий для блога.

    ОтветитьУдалить
  3. Каждый раз, читая Ваши рекомендации, я с восхищением думаю, как же мне хочется во всем этом разбираться, понимать и осознавать. Пока что я могу только копировать какие-то действия, не понимая, как все это устроено изначально.
    Спасибо за очередной урок, как раз сейчас занимаюсь оформлением и настройкой своего блога.
    Буду Вам очень благодарна за все уроки по этой теме!

    ОтветитьУдалить
    Ответы
    1. Любовь, если есть желание обязательно потихоньку разберётесь. Все мы с чего-то начинали. Будут какие-то трудности или вопросы обращайтесь, помогу чем могу. Спасибо вам за визит и комментарий.

      Удалить
  4. Спасибо! Удобно! Вика, спасибо!

    ОтветитьУдалить
    Ответы
    1. Ирина, я быстренько уже сбегала к тебе в библиомир. И правда, у тебя так здорово всё вписалось. Вообще блог стал как - то интереснее выглядеть. Молодец.

      Удалить
    2. ну так - нет предела совершенства!:))) ЭТО благодаря Катюше ( и тебе конечно!) Она меня поругала - я чуть чуть исправилась. Сейчас вот закончу летние мероприятия и будем с Катей улучшать дальше.
      Про нижнюю панель - Виииик, а нельзя сделать так, чтобы те разделы, которые в верней панели не повторялись в нижней? Точнее: можно ли убрать некоторые названия в верхней панели, а оставить только в нижней? Чтобы не повторялись. Я так подумала:)) ( что уже смешно!) и поняла, что нельзя. Если только оставить в верхней панели страницу без названия:)) Но тогда там будет просто пустое место в строке панели. А это наверное не красиво будет. Но вдруг.... :))

      Удалить
    3. Ирина, то что тебе надо кучу гаджетов убрать, говорила я по-моему года 2назад. А насчёт разделов, можешь ведь вставлять в нижнюю, да и в верхнюю что хочешь. Допустим свою страницу о блоге, об авторе ты хочешь видеть только на нижней панели . Зайди во вкладку дизайн, гаджет страницы. там есть функция где нужно отметить , какие не надо хочешь отобразить, а какие нет . Они никуда не денутся, поскольку уже опубликованы. Просто не будут отображаться вверху.Теперь ту можешь их убрать в нижнюю панельку. Зайди в админке на страницы, выбери нужную нажми просмотреть. В строке браузера будет ссылка на неё. Копируй и вставляй в код нижней панели. На эту тему подробнее здесь http://www.shpargalochki.ru/2014/03/delaem-podstranicy-v-bloge.html

      Удалить
  5. Викусь, привет! Говорила же "я подумала" уже смешно звучит:)) ну конечно же!! Я совсем забыла про ту галочку. на страницах.:)) вот что бы я без тебя делала!!!!

    ОтветитьУдалить
    Ответы
    1. Ирина, отдыхать тебе пора. ОТДЫХАТЬ. И про все галочки вспомнишь.

      Удалить
    2. Да я бы с удовольствием , но я ведь в школе работаю, а школа -это организм без отдыха... иначе ничего не успеешь. лагерь, отчеты, проверки, новые учебники до 3000 экз получить- распаковать-пропечатать-разложить, работа с формулярами -перевести в сл. класс 1700 шт- вообщем бррр!

      Удалить
    3. Ирина, я понимаю на сколько работа тяжёлая. Но она тебе нравится о это видно.Что ж, придётся напоминать , мне нетрудно. Но всё же отдыхать надо по возможности.

      Удалить
    4. Спасибо Вика! я не против! но вот невестка по моему уже обиделась за внука! Я согласна помогать. сидеть с ним, но я не согласна ЖИТЬ с ним постоянно! Мне тяжело: сердце не дает развернуться во всю ширь, работа, да и Данька такой шебутной!!!А получается. что я с ним каждый день...в течении месяца .Такой необходимости с ним быть постоянно нет - есть папа. мама. садик...Ну вот и заикнулась об отдыхе- по моему она обиделась. Ничего не сказала, но не звонит уже неделю.
      Вот тебе и отдых! :))

      Удалить
  6. Вик, а почему у меня после публикации поста в гугл + появляются 2 сообщения о новом посте? Публикую один раз, а появляются 2 сообщения? Да еще момент публикации тормозит:((

    ОтветитьУдалить
    Ответы
    1. Ирина, моё мнение на этот счёт однозначно-дети должны жить отдельно от родителей. Хватит уже. Тишины и покоя уже хочется. Да уж о каком отдыхе может идти речь когда целый день в заботе. Должно быть у каждого личное пространство. У меня сын месяц гостит и то голова кругом идёт. Столько места кажется занимает. Большой и громкий. И то голова как арбуз. Сочувствую тебе.
      Насчёт Гугл , если я правильно тебя поняла, вот тут статейка про это http://ru-google-os.blogspot.ru/2013/09/automatically-share-blogger-posts-on-google-plus.html
      С праздником!

      Удалить
    2. С Праздником Вика! Спасибо -"щас "зайду

      Удалить

Пользовательский поиск