Сегодня 19 апреля, пятница

Какой рейтинг вас больше интересует?

получить код

Главная / Каталог блогов / Cтраница блогера Блог для блогов - создание блога на blogspot / Запись в блоге

	Блог для блогов - создание блога на blogspot Голосов: 1 Адрес блога: http://bdblogov.blogspot.com/ Добавлен: 2013-06-02 03:52:18 блограйдером Olga28

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

2013-09-25 15:28:00 (читать в оригинале)

Сегодня поговорим об ещё одном меню для блога-анимированном. Установив такое меню, не надо никакой шапки, нет необходимости убирать Navbar, можно использовать не только как меню, а написать к примеру рекламный текст и дать ссылку на свою партнерскую программу. При прокрутке страницы вниз меню не исчезает, всегда на виду, что согласитесь очень удобно. Есть разные способы создания такого меню, как например flash, но нужно настраивать стили CSS. Пыталась разобраться, но пока не уверена, получится ли. Как только пойму, что к чему, обязательно опубликую пост по этой теме. А сегодня мы вставим код меню привычным нам способом, при помощи скрипта 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>

<li><a href="Ссылка на страницу">Название</a></li>

</ul>

</div></div>

#1D1D1D - это цвет фона меню, #2b2a2a - цвет при наведении мыши;

Ссылка на страницу - URL адрес, Название - заголовок сообщения;

heidgt:45px; - высота меню, left:50%; - отступ от левого края;

Вы можете добавлять сколько угодно ссылок, добавляя строку

<li><a href="адрес">название</a></li>

На этом все, пишите, комментируйте, всего доброго.

Меняем форму комментариев;

Кнопки для дизайна блога;

Тэги: анимированное, меню

Блограйдеров
14489

Блогов
219902
(+0 сегодня)

Сообществ
1309
(+0 сегодня)

ЖЖ все стерпит
по сумме баллов (758) в категории «Истории»

Категория «Субкультуры»

Взлеты Топ 5


+221	238	Yurenzo
+213	249	Идеи подарков. Что и где купить, как сделать своими руками. Инте
+198	211	Ein_Brennende_Komet
+185	208	Russian parkour
+139	216	Портал роллеров Roller-style.ru: Новости

Падения Топ 5


-5	6	navesele
-21	16	Субкультура Онлайн
-182	3	mg5

Загрузка...

BlogRider.ru не имеет отношения к публикуемым в записях блогов материалам. Все записи
взяты из открытых общедоступных источников и являются собственностью их авторов.