Меню для футера: хаброменю


Простое и элегантное меню, "позаимствованное" с хабра :).
Для тех, кто плохо понимает в разбиении шаблона, немного поясню.
Footer (подвал) - самая нижняя часть блога, как правило, имеющая ширину области постов и сайдбара вместе взятых.

В прошлых выпусках я выкладывал такие меню в разных вариациях:
Меню для футера - было рассмотрено похожее меню, только оно отличается тем, что изменяет цвет всех ссылок при наведении
Нижняя панель для блога - описан другой интересный вариант нижнего меню, состоящего из картинок
Меню по-корейски - сложно многоуровневое меню с привлечением javascript, одно из самых красивых в своём классе
И совсем Простое css меню - чёрная панелька, прижимается к нижнему краю страницы

Вернёмся к текущему материалу...

Код состоит из двух частей: html и css, оба можно вставлять непосредственно в html виджет блоггера, либо вынести css таблицу в отдельный файл и положить на хостинг. Особенности последнего действия читайте в этой статье.

Традиционно выкладываю демо (в виде скриншота, поскольку такая полоса не уместится в посте):

Живое меню вы можете увидеть на моём тестовом блоге (нижний виджет под названием Хаброменю для футера demo).

Html:
<div id="footer">

      
   
   <dl>
    <dd><a href="link1">link1</a></dd>
    <dd><a href="link2">link2</a></dd>
   </dl>
   
   <dl>
    <dt>link3</dt>
     
    <dd><a href="link3">link3</a></dd>

    <dd><a href="link3">link3</a></dd>
    <!--dd><a href="link3">link3</a></dd-->
    <dd><a href="link3">link3</a></dd>
    <dd><a href="link3">link3</a></dd>
    <dd><a href="link3">link3</a></dd>
    <dd><a href="link3">link3</a></dd>

    <dd><a href="link3">link3</a></dd>
   </dl>
   <dl>
    <dt>link4</dt>
    <dd><a href="link4">link4</a></dd>
    <dd><a href="link4">link4</a></dd>
    <dd><a href="link4">link4</a></dd>

    <!--dd><a href="link4">link4</a></dd-->
    <dd><a href="link4">link4</a></dd>
   </dl>
   <dl>
    <dt>link5</dt>
    <dd><a href="link5">link5</a></dd>
    <dd><a href="link5">link5</a></dd>

    <dd><a href="link5">link5</a></dd>
    <dd><a href="link5">link5</a></dd>
    <dd><a href="link5">link5</a></dd>
   </dl>
   <dl>
    <dt>link6</dt>
    <dd><a href="link6">link6</a></dd>

    <dd><a href="link6">link6</a></dd>
    <dd><a href="link6">link6</a></dd>
   </dl>
      <div class="copyright">
      <a class="footer_logo" href="link7">link7</a>
      <div class="about">
       © 2010&#8211;2011<br />

       «<a href="link7">sitename</a>»
        <br /><br /> 
      Some text:<br />
      <a href="mailto:ail@mail" title="call admin">mail@mail</a><br /><br /><br />
      <a href="link8">mobile vesrion</a>
     
     </div>
      </div>

 
</div>
Всё уже подписано, остаётся отредактировать пункты и поставить ссылки, цвета которых будут зависить от настроек для тега a в вашем шаблоне.

Css:
<style>
#footer dl dd { 
line-height: 150%;
margin-bottom: 5px;
 }
#footer { 
border-top-color: #cccccc;
border-top-style: solid;
border-top-width: 1px;
color: #949494;
font-family: "Tahoma", "Arial";
font-size: 11px;
margin-bottom: 30px;
margin-top: 40px;
overflow-x: hidden;
overflow-y: hidden;
padding-top: 30px;
 }
#footer dl { 
display: block;
float: left;
width: 15%;
 }
#footer dl dd { 
line-height: 150%;
margin-bottom: 5px;
 }
#footer dl { 
display: block;
float: left;
width: 15%;
 }
#footer dl dt { 
font-size: 13px;
margin-bottom: 5px;
 }
#footer .copyright { 
float: left;
width: 25%;
 }
