Ранее вы уже узнали, как сделать горизонтальное выпадающее меню, сегодня я расскажу вам про создание вертикального выпадающего меню на Jquery для blogspot.
Посмотрите, как выглядит это меню.
..
Как вставить вертикальное выпадающее меню в blogspot
- В админке blogspot перейти во вкладку “Дизайн”
- Создать новый элемент 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>
Примечание:
- Вы можете вынести часть кода, заключенную между <style> и </style> из гаджета HTML / Javascript в шаблон Blogspot и вставить его перед отрезком кода ]]></b:skin>.
- Вы можете изменить ширину меню, изменив width
- Если вы уже добавили плагин Jquery в шаблон своего блога, то удалите скрипт из представленного выше кода (выделен светло-зеленым цветом).
- Если вы хотите изменить цвет кнопок меню, то вам нужно изменить прямые ссылки на изображения (выделены желтым в коде). Первая ссылка (заканчивается на 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
Прямая ссылка на изображение: 
Ссылка на изображение: Как сделать кнопки для вертикального меню
Если вы владеете фотошоп или другим редактором графики, то вы можете самостоятельно сделать кнопки для вертикального выпадающего меню и изменить их цвет в тон вашего блога.
- Для этого создайте в Adobe Photoshop документ шириной 6 px и высотой 32 px, разрешение 32 dpi, формат RGB, цвет фона белый.
- Установите цвета переднего и заднего плана в зависимости от того какой переход цвета вы хотите сделать (градиент).
- Возьмите линейный градиент и протяните сверху вниз с зажатой клавишей Shift (для того, чтобы выполнить градиент строго вертикально).
- Сохраните изображение. Файл –> Сохранить как… в формате Jpeg. Так мы получили кнопку до наведения.
- Теперь вернемся к работе над нашим документом. Изображение –> Коррекция –> Яркость / Контрастность. Прибавьте немного яркости, передвинув соответствующий ползунок немного вправо.
- Сохраните документ снова, но уже под новым именем. Это будет кнопка после наведения курсора.
- Загрузите обе кнопки на фотохостинг и подставьте значения ссылок на изображение в код вертикального меню.
Если вы не владеете фотошопом, то можете написать в комментариях кнопки каких цветов вам нужны (лучше укажите точные значения в одной из систем кодировки цвета). Определить цвет вы можете, воспользовавшись программой Colorpic или таблицей цвета html.
Скажите пожалуйста, какой адрес нужно вставить здесь:Пункт 1,,,здесь:Пункт 4,,, и здесь: Пункт 2 Это же пункты меню, из которых выпадают подменюшки. При нажатии на эти пункты не должно же окрываться какая-то страница. Какую же ссылку тогда задавать? На подразделы я задаю ссылку подразделов, на простые разделы я задаю ссылку этих же простых разделов. А что здесь?
Наталка Михайлівна, собственно что хотите, то и ставьте - вы же хозяйка блога ))
Например, можно давать ссылку на подраздел - определенную страницу, а ссылку на пункт - это станица определенной метки. Если вам это не нужно - просто уберите ссылку, а точнее отрезок кода до "Пункт 1", "Пунк 2"... "Пункт n" - "<a href="#">" и после "</a>".
не подскажите что в коде надо изменить чтоб это меню в горизонтальное превратить?
На днях я напишу новую запись с красивым горизонтальным меню
Новое горизонтальное меню для блога готово
спасибо! крутое меню получилось, буду пользоваться! Дизай то же здорово смотриться, теперь действительно больше на учебник электронный похоже!
Я рада, что понравился дизайн. Мой старый шаблон давно морально устарел, но все не доходили до него руки...
Скажите пожалуйста, если распознаете профессиональным взглядом, в какой программе создавался сайт aliexpress.com меня интересует вертикальное всплывающее меню такого типа. Заранее благодарен.
Для определения cms любого сайта есть специальные сервисы, например, builtwith.com
Даже на нем я не смогла понять на каком движке работает aliexpress, скорее всего cms специально разрабатывали под этот магазин. Т.е. склоняюсь к мысли, что движок самописный.