Фиксированное выпадающее меню с подпиской по email

(Последнее обновление: 29.08.2017)

Привет, дорогие друзья! Как и обещал в предыдущем посте (нижнее меню), сегодня делюсь с вами ещё одним плавающем меню при прокрутке страницы. На это раз будет верхнее фиксированное выпадающее меню с формой подписки по email. Навигационное меню с подпиской по электронной почте устанавливается в блог в два шага - добавляем, как всегда стили, где в коде CSS вы сможете настроить его под свой дизайн блога и сам код HTML. Скриншот данного меню прилагается:

Верхнее фиксированное выпадающее меню с подпиской по email

Надеюсь, для ваших потребностей вам хватит разделов и выпадающих подразделов меню, если что, можно добавить их самостоятельно.

Выпадающее фиксированное меню при прокрутке для Blogger

Для того, чтобы установить такое меню в свой блог, вам надо зайти: Шаблон - Изменить HTML, найти тег ]]></b:skin> (подробно вставка кода CSS в блог, тут) и чуть выше него добавит код стиля для меню:

/*****************************************
Name : Flaying menu Subscribe
******************************************/
#BDRS-menu {
border-top:3px solid #DC0B0A;
z-index:100;
top:0;
left:0;
width:100%;
height: 25px;
position:fixed;
margin:0 0 4px;
padding:8px 0 6px;
background-color: #111;box-shadow: 1px 0 5px #111;
}
#BDRS-menu .menuku{
margin: 0;
padding: 10px 0 0 0;
list-style: none;
background: #111;
box-shadow: 0 2px 1px #9c9c9c; 
}
#BDRS-menu li
{
float: left;
padding: 0 0 10px 0;
position: relative;
list-style-type: none;
}
#BDRS-menu a
{
float: left;
padding: 0 20px;
color: #999;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000; 
}
#BDRS-menu li:hover > a
{
color: #fafafa;
border-bottom:2px solid #99FF00;
margin-bottom:-2px;
}
*html #BDRS-menu li a:hover /* IE6 */
{
color: #fafafa;
}
#BDRS-menu li:hover > ul
{
display: block;
}
#BDRS-menu ul
{
list-style: none;
margin: 0 auto;
padding: 0;
display: none;
position: absolute;
top: 35px;
left: 0;
z-index: 99999;
border-radius: 5px;
max-width : 980px;
margin : 0 auto;
background-color: #444;
}
#BDRS-menu ul li
{
float: none;
margin: 0;
padding: 0;
display: block;
box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
width:150px;
}
#BDRS-menu ul li:last-child
{
box-shadow: none;
}
#BDRS-menu ul a
{
padding: 10px;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
*html #BDRS-menu ul a /* IE6 */
{
height: 10px;
width: 150px;
}
*:first-child+html #BDRS-menu ul a /* IE7 */
{
height: 10px;
width: 150px;
}
#BDRS-menu ul a:hover
{
background-color: #666666; 
}
#BDRS-menu ul li:first-child a
{
border-radius: 5px 5px 0 0;
}
#BDRS-menu ul li:first-child a:after
{
content: '';
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #444;
}
#BDRS-menu ul li:first-child a:hover:after
{
border-bottom-color: #666666;
}
#BDRS-menu ul li:last-child a
{
border-radius: 0 0 5px 5px;
}
#BDRS-menu:after
{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html #BDRS-menu { zoom: 1; } /* IE6 */
*:first-child+html #BDRS-menu { zoom: 1; } /* IE7 */
#BDRS-menu ul li:first-child a:after
{
content: '';
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #444;
}
#BDRS-menu ul li:first-child a:hover:after
{
border-bottom-color: #666666;
}
#BDRS-menu .right .BD-box {
margin-top : 0px;
padding : 0 10px;
float: right;
}
#BDRS-menu .right .BD-box input {
border : rgb(9, 149, 223) solid 1px;
font-size : 12px;
padding : 5px;
text-shadow : 1px 1px 0 #FFF;
width : 150px;
color : #996600;
font-family : georgia;
border : rgb(9, 149, 223) solid 1px;
border-color : #999900;
background-color: #F3F7F6;
}
#BDRS-menu .right .BD-box input:hover {
background-color: #FFFFFF;
}
#BDRS-menu .right .BD-box .submit {
border : rgb(9, 149, 223) solid 2px;
color : #000000;
cursor : pointer;
font-family : verdana;
font-size : 12px;
padding : 0 0 3px 0;
text-shadow : 0px 1px #999;
text-transform : uppercase;
width : 100px;
height : 25px;
background-color : #E81228;
border-color : #E7EFEE;
font-style: italic;
font-weight: normal;
}
#BDRS-menu .right .BD-box .submit:hover {
background-color :#999900;
color : #FFFFFF;
border-color : #996600;
text-shadow: none;
}/*** Blog Design CSS and ***/

