Анимированное меню

---

Установка анимированного меню для блога 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>

В блоге есть другие статьи разных вариантов меню. Перейдите сверху-содержание-ярлык-меню. На этом все. Пишите, комментируйте, спасибо, что поделились в социальных сетях. Всего доброго.

Рекомендуемый контент: