»

 Будь в курсе событий:

vertikalnoe-menu-v-saidbare

Вертикальное меню в сайдбаре
Вертикальное меню в сайдбаре

Иной вариант кастомного вертикального меню для Jimdo. Уже были случаи применения его на сайтах, поэтому думаю, что урок оказался не напрасным.

Вертикальное меню в сайдбаре

Сегодня я расскажу как создать вертикальное меню при помощи CSS, которое можно использовать как на сайтах под управлением CMS Jimdo, так и на других веб-проектах. В этом меню использовались другие нестандартные символьные шрифты, но реализовывать в уроке я их не стал. Почему решил написать урок, дело в том, что сделать собственно вертикальное меню средствами Jimdo невозможно, если только это будет второй уровень, но он не совсем красиво вписывается в дизайн шаблона. Отсюда у меня и желание возникло про написание инструкции.

Шаг 1. Заключаем CSS-код в <style> ... </style>

Чтобы было понятней, объясню на пальцах. Наш css-код необходимо вставить в head-область сайта посредством настройки CMS Jimdo --> Обработать Head. Заключаем CSS между тегами 

 

<style> css код необходимо прописать здесь </style>

 

На этом внесение изменений в head можно закончить. Если Вы хорошо учили в школе инглиш, то сообразите какие параметры в пикселях необходимо заменить в том случае, если вас не устроят размеры меню (я имею ввиду длину и высоту). Сочувствую тем, кто английский вообще не изучал :(

css
.ca-menu{
    padding:0;
    margin:20px auto;
    width: 550px;
}
.ca-menu li{
    width: 550px;
    height: 100px;
    overflow: hidden;
    position: relative;
    display: block;
    background: #fff;
    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    margin-bottom: 4px;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;
}
.ca-menu li:last-child{
    margin-bottom: 0px;
}
.ca-menu li a{
    text-align: left;
    width: 100%;
    height: 100%;
    display: block;
    color: #333;
    position: relative;
}
.ca-icon{
    font-family: 'WebSymbolsRegular', cursive;
    font-size: 20px;
    text-shadow: 0px 0px 1px #333;
    line-height: 90px;
    position: absolute;
    width: 90px;
    left: 20px;
    text-align: center;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;
}
.ca-content{
    position: absolute;
    left: 120px;
    width: 470px;
    height: 60px;
    top: 20px;
}
.ca-main{
    font-size: 30px;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;
}
.ca-sub{
    font-size: 14px;
    color: #666;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;
}
.ca-menu li:hover{
    background: #e1f0fa;
}
.ca-menu li:hover .ca-icon{
    font-size: 40px;
    color: #259add;
    opacity: 0.8;
    text-shadow: 0px 0px 13px #fff;
}
.ca-menu li:hover .ca-main{
    opacity: 1;
    color:#2676ac;
    -webkit-animation: moveFromTop 300ms ease-in-out;
    -moz-animation: moveFromTop 300ms ease-in-out;
    -ms-animation: moveFromTop 300ms ease-in-out;
}
.ca-menu li:hover .ca-sub{
    opacity: 1;
    -webkit-animation: moveFromBottom 300ms ease-in-out;
    -moz-animation: moveFromBottom 300ms ease-in-out;
    -ms-animation: moveFromBottom 300ms ease-in-out;
}
@-webkit-keyframes moveFromBottom {
    from {
        opacity: 0;
        -webkit-transform: translateY(200%);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }
}
@-moz-keyframes moveFromBottom {
    from {
        opacity: 0;
        -moz-transform: translateY(200%);
    }
    to {
        opacity: 1;
        -moz-transform: translateY(0%);
    }
}
@-ms-keyframes moveFromBottom {
    from {
        opacity: 0;
        -ms-transform: translateY(200%);
    }
    to {
        opacity: 1;
        -ms-transform: translateY(0%);
    }
}

@-webkit-keyframes moveFromTop {
    from {
        opacity: 0;
        -webkit-transform: translateY(-200%);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }
}
@-moz-keyframes moveFromTop {
    from {
        opacity: 0;
        -moz-transform: translateY(-200%);
    }
    to {
        opacity: 1;
        -moz-transform: translateY(0%);
    }
}
@-ms-keyframes moveFromTop {
    from {
        opacity: 0;
        -ms-transform: translateY(-200%);
    }
    to {
        opacity: 1;
        -ms-transform: translateY(0%);
    }
}
style.css
Cascading Style Sheet файл 3.6 KB

Шаг 2. Вставляем HTML-код на Jimdo как Widget / HTML

Немного поясню. Меню конечно же лучше вставлять в сайдбар, предварительно убрав все ненужное из этой области, для лучшего отображения вертикальной навигации. Как я уже говорил, подгонять размеры - это ваше личное дело. Если что-то не понятно совсем, то постараюсь дать краткий ответ по теме.

 

Менять меню очень просто. Вам необходимо только уметь копировать и вставлять, можно еще изредка удалять :)

 

