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

Простое и элегантное меню, "позаимствованное" с хабра :).
Для тех, кто плохо понимает в разбиении шаблона, немного поясню.
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