Сегодня я расскажу как создать вертикальное меню при помощи CSS, которое можно использовать как на сайтах под управлением CMS Jimdo, так и на других веб-проектах. В этом меню использовались другие нестандартные символьные шрифты, но реализовывать в уроке я их не стал. Почему решил написать урок, дело в том, что сделать собственно вертикальное меню средствами Jimdo невозможно, если только это будет второй уровень, но он не совсем красиво вписывается в дизайн шаблона. Отсюда у меня и желание возникло про написание инструкции.
Шаг 1. Заключаем CSS-код в <style> ... </style>
Чтобы было понятней, объясню на пальцах. Наш css-код необходимо вставить в head-область сайта посредством настройки CMS Jimdo --> Обработать Head. Заключаем CSS между тегами
<style> css код необходимо прописать здесь </style>
На этом внесение изменений в head можно закончить. Если Вы хорошо учили в школе инглиш, то сообразите какие параметры в пикселях необходимо заменить в том случае, если вас не устроят размеры меню (я имею ввиду длину и высоту). Сочувствую тем, кто английский вообще не изучал :(
.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%);
}
}
Шаг 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>
На этом я и закончу свой небольшой урок. Больше даже не урок, а консультация.
Всем, кому урок был полезен, оставляйте свои комментарии.