Лого www.SiteHere.ru

Интересное вертикальное меню на CSS3

Интересное вертикальное меню на CSS3

Из этого урока Вы узнаете как создать красивое вертикальное меню с интересным эффектом.

Вы можете посмотреть пример, а также скачать архив с примером:

Посмотреть примерСкачать

Сейчас рассмотрим более подробно. Для начала в HTML вставим самый простой вид списка, которому в дальнейшем дадим свойства в CSS и он превратится в меню.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<ul class="ca-menu">
    <li>
        <a href="#">
            <span class="ca-icon">A</span>
            <div class="ca-content">
                <h2 class="ca-main">Пункт 1</h2>
            </div>
        </a>
    </li>
    <li>
        <a href="#">
            <span class="ca-icon">B</span>
            <div class="ca-content">
                <h2 class="ca-main">Пункт 2</h2>
            </div>
        </a>
    </li>
    <li>
        <a href="#">
            <span class="ca-icon">C</span>
            <div class="ca-content">
                <h2 class="ca-main">Пункт 3</h2>
            </div>
        </a>
    </li>
    <li>
        <a href="#">
            <span class="ca-icon">D</span>
            <div class="ca-content">
                <h2 class="ca-main">Пункт 4</h2>
            </div>
        </a>
    </li>
    <li>
        <a href="#">
            <span class="ca-icon">E</span>
            <div class="ca-content">
                <h2 class="ca-main">Пункт 5</h2>
            </div>
        </a>
    </li>
</ul>

А сейчас пропишем необходимые свойства в CSS файле:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
.ca-menu {
    padding:0;
    margin:20px auto;
    width: 500px;
}
.ca-menu li {
    width: 500px;
    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: 370px;
    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%);
    }
}

Кода действительно много, но это стоит того эффекта, который в итоге получается! 🙂

Успехов!

Интересное вертикальное меню на CSS3 5.00/5 (100.00%) 2 голос(ов)

Понравилась статья - расскажи друзьям! :)

7 комментариев к записи
  • Александр

    Здравствуйте!! А как сделать меню, скажем из 10 главных пунктов, каждый из которых в свою очередь открывает еще по 4, и те тоже открываются еще на 4!!! В общей сложности 240 пунктов меню!!!

     
    • Юрий Немец

      Добрый день, Александр!

      Чтобы реализовать меню, про которое вы говорите, необходимо создать вложенность ul в ul:

      <ul>
          <li>Пункт меню 1 (вложенность 0)</li>
          <li>Пункт меню 2 (вложенность 0)</li>
          <li>Пункт меню 3 (вложенность 0)</li>
          <li>
              <ul>
                  <li>Пункт меню 4 (вложенность 1)</li>
                  <li>Пункт меню 5 (вложенность 1)</li>
                  <li>
                      <ul>
                          <li>Пункт меню 6 (вложенность 2)</li>
                          <li>Пункт меню 7 (вложенность 2)</li>
                          <li>Пункт меню 8 (вложенность 2)</li>
                      </ul>
                  </li>
              </ul>
          </li>
          <li>Пункт меню 9 (вложенность 0)</li>
      </ul>

      Таким образом вам необходимо вложить еще один список в элемент прошлого списка. Но это лишь структура меню. Далее, необходимо задать свойства CSS, которые будут скрывать вложенные списки, и показывать их только при наведении.

      Если в CSS вы еще новичок, то рекомендую посмотреть как это реализовано на реальном примере: выпадающее меню на CSS3.

       
      • Александр

        Спасибо!!! Попробую разобраться))

         
        • Юрий Немец

          Если возникнут сложности, задавайте их здесь, прямо в комментариях! 🙂

           
          • Александр

            Добрый день!! Ну вроде сделал что то похожее на ваше меню, с несколькими вложениями!! При проверке в Notepad++  меню работает как надо со стилем, который я подгрузил к нему. Но вот проблема, вставляю сделанную структуру  на страничку, а именно в левый сайт бар, ну и CSS добавляю в основную табл. стилей, а на выходе вижу просто структуру меню!! Понимаю что видимо не правильно СSS подключаю, или там какие то нюансы  подключения CSS для сайт баров??

             
            • Юрий Немец

              Добрый день, Александр!

              Все правильно делаете. Нужно добавить в style.css вашей темы. Здесь единственный нюанс при подключении: ваши стили могут "перебиваться" стилями WordPress темы, которую вы используете.

               
  • Александр

    Основная работа у вас сделана, а вот что именно там придется добавить, это вопрос))) не подскажите??? 

     

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

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