Простое и качественное меню для футера (footer, подвал, нижняя часть в шаблоне блога) я нашёл на известном сайте . Элементы выглядят очень скромно и при наведении меняют цвет.
Как и обычно выкладываю оба кода. Которые разом можно скопипастить, предварительно отредактировав, в 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), уменьшается за счёт этого параметра и отступов от линий до текста.


Very good information. Lucky me I reach on your site by accident, I bookmarked it.
ОтветитьУдалить@Анонимный
ОтветитьУдалитьI am glad that the article was useful. Come again:).