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