Вертикальное выпадающее меню для 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.

Рубрика: CSSМетки:

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

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

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

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

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *