Сегодня 25 ноября, понедельник

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

получить код

Главная / Каталог блогов / 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>

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

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

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

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

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

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

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

ЖЖ все стерпит
по количеству голосов (152) в категории «Истории»

Категория «Природа»

Взлеты Топ 5


+344	353	ГОРОСКОП
+342	418	glois-en101
+318	355	ALTAR-NIK
+308	361	Кладезь информации! djrich.info
+284	351	Петербуржец

Падения Топ 5


-2	87	Обойдемся без болезней
-4	8	SUPER ANI - Информационно-познавательный проект.
-16	396	Чтобы выжить
-17	2	Красное Море Дайвинг
-18	295	Marina Pletneva

Загрузка...

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