Простое и качественное меню для футера (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:).