Продам

stroka

Блог Людмилы Данило.Приглашаю на бесплатное обучение в школу "Успех в Internet PRO100"! Для всех кто хочет быть успешным! Здесь Вы можете оставить свои отзывы и комментарии.Подписывайтесь на мой блог!

понедельник, 19 октября 2015 г.

Горизонтальное выпадающее меню на ваш видео блог для Blogger

                      Здравствуйте друзья!
 Сегодня я вам расскажу и покажу (смотрите видео урок) на примере моего учебного видео блога  http://ludmiladanilo3.blogspot.de/   ,как поставить горизонтальное выпадающее меню на ваш видео блог,очень удобный элемент для Blogger ,служит как навигация по блогу ,состоит из набора ваших ссылок на ваши различные рубрики,страницы,сайты и т.д.





 Как всегда ,первым делом ,добавим стиль,зайдем в шаблон -изменить HTML-
находим  тег ]]></b:skin>   и выше вставляем этот  код стиля.
 Здесь в коде -вы можете изменить свой цвет градиента меню ,выделено красным и синим цветом -подберите свой цвет ,оттенки. Если вы измените цвет в коде (веделено зеленым цветом) ,то изменится цвет фона меню -при наведение на него курсор.
___________________________________________________________________________________________
#jsddm {
margin: 0;
padding: 15px;
z-index:1000000000;
position:relative;
}
#jsddm li {
float: left;
list-style: none;
font: 12px Tahoma, Arial;
}
#jsddm li a {
display: block;
white-space: nowrap;
margin:1px 3px;
border: 1px solid #AAAAAA;
background: #cccccc;
background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#cccccc));
background: -moz-linear-gradient(top, #ebebeb, #cccccc);
padding: 5px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: #ffffff 0 1px 0;
color: #363636;
font-size: 15px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}
#jsddm li a:hover {
background: #C8C8C8;
}
#jsddm li ul {
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white;
}
#jsddm li ul li {
float: none;
display: inline;
}
#jsddm li ul li a {
width: auto;
background: #CAE8FA;
}
#jsddm li ul li a:hover {
background: #A3CEE5;
}

______________________________________________________________________________________________________
 А теперь добавим Script , для этого найдем в шаблоне </head>  и чуть выше добавим этот скрипт:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
function jsddm_open()
{ jsddm_canceltimer();
jsddm_close();
ddmenuitem = $(this).find('ul').css('visibility', 'visible');}
function jsddm_close()
{ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}
function jsddm_timer()
{ closetimer = window.setTimeout(jsddm_close, timeout);}
function jsddm_canceltimer()
{ if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;}}
$(document).ready(function()
{ $('#jsddm > li').bind('mouseover', jsddm_open)
$('#jsddm > li').bind('mouseout', jsddm_timer)});
document.onclick = jsddm_close;
//]]>
</script>
________________________________________________________________________________
   А теперь друзья, найдем строку   <ul id='navigation'>   и вместо слова navigation   вставим jsddm
вставим следующий код ,копируйте код к себе в текстовый документ (блокнот) настраивайте его под себя и заменяйте свой предыдущий.
Здесь вместо слов ССылка (выделенно голубым цветом) вставляете свои ссылки на ваши страницы,рубрики и т.д.  ,а вместо слов желтым цветом их названия.

_________________________________________________________________________________________________________________________________________________________________

<li><a href="ССылка">Menu 1</a>
<ul>
<li><a href="ССылка">Подменю 1-1</a></li>
<li><a href="ССылка">Подменю 1-2</a></li>
<li><a href="ССылка">Подменю 1-3</a></li>
</ul>
</li>
<li><a href="ССылка">Menu 2</a>
<ul>
<li><a href="ССылка">Подменю 2-1</a></li>
<li><a href="ССылка">Подменю 2-2</a></li>
</ul>
</li>
<li><a href="ССылка">Menu 3</a>
<ul>
<li><a href="ССылка">Подменю 3-1</a></li>
<li><a href="ССылка">Подменю 3-2</a></li>
<li><a href="ССылка">Подменю 3-3</a></li>
<li><a href="ССылка">Подменю 3-4</a></li>
</ul>
</li>
<li><a href="ССылка">Menu 4</a></li>
<li><a href="ССылка">Menu 5</a></li>
<li><a href="http://videoblogludmiladanilo.blogspot.de/search/label/%D0%92%D1%81%D0%B5%20%D0%BE%20%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE%20%D0%B1%D0%BB%D0%BE%D0%B3%D0%B5%3A%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE%D1%83%D1%80%D0%BE%D0%BA%D0%B8?=9.html">Школа Видео Blogger(а)</a></li>
</li></ul>

__________________________________________________________________________________________________________________________________________________________________

И последний шаг ,увеличем и заменим цвет в поле навигации (меню) или вообще удалим.
находим строку  #navigation-wrapper {   и изменяем цвет ,а также размер  height:58px; line-height:59px;  подберите свой -если кто подзабыл ,посмотрите урок13,

 Нравится информация!? Поделитесь в соц.сети!
                        Желаю всем творческих успехов!

17 комментариев :

  1. Люда спасибо за ценную информацию.

    ОтветитьУдалить
  2. Спасибо Людмила за такую красоту !

    ОтветитьУдалить
  3. Спасибо,Людмила, за такой полезный урок по видеоблогу.

    ОтветитьУдалить
  4. Спасибо Людмила за ценную информацию, давно хотела и...получила!!!

    ОтветитьУдалить
  5. Спасибо Людмила! Благодаря Вашим урокам мы сможем намного улучшить вид наших блогов и сделать их более функциональными!

    ОтветитьУдалить
  6. Спасибо, Людмила! Обязательно воспользуюсь)))

    ОтветитьУдалить
  7. Спасибо, Информация интересная и полезная

    ОтветитьУдалить
  8. Людмила, спасибо за интересный и полезный урок!

    ОтветитьУдалить
  9. Люда, Спасибо. Мне точно это надо.

    ОтветитьУдалить
  10. Меню это очень важно, с Вашей помощью украшаем блог

    ОтветитьУдалить
  11. Благодарю, Людмила, урок превосходный!!!!

    ОтветитьУдалить
  12. Как вовремя я получила эту информацию. Огромное спасибо !

    ОтветитьУдалить
  13. Спасибо, Людмила за информацию, очень все доступно и доходчиво изложено!

    ОтветитьУдалить
  14. Людмила, благодарю, очень нужная информация.

    ОтветитьУдалить
  15. Людмила, никак не могу найти в коде строчку для третьей части. Подскажите, пожалуйста.

    ОтветитьУдалить
    Ответы
    1. Здравствуйте Светлана, эта строка находится сразу под строкой id= 'navigation-wrapper'> ,посмотрите видео https://www.youtube.com/watch?v=uYjgzwIZyrc&feature=youtu.be

      Удалить

.