Вертикальное выпадающее меню для Blogspot

Ранее вы уже узнали, как сделать горизонтальное выпадающее меню, сегодня я расскажу вам про создание вертикального выпадающего меню на Jquery для blogspot.

Посмотрите, как выглядит это меню.

..

Как вставить вертикальное выпадающее меню в blogspot

1. В админке blogspot перейти во вкладку “Дизайн”
2. Создать новый элемент HTML / Javascript и вставить в него код:
   

   <style>

   /*======= Vertical Drop Down Menu By Helper Blogger ========= */

   .ddsmoothmenu-v ul {

       margin: 0;

       padding: 0;

       width: 250px;

   /* Main Menu Item widths */

       list-style-type: none;

       font: bold 12px Verdana;

       border-bottom: 0px solid #ccc;

   }

   .ddsmoothmenu-v ul li {

       position: relative;

   }

   .downarrowclass {

       position: absolute;

       top: 12px;

       right: 7px;

   }

   .rightarrowclass {

       position: absolute;

       top: 10px;

       right: 5px;

   }

       /* Top level menu links style */

   .ddsmoothmenu-v ul li a {

       display: block;

       overflow: auto;

           /*force hasLayout in IE7 */

       height: 32px;

       color: white;

       text-decoration: none;

       padding: 5px 5px 5px 25px;

       border-bottom: 0px solid #778;

       border-right: 0px solid #778;

   }

   .ddsmoothmenu-v ul li a:link, .ddsmoothmenu-v ul li a:visited, .ddsmoothmenu-v ul li a:active {

       color: white;

       background-image: url(https://3.bp.blogspot.com/-VCtcZunZJ2U/T9W7MM1uIXI/AAAAAAAAB9o/yVJ0Cad3Q0g/s1600/tab_bg.gif);

       height: 22px;

       background-repeat: repeat-x;

       background-position: left center;

       margin-bottom: 1px;

   }

   .ddsmoothmenu-v ul li a.selected {

           /*CSS class that's dynamically added to the currently active menu items' LI A element*/

       color: white;

       background-image: url(https://2.bp.blogspot.com/-F0-PrDUYlX4/T9W7MrjME5I/AAAAAAAAB9w/0CLQurrHUjM/s1600/tabhover_bg.gif);

       height: 22px;

       background-repeat: repeat-x;

       background-position: left center;

   }

   .ddsmoothmenu-v ul li a:hover {

       color: white;

       background-image: url(https://2.bp.blogspot.com/-F0-PrDUYlX4/T9W7MrjME5I/AAAAAAAAB9w/0CLQurrHUjM/s1600/tabhover_bg.gif);

       height: 22px;

       background-repeat: repeat-x;

       background-position: left center;

   }

       /*Sub level menu items */

   .ddsmoothmenu-v ul li ul {

       position: absolute;

       width: 170px;

           /*Sub Menu Items width */

       height: 22px;

       top: 0;

       font-weight: normal;

       visibility: hidden;

   }

       /* Holly Hack for IE */

   * html .ddsmoothmenu-v ul li {

       float: left;

       height: 1%;

   }

   * html .ddsmoothmenu-v ul li a {

       height: 1%;

   }

   /*======= Vertical Drop Down Menu By Helper Blogger ========= */

   </style>

   <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
   
   <script type="text/javascript" src="http://code.helperblogger.com/hb-smooth-menu.js"></script> <script type="text/javascript">

       })

   </script>

   <script type="text/javascript">

       ddsmoothmenu.init({

           mainmenuid: "smoothmenu2",

           //Menu DIV id

           orientation: 'v',

           //Horizontal or vertical menu: Set to "h" or "v"

           classname: 'ddsmoothmenu-v',

           //class added to menu's outer DIV

           //customtheme: ["#804000", "#482400"],

           contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]

       })

   </script>

   <div id="smoothmenu2" class="ddsmoothmenu-v">

        <ul>

           <li>

               <a href="#">Home</a>

           </li>

           <li>

               <a href="#">Пункт 1</a>

               <ul>

                   <li>

                       <a href="#">Подпункт 1.1</a>

                   </li>

                   <li>

                       <a href="#">Подпункт 1.2</a>

                   </li>

               </ul>

           </li>

           <li>

               <a href="#">Пункт 2</a>

               <ul>

                   <li>

                       <a href="#">Подпункт 2.1</a>

                   </li>

                   <li>

                       <a href="#">Подпункт 2.2</a>

                   </li>

               </ul>

           </li>

           <li>

               <a href="#">Пункт 3</a>

           </li>

           <li>

               <a href="#">Пункт 4</a>

               <ul>

                   <li>

                       <a href="#">Подпункт 4.1</a>

                   </li>

               </ul>

           </li>

           <li>

               <a href="#">О блоге</a>

           </li>

       </ul>

       <br style="clear: left" />

   </div>