<li> та часть кода, которую вы можете менять </li>

html
<ul class="ca-menu">
    <li>
        <a href="http://#"><span class="ca-icon">1</span></a>
        <div class="ca-content">
            <h2 class="ca-main">
                Выдающийся сервис
            </h2>

            <h3 class="ca-sub">
                Персонально для вас
            </h3>
        </div>
    </li>

    <li>
        <a href="http://#"><span class="ca-icon">2</span></a>
        <div class="ca-content">
            <h2 class="ca-main">
                Креативное сочинительство
            </h2>

            <h3 class="ca-sub">
                Продвинутые технологии
            </h3>
        </div>
    </li>

    <li>
        <a href="http://#"><span class="ca-icon">3</span></a>
        <div class="ca-content">
            <h2 class="ca-main">
                Инфографика обучения
            </h2>

            <h3 class="ca-sub">
                Понятная визуализация
            </h3>
        </div>
    </li>

    <li>
        <a href="http://#"><span class="ca-icon">4</span></a>
        <div class="ca-content">
            <h2 class="ca-main">
                Искусная команда
            </h2>

            <h3 class="ca-sub">
                Профессионалы в действии
            </h3>
        </div>
    </li>

    <li>
        <a href="http://#"><span class="ca-icon">5</span></a>
        <div class="ca-content">
            <h2 class="ca-main">
                Безусловная поддержка
            </h2>

            <h3 class="ca-sub">
                24/7 для ваших вопросов
            </h3>
        </div>
    </li>
</ul>
vertical_menu.html
HTML документ 1.6 KB
  • 1

    Выдающийся сервис

    Персонально для вас

  • 2

    Креативное сочинительство

    Продвинутые технологии

  • 3

    Инфографика обучения

    Понятная визуализация

  • 4

    Искусная команда

    Профессионалы в действии

  • 5

    Безусловная поддержка

    24/7 для ваших вопросов

На этом я и закончу свой небольшой урок. Больше даже не урок, а консультация.

 

Всем, кому урок был полезен, оставляйте свои комментарии.

 

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

Комментарии: 7
  • #1

    1601sait (Понедельник, 14 Октябрь 2013 17:17)

    круто спс

  • #2

    poplavok (Вторник, 22 Октябрь 2013 12:53)

    в опере не работает падение текста

  • #3

    Farengate Pulse (Вторник, 22 Октябрь 2013 16:24)

    Все работает, обновляйте ПО.
    ==================================
    poplavok (Вторник, 22 Октябрь 2013 12:53)
    (Вторник, 22 Октябрь 2013 12:53)
    в опере не работает падение текста
    ==================================

  • #4

    Алина (Среда, 18 Декабрь 2013 13:13)

    объясните про 1 шаг, где конкретно открыть надо. У меня когда открою ,,настройки- обработать head,, есть это <meta name='yandex-verification' content='5769be4da212bb67' /> а не это <style> ......................... </style>. Может я не там открываю?

  • #5

    Farengate Pulse (Среда, 18 Декабрь 2013 13:19)

    Строку <meta name='yandex-verification' content='5769be4da212bb67' /> удалять не нужно, просто сразу после этого кода пишите строку <style> ......................... </style> и вставляйте по примеру код.
    ==================================
    Алина (Среда, 18 Декабрь 2013 13:13)
    объясните про 1 шаг, где конкретно открыть надо. У меня когда открою ,,настройки- обработать head,, есть это <meta name='yandex-verification' content='5769be4da212bb67' /> а не это <style> ......................... </style>. Может я не там открываю?
    ==================================

  • #6

    skayvin163 (Среда, 21 Май 2014 08:50)

    Привет
    все съезжает в левую часть сайта в чем проблема?в сайт баре нет ни чего

  • #7

    Farengate Pulse (Суббота, 24 Май 2014 17:59)

    покажите что у вас получилось, тогда я пойму что вы делаете неправильно