Меню для футера


Простое и качественное меню для футера (footer, подвал, нижняя часть в шаблоне блога) я нашёл на известном сайте free-lance.ru. Элементы выглядят очень скромно и при наведении меняют цвет.

Как и обычно выкладываю оба кода. Которые разом можно скопипастить, предварительно отредактировав, в html виджет блоггера. Доводить до ума рекомендуется в аналогичном виджете на тестовом блоге.

Css:
<style>
.footer-block { 
color: rgb(102, 102, 102);
font-size: 13px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
padding-bottom: 25px;
padding-left: 0px;
padding-right: 0px;
padding-top: 35px;
text-align: left;
width: 954px;
 }

.c { 
height: 1%;
 }
.footer { 
background-attachment: scroll;
background-clip: border-box;
background-color: rgb(255, 255, 255);
background-image: none;
background-origin: padding-box;
background-position: 0% 0%;
background-repeat: repeat;
background-size: auto;
border-top-color: rgb(178, 178, 178);
border-top-style: solid;
border-top-width: 1px;
margin-bottom: -1px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
position: relative;
text-align: center;
top: -1px;
z-index: 1;
 }
.c { 
height: 1%;
 }
.m-f-one { 
border-right-color: rgb(216, 216, 216);
border-right-style: solid;
border-right-width: 1px;
float: left;
height: 130px;
padding-bottom: 0px;
padding-left: 35px;
padding-right: 0px;
padding-top: 0px;
 }
.m-f-services { 
width: 239px;
 }
.m-f-user { 
padding-bottom: 0px !important;
padding-left: 15px !important;
padding-right: 0px !important;
padding-top: 0px !important;
width: 177px;
 }
.m-f-aproject { 
padding-bottom: 0px !important;
padding-left: 35px !important;
padding-right: 0px !important;
padding-top: 0px !important;
width: 250px;
 }
.m-f-help { 
border-right-color: currentColor !important;
border-right-style: none !important;
border-right-width: medium !important;
padding-bottom: 0px !important;
padding-left: 35px !important;
padding-right: 0px !important;
padding-top: 0px !important;
 }
.footer div { 
font-size: 11px;
 }
.m-f-one h4 span, .m-f-one h4 a:link, .m-f-one h4 a:visited { 
color: rgb(153, 153, 153);
text-decoration: underline;
 }
.m-f-one li span, .m-f-one li a:link, .m-f-one li a:visited { 
color: rgb(153, 153, 153);
text-decoration: none;
white-space: nowrap;
 }
.m-f-one:hover li a:hover, .m-f-one:hover h4 span, .m-f-one:hover h4 a:link, .m-f-one:hover h4 a:visited { 
color: rgb(51, 51, 51);
text-decoration: underline;
 }

.m-f-one:hover li span, .m-f-one:hover li a:link, .m-f-one:hover li a:visited { 
color: rgb(51, 51, 51) !important;
text-decoration: none;
 }
.m-f-one ul { 
float: left;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
 }
.footer ul, .footer ol { 
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
 }
</style>

Html:
<div class="footer-block c">
<div class="m-f c" id="m-f">
<div class="m-f-one m-f-user">
<h4>
<a href="ссылка1">Заголовок1</a></h4>
<ul>
<li><a href="ссылка1">Название ссылки1</a></li>
</ul>
</div>

<div class="m-f-one m-f-services">
<h4>
<a href="ссылка2">Заголовок2</a></h4>
<ul>
<li><a href="ссылка2">Название ссылки2</a></li>
<li><a href="ссылка2">Название ссылки2</a></li>
<li><a href="ссылка2">Название ссылки2</a></li>
</ul>

</div>
<div class="m-f-one m-f-aproject">
<h4>
<a href="ссылка3">Заголовок3</a></h4>
<ul>
<li><a href="ссылка3">Название ссылки3</a></li>
<li><a href="ссылка3">Название ссылки3</a></li>
<li><a href="ссылка3">Название ссылки3</a></li>
<li><a href="ссылка3">Название ссылки3</a></li>
</ul>
<ul>
<li><a href="ссылка3">Название ссылки3</a></li>
<li><a href="ссылка3">Название ссылки3</a></li>
<li><a href="ссылка3">Название ссылки3</a></li>
</ul>

</div>
<div class="m-f-one m-f-help">
<h4>
<a href="ссылка4">Заголовок4</a></h4>
<ul>
<li><a href="ссылка4">Название ссылки4</a></li>
</ul>

</div>
</div>
</div>

Демо (скриншот):


Живое демо на тестовом блоге (меню в нижнем гаджете).

Примечание.
m-f-one плюс m-f-services, m-f-user, m-f-aproject, m-f-help регулируют столбцы в меню (слева направо).
Ширина меню - 954 пикселя (регулируется в footer-block), уменьшается за счёт этого параметра и отступов от линий до текста.

2 комментария:

  1. Very good information. Lucky me I reach on your site by accident, I bookmarked it.

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