.footer_logo { 
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8sDPxiGwJF4EPmxym0KDp4n5A01HsWrxdKboN-phQjNpXEYII1naSt9EOglzpqwgqj-OG66nwvjVIFN-R7LSeoGfbzQS27P52-eTDGjkGOhG2uGjF63xcPFPgRVEFTtuWxoEa6wiR-MQ2/s320/bonsai.png");
background-origin: padding-box;
background-position: 0% 100%;
background-repeat: no-repeat;
background-size: auto;
display: block;
float: left;
height: 64px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: -50px;
margin-top: 0px;
outline-style: none;
outline-width: medium;
text-indent: -9999px;
width: 64px;
 }
#footer .copyright .about { 
float: left;
font-size: 11px;
margin-left: 50px;
width: 130px;
 }
</style>
Здесь обращаю внимание на последнюю колонку: в ней присутствует картинка, настройки которой находятся в секции .footer_logo (margin-right регулирует расстояние до ближайшего текста). Сама колонка по замыслу должна сильно отступать от других к правому краю. настраивается в секции #footer .copyright .about, где margin-left регулирует отступ.
В скриншот не попала разделительная линия, которая проводит границу между меню и другими элементами шаблона.

Источник "вдохновения" → habr.ru

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

  1. It is a superb guidelines specifically to individuals new to blogosphere, quick and exact information… Many thanks for sharing this a single. A need to go through write-up.

    ОтветитьУдалить
  2. You're welcome:). I often post the different menus and design finds well-known sites. Come.

    ОтветитьУдалить
  3. Этот комментарий был удален автором.

    ОтветитьУдалить
  4. Давно искал такую менюшку
    Жаль не написано куда код ставить
    Стили поставил сюда перед ]]>/b:skin>
    HTMl перед закрывающим body
    в результате панель оказалась в самом низу блога.
    Как бы решить этот вопрос, и по поводу цвета этих менюшек, что бы были в виде красивых кнопочек?
    Спасибо.

    ОтветитьУдалить
  5. Css стили вы в правильное место скопировали. Html код тоже, но можно было создать виджет и поместить его в нижнюю часть шаблона (чисто для удобства редактирования).
    Панель должна по замыслу быть внизу, как в habrahabr.ru .

    Насчёт кнопочек, можно надписям бекраунд сделать и закруглить. С картинками, считаю, нет смысла связываться. Это же облегчённое традиционное текстовое меню, оно информативно и в то же время не утяжеляет страницу.

    ОтветитьУдалить
  6. aldous, здравствуйте! Помогите мне, пожалуйста! Я пытаюсь установить меню у себя на блоге, начала с верхнего

    http://gasha-makar.blogspot.ru/

    Но что-то не ладится с шириной блога. Я исправила вроде бы все цифры ширины в шаблоне, но ничего не меняется. Помогите мне, пожалуйста!

    Я попробовала поэксперементировать с размерами фото в заголовке.

    На тестовом блоге поставила фото в заголовок по размеру ширины блога

    http://gasha-makarushka.blogspot.ru/

    (на основном блоге в заголовке стоит фото меньшей ширины, чем ширина всего блога)

    И всё равно выглядит точно так же.

    ОтветитьУдалить
  7. Здравствуйте, не совсем понял, что вы пытаетесь реализовать. Похоже, вам нужна картинка с шириной такой же, как и у верхнего меню.

    ОтветитьУдалить
    Ответы
    1. У верхнего меню ширина задана 100 %, я пробовала ставить картинку шириной 1380, как у всего блога - ничего не изменилось

      Удалить
  8. Прошу извинить, вопрос не по теме, но не нашла у Вас похожих тем. Проблема в том, что при загрузке блог открывается с уклоном вправо, слева получается отступ. Можно ли решить эту проблему. или менять шаблон? В течении нескольких дней поиска в интернете, так и не смогла найти ответ. Шаблон почистила, удалила все лишнее. Спасибо.

    ОтветитьУдалить
  9. Чтобы я не путался и не забыл отвечать, все пишем сюда -> http://www.blogopoisk.ru/p/forum.html
    Там оповещение на email лучше работает.

    ОтветитьУдалить