Установка анимированного меню для блога blogspot
Сегодня поговорим ещё об одном меню для блога-анимированном. Установив такое меню, не надо никакой шапки, нет необходимости убирать Navbar, можно использовать не только как меню, а написать к примеру рекламный текст и дать ссылку на свою партнерскую программу.
При прокрутке страницы вниз меню не исчезает, всегда на виду, что согласитесь очень удобно.
Вставим код меню привычным нам способом, при помощи HTML/JavaScript, добавить гаджет-вставить-сохранить. Расположение в макете блога не имеет значения, меню все равно будет сверху.
Надо сказать спасибо автору, код нашла на одном зарубежном блоге, за такой легкий способ решения. Да и ещё, я установила такое меню в своих блогах (уже убрала), и отображение отличается, по всей вероятности зависит от настроек в дизайне и шаблона. Поехали, копируем код ниже:
При прокрутке страницы вниз меню не исчезает, всегда на виду, что согласитесь очень удобно.
Надо сказать спасибо автору, код нашла на одном зарубежном блоге, за такой легкий способ решения. Да и ещё, я установила такое меню в своих блогах (уже убрала), и отображение отличается, по всей вероятности зависит от настроек в дизайне и шаблона. Поехали, копируем код ниже:
<style>
#stickey_footer { /* This will make your footer stay where it is */
background: none repeat scroll 0 0 #1D1D1D;
border: 1px solid rgba(0, 0, 0, 0.3);
bottom: 0;
font-family: Arial, Helvetica, sans-serif;
height: 45px;
left: 50%;
margin: 0 auto 0 -490px;
padding: 0 10px;
position: fixed; top: 0px;
text-shadow: 1px 1px 1px #000000;
width: 960px; z-index:999;
}
/* border curves */
#stickey_footer {
-moz-border-radius: 0px 0px 10px 10px;
-webkit-border-radius: 0px 0px 10px 10px;
border-radius: 0px 0px 10px 10px;
}
/* hover effect */
#stickey_footer:hover {
background: none repeat scroll 0 0 #2b2a2a;
}
/* shadow for the footer*/
#stickey_footer {
-moz-box-shadow:0px 0px 11px #191919;
-webkit-box-shadow:0px 0px 11px #191919;
box-shadow:0px 0px 11px #191919;
}
#footer_menu {
margin: 0;
padding: 0;
width:auto;
}
#footer_menu li {
list-style: none;
float: left;
font-size:12px;
padding: 12px 14px 14px 14px;
border-right:1px solid rgba(0, 0, 0, 0.4);
background: rgba(0, 0, 0, 0.1);
}
#footer_menu li:hover {
background:#202020; /* Fallback color for old browsers */
background: rgba(0, 0, 0, 0.3);
}
#footer_menu .imgmenu:hover {
background:url("images/home_hover.png") 23px 5px no-repeat;
}
#footer_menu li a {
display: block;
color: #cccccc;
text-decoration: none;
}
#footer_menu li a:hover {
color: #ffffff;
}
#footer_menu li span {
display:none;
}
#stickey_footer #social_icons {
float:right; /* social icons positions */
width:auto;
margin:-45px 15px 0px;
padding:0px;
overflow:hidden;
}
#stickey_footer #social_icons li {
margin-right:12px; /* 12px is the space between each one of them */
float:left;
width:24px;
padding:0px;
height:32px;
list-style:none;
_margin-right:0px; /* this is for IE6 only */
</style>
<div id="stickey_footer">
<div id="stickey_footer">
<ul id="footer_menu">
<li><a href="Ссылка на страницу">Название</a></li>
<li><a href="Ссылка на страницу">Название</a></li>
<li><a href="Ссылка на страницу">Название</a></li>
<li><a href="Ссылка на страницу">Название</a></li>
<li><a href="Ссылка на страницу">Название</a></li>
</ul>
</div></div>
#1D1D1D - это цвет фона меню, #2b2a2a - цвет при наведении мыши;
Ссылка на страницу - URL адрес, Название - заголовок сообщения;
heidgt:45px; - высота меню, left:50%; - отступ от левого края;
Выделено оранжевым-размер шрифта;
Выделено оранжевым-размер шрифта;
Вы можете добавлять сколько угодно ссылок, добавляя строку
<li><a href="адрес">название</a></li>
В блоге есть другие статьи разных вариантов меню. Перейдите сверху-содержание-ярлык-меню. На этом все. Пишите, комментируйте, спасибо, что поделились в социальных сетях. Всего доброго.
Рекомендуемый контент:
Дратути! а как подменю сделать? спасибо
ОтветитьУдалитьЛана Ники, здравствуйте. Посмотрите новый пост по ссылке:
Удалитьhttp://www.bdblogov.ru/2015/12/horizontal-menu-with-dropdown-tabs-for-blogger.html