Здесь, в коде выше настраиваем дизайн по своему. Сделаю видео чуть позже, покажу, как установить меню и подобрать цвета под ваш дизайн блога. Идём дальше. Следующий наш шаг, это находим закрывающий тег </body> и выше его вставляем этот код:

<!-- Flaying navigasi start -->
    <div class="content-wrapper">
      <ul id="BDRS-menu" class="menuku">
        <li>
          <a href="здесь ссылка " target="_self" rel="nofollow" title="home">
            Главная
          </a>
        </li>
        <li>
          <a href="#" rel="nofollow" title="about">
            Меню
          </a>
          <ul>
            <li>
              <a href="здесь ссылка" target="_blank" rel="nofollow" title="profil">
                Подменю 1
              </a>
            </li>
            <li>
              <a href="здесь ссылка" target="_blank" rel="nofollow" title="album">
                Подменю 2
              </a>
            </li>
            <li>
              <a href="здесь ссылка" target="_blank" rel="nofollow" title="job">
                Подменю 3
              </a>
            </li>
            <li>
              <a href="здесь ссылка" target="_blank" rel="nofollow" title="skill">
                Подменю 4
              </a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#" rel="nofollow" title="kategori">
            Категории
          </a>
          <ul>
            <li>
              <a href="здесь ссылка" target="_blank" rel="nofollow" title="tutorial">
                Название 1
              </a>
            </li>
            <li>
              <a href="здесь ссылка" target="_blank" rel="nofollow" title="trik bloger">
                Название 2
              </a>
            </li>
            <li>
              <a href="здесь ссылка" target="_blank" rel="nofollow" title="blogspot">
                Название 3
              </a>
            </li>
            <li>
              <a href="здесь ссылка" target="_blank" rel="nofollow" title="wordpress">
                Название 4
              </a>
            </li>
            <li>
              <a href="здесь ссылка" target="_blank" rel="nofollow" title="joomla">
                Название 5
              </a>
            </li>
            <li>
              <a href="здесь ссылка" target="_blank" rel="nofollow" title="web design">
                Название 6
              </a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#" rel="nofollow" title="kontakт">
            Контакт
          </a>
          <ul>
            <li>
              <a href="здесь ссылка" target="_blank" rel="nofollow" title="gplus">
                Gplus
              </a>
            </li>
            <li>
              <a href="здесь ссылка" target="_blank" rel="nofollow" title="facebook">
                Facebook
              </a>
            </li>
            <li>
              <a href="здесь ссылка" target="_blank" rel="nofollow" title="twitter">
                Twitter
              </a>
            </li>
          </ul>
        </li>
        <li>
          <a href="здесь ссылка" target="_blank" rel="nofollow" title="sitemap">
            Карта блога
          </a>
        </li>
        <li>
          <a href="здесь ссылка" target="_blank" rel="nofollow" title="disclaimer">
            О блоге
          </a>
        </li>
        <li>
          <a href="здесь ссылка" target="_blank" rel="nofollow" title="privacy policy">
            Обо мне
          </a>
        </li>
        <li>
          <a href="здесь ссылка" target="_blank" rel="nofollow" title="link exchange">
            Ещё раздел
          </a>
        </li>
        <span class='right'>
          <span class='BD-box'>
            <form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=ID FEEDBURNER &apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=600,height=550&apos;);return true' target='popupwindow'>
              <img alt="feedburner" src="https://lh5.googleusercontent.com/--h68rQVZ4V0/UgiYYVLX7XI/AAAAAAAABro/MDwIDY0vTY8/h77/feedburner.png" title='feedburner' style="margin-bottom:-9px;"/>
              <input name='email' type='text' class='required email' onblur='if (this.value == &apos;&apos;) this.value = &apos;Enter email here !!&apos;;' onclick='if (this.value == &apos;Enter email here !!&apos;) this.value = &apos;&apos;;' value='Введите email !!' />
              <input class='submit' id='submit' name='submit' title='subscribe' type='submit' value='SUBSCRIBE'/>
              <input name='uri' type='hidden' value='ID FEEDBURNER'/>
              <input name='loc' type='hidden' value='ru_RU'/>
            </form>
          </span>
        </span>
      </ul>
    </div>
    <br />
    <!-- Flaying navigasi End -->

Заполняем меню ссылками, названиями и не забываем в двух местах формы подписки по email указать ваш фид, вместо ID FEEDBURNER. Вот пожалуй и всё, вроде ни чего не забыл. Думаю, кому нибудь пригодиться данное меню. Обратите внимания, также и на другие различные менюшки которые есть у меня в блоге, их достаточное количество и на любой вкус. Пользуйтесь поиском по блогу или в Содержании.

До новых встреч, товарищи и просто хорошие люди. Удачи.