Горизонтальное меню css с поиском по блогу

В прошлых  публикациях я писала как создать горизонтальное анимированное меню. Из этой статьи вы узнаете как сделать фиксированное горизонтальное меню с поиском.

 

Фиксированное горизонтальное меню с поиском в светлом тоне

 

При прокрутке страницы меню остается вверху под браузером и не исчезает с поля зрения. Такое меню всегда под рукой и на глазах у посетителя. Поиск работает хорошо.

 

Добавляется в блог легко и просто, как обычный гаджет. Заходим в админку блога > Дизайн > добавить гаджет > HTML/JavaScript > вставляем код.

 

<style>#stickey_footer { /* This will make your footer stay where it is */ background: none repeat scroll 0 0 #F8F7F0; 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 00CCFF;}/* 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: #000000; text-decoration: none;}#footer_menu li a:hover { color: #ffffff;}#footer_menu li span { display:none;}#google_translate_element { float:right; /* social icons positions */ width:auto; margin:9px 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="http://ucrainzi.blogspot.ru/">Название</a></li><li><a href="http://ucrainzi.blogspot.ru/p/blog-page_14.html">Название</a></li><li><a href="Ссылка на страницу">Название</a></li><li><a href="Ссылка на страницу">Название</a></li><li><a href="Ссылка на страницу">Название</a></li></ul><div id="google_translate_element"></div><div id='google_translate_element'></div><center><form id="google_translate_element" action="/search" style="display: inline;" method="get"><input id="searchBox" style="width: 200px;" value="Введите слово для поиска..." name="q" onclick="this.value=''" type="text"/><input id="searchButton" value="Искать" type="submit"/></form></center></div></div>

 

Горизонтальное фиксированное меню с поиском для blogger
Горизонтальное меню с поиском

 

 

Горизонтальное фиксированное меню с поиском для blogger

 

<style>#stickey_footer { /* This will make your footer stay where it is */ background: none repeat scroll 0 0 #00FFFF; 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 00CCFF;}/* 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;}#google_translate_element { float:right; /* social icons positions */ width:auto; margin:9px 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 id="google_translate_element"></div><div id='google_translate_element'></div><center><form id="google_translate_element" action="/search" style="display: inline;" method="get"><input id="searchBox" style="width: 200px;" value="Введите слово для поиска..." name="q" onclick="this.value=''" type="text"/><input id="searchButton" value="Искать" type="submit"/></form></center></div></div>

 

Фиксированное горизонтальное меню с поиском
Фиксированное горизонтальное меню с поиском в голубом цвете

 

Настройки:

 

Общий фон меню #00FFFF
Цвет текста меню #cccccc

 

С кодом можно поиграться и изменить цвета под дизайн своего блога.

 

Будь вместе с Я блоггер

 

Будь в тренде!

Получай материалы прямиком в свою почту

Я даю согласие на сбор и обработку своих персональных и не персональных данных согласно действующей на сайте — политике конфиденциальности.
* Нажимая на кнопку "Отправить", "Подпишись" или "Комментировать" Вы соглашаетесь с пользовательским соглашением.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Яндекс.Метрика