2013-01-08

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

вертикальное выпадающее меню
Ранее вы уже узнали, как сделать горизонтильное выпадающее меню, сегодня я расскажу вам про создание вертикального выпадающего меню на 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(http://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(http://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(http://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 голубого цвета:

  • Цвет кнопки до наведения:
       прямая ссылка на изображение:
    http://img-fotki.yandex.ru/get/6439/40839264.9/0_8e97d_fba57388_XS.jpg
  • Цвет кнопки после наведения курсора:

    прямая ссылка на изображение:
    http://img-fotki.yandex.ru/get/5630/40839264.9/0_8e97e_706a933d_XS.jpg
Вертикальное меню серого цвета:

  • Цвет кнопки до наведения:
    Прямая ссылка на изображение:
    http://img-fotki.yandex.ru/get/6425/40839264.9/0_8e984_9a411be8_XS.jpg
  • Цвет кнопки после наведения:
    Ссылка на изображение:
    http://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.

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

Наталка Михайлівна Зуб комментирует...

Скажите пожалуйста, какой адрес нужно вставить здесь:Пункт 1,,,здесь:Пункт 4,,, и здесь: Пункт 2 Это же пункты меню, из которых выпадают подменюшки. При нажатии на эти пункты не должно же окрываться какая-то страница. Какую же ссылку тогда задавать? На подразделы я задаю ссылку подразделов, на простые разделы я задаю ссылку этих же простых разделов. А что здесь?

Mycrib комментирует...

Наталка Михайлівна, собственно что хотите, то и ставьте - вы же хозяйка блога ))
Например, можно давать ссылку на подраздел - определенную страницу, а ссылку на пункт - это станица определенной метки. Если вам это не нужно - просто уберите ссылку, а точнее отрезок кода до "Пункт 1", "Пунк 2"... "Пункт n" - "<a href="#">" и после "</a>".

Анонимный комментирует...

не подскажите что в коде надо изменить чтоб это меню в горизонтальное превратить?

Mycrib комментирует...

На днях я напишу новую запись с красивым горизонтальным меню

Mycrib комментирует...

Новое горизонтальное меню для блога готово

Анонимный комментирует...

спасибо! крутое меню получилось, буду пользоваться! Дизай то же здорово смотриться, теперь действительно больше на учебник электронный похоже!

Mycrib комментирует...

Я рада, что понравился дизайн. Мой старый шаблон давно морально устарел, но все не доходили до него руки...

Анонимный комментирует...

Скажите пожалуйста, если распознаете профессиональным взглядом, в какой программе создавался сайт aliexpress.com меня интересует вертикальное всплывающее меню такого типа. Заранее благодарен.

Иванова Наталья комментирует...

Для определения cms любого сайта есть специальные сервисы, например, builtwith.com
Даже на нем я не смогла понять на каком движке работает aliexpress, скорее всего cms специально разрабатывали под этот магазин. Т.е. склоняюсь к мысли, что движок самописный.

Отправить комментарий

Комментарии, содержащие ненормативную лексику, спам, оскорбления, публиковаться не будут. Ели вы хотите опубликовать код в комментарии, то воспользуйтесь encoder HTML