Примечание:

1. Вы можете вынести часть кода, заключенную между <style> и </style> из гаджета HTML / Javascript в шаблон Blogspot и вставить его перед отрезком кода ]]></b:skin>.
2. Вы можете изменить ширину меню, изменив width
3. Если вы уже добавили плагин Jquery в шаблон своего блога, то удалите скрипт из представленного выше кода (выделен светло-зеленым цветом).
4. Если вы хотите изменить цвет кнопок меню, то вам нужно изменить прямые ссылки на изображения (выделены желтым в коде). Первая ссылка (заканчивается на http://…/tab_bg.gif) отвечает за кнопки меню до наведения курсора, вторая ссылка (http://…/tabhover_bg.gif) отвечает за внешний вид кнопки после наведения курсора.  Ниже приведу несколько примеров кнопок вертикального меню разных цветов.

Вертикальное выпадающее меню на Jquery голубого цвета:

• Цвет кнопки до наведения:
  
     прямая ссылка на изображение:

  
  https://img-fotki.yandex.ru/get/6439/40839264.9/0_8e97d_fba57388_XS.jpg

• Цвет кнопки после наведения курсора:
  
  

  
  прямая ссылка на изображение:

  
  https://img-fotki.yandex.ru/get/5630/40839264.9/0_8e97e_706a933d_XS.jpg

Вертикальное меню серого цвета:

• Цвет кнопки до наведения:
  
  Прямая ссылка на изображение:

  
  https://img-fotki.yandex.ru/get/6425/40839264.9/0_8e984_9a411be8_XS.jpg

• Цвет кнопки после наведения:
  
  Ссылка на изображение:

  
  https://img-fotki.yandex.ru/get/5645/40839264.9/0_8e985_34612754_XS.jpg

Как сделать кнопки для вертикального меню

Если вы владеете фотошоп или другим редактором графики, то вы можете самостоятельно сделать кнопки для вертикального выпадающего меню и изменить их цвет в тон вашего блога.

1. Для этого создайте в Adobe Photoshop документ шириной 6 px и высотой 32 px, разрешение 32 dpi, формат RGB, цвет фона белый.
2. Установите цвета переднего и заднего плана в зависимости от того какой переход цвета вы хотите сделать (градиент).
3. Возьмите линейный градиент и протяните сверху вниз с зажатой клавишей Shift (для того, чтобы выполнить градиент строго вертикально).
4. Сохраните изображение. Файл –> Сохранить как… в формате Jpeg. Так мы получили кнопку до наведения.
5. Теперь вернемся к работе над нашим документом. Изображение –> Коррекция –> Яркость / Контрастность. Прибавьте немного яркости, передвинув соответствующий ползунок немного вправо.
6. Сохраните документ снова, но уже под новым именем. Это будет кнопка после наведения курсора.
7. Загрузите обе кнопки на фотохостинг и подставьте значения ссылок на изображение в код вертикального меню.

Если вы не владеете фотошопом, то можете написать в комментариях кнопки каких цветов вам нужны (лучше укажите точные значения в одной из систем кодировки цвета). Определить цвет вы можете, воспользовавшись программой Colorpic или таблицей цвета html.