Лого www.SiteHere.ru

CSS3 меню в стиле минимализм

CSS3 меню в стиле минимализм

Как вы уже, наверное, слышали CSS3 анимация является мощным инструментом, который позволяет создавать анимацию без необходимости применения дополнительных скриптов на странице. И в этом уроке с помощью использования анимации мы создадим симпатичное меню, которое не будет занимать много места на сайте. Обычно такое меню делают фиксированным справа. Когда страницу прокручиваешь — меню остается постоянно справа.

Пример меню можно увидеть здесь:

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

HTML часть

HTML каркас меню — это неупорядоченный список. Таким образом обычно и создаются меню, потому их легко оформлять и настраивать. Внутри ссылки находится элемент <span>, который изначально не виден, а появляется только при наведении. Каждая ссылка имеет свой уникальный класс, для того чтобы мы могли задавать фон при наведении для каждой ссылки:

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
<ul id="navigationMenu">
    <li>
        <a class="home" href="#">
            <span>Главная</span>
        </a>
    </li>
 
    <li>
        <a class="about" href="#">
            <span>Об авторе</span>
        </a>
    </li>
 
    <li>
        <a class="services" href="#">
            <span>Сервисы</span>
         </a>
    </li>
 
    <li>
    	<a class="portfolio" href="#">
            <span>Портфолио</span>
        </a>
    </li>
 
    <li>
    	<a class="contact" href="#">
            <span>Контакты</span>
        </a>
    </li>
</ul>

CSS часть

Каркас меню готов и сейчас мы можем приступать к оформлению меню. Меню будет работать даже в старых браузерах(даже в IE6).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
* {
    margin:0;
    padding:0;
}
 
body {
    font-size:14px;
    color:#666;
    background:#111 no-repeat;
 
    /* CSS3 градиент фона */
    background-image:-moz-radial-gradient(center -100px 45deg, circle farthest-corner, #444 150px, #111 300px);
    background-image:-webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111));
 
    font-family:Arial, Helvetica, sans-serif;
}
 
#navigationMenu li {
    list-style:none;
    height:39px;
    padding:2px;
    width:40px;
}

Для задания фона мы изначально сделали который будет как запасной, а затем добавили два радиальных градиента на CSS3. Если браузер посетителя не поддерживает градиенты, он просто будет игнорировать их и показывать просто цвет фона.

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
#navigationMenu span {
    /* Свойства контейнера */
    width:0;
    left:38px;
    padding:0;
    position:absolute;
    overflow:hidden;
 
    /* Свойства текста */
    font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
    font-size:18px;
    font-weight:bold;
    letter-spacing:0.6px;
    white-space:nowrap;
    line-height:39px;
    -webkit-transition: 0.25s;
    -moz-transition: 0.25s;
    transition: 0.25s;
}
 
#navigationMenu a {
    background:url('img/navigation.jpg') no-repeat;
    height:39px;
    width:38px;
    display:block;
    position:relative;
}
 
/* Стили при наведении */
 
#navigationMenu a:hover span { 
    width:auto; 
    padding:0 20px;
    overflow:visible; 
}
 
#navigationMenu a:hover {
    text-decoration:none;
    -moz-box-shadow:0 0 5px #9ddff5;
    -webkit-box-shadow:0 0 5px #9ddff5;
    box-shadow:0 0 5px #9ddff5;
}

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
/* Зеленая кнопка */
#navigationMenu .home {	
    background-position:0 0;
}
 
#navigationMenu .home:hover {
    background-position:0 -39px;
}
 
#navigationMenu .home span {
	background-color:#7da315;
	color:#3d4f0c;
	text-shadow:1px 1px 0 #99bf31;
}
 
/* Голубая кнопка */
#navigationMenu .about { 
    background-position:-38px 0;
}
 
#navigationMenu .about:hover { 
    background-position:-38px -39px;
}
 
#navigationMenu .about span {
	background-color:#1e8bb4;
	color:#223a44;
	text-shadow:1px 1px 0 #44a8d0;
}
 
/* Оранжевая кнопка */
#navigationMenu .services { 
    background-position:-76px 0;
}
 
#navigationMenu .services:hover { 
    background-position:-76px -39px;
}
 
#navigationMenu .services span {
	background-color:#c86c1f;
	color:#5a3517;
	text-shadow:1px 1px 0 #d28344;
}
 
/* Желтая кнопка */
#navigationMenu .portfolio {
    background-position:-114px 0;
}
 
#navigationMenu .portfolio:hover { 
    background-position:-114px -39px;
}
 
#navigationMenu .portfolio span {
	background-color:#d0a525;
	color:#604e18;
	text-shadow:1px 1px 0 #d8b54b;
}
 
/* Фиолетовая кнопка */
#navigationMenu .contact { 
    background-position:-152px 0;
}
 
#navigationMenu .contact:hover { 
    background-position:-152px -39px;
}
 
#navigationMenu .contact span {
    background-color:#af1e83;
    color:#460f35;
    text-shadow:1px 1px 0 #d244a6;
}

В последней части кода мы определяем стили для каждого элемента списка при наведении. Для фона элементов списка используется спрайт(одно изображение, из которого берется для каждого элемента списка нужна часть). В архиве есть PSD-файл, используя Photoshop можно изменить меню так как вам нравится.

Вывод

CSS3 развивается быстрыми темпами, еще год назад столько браузеров не поддерживали такие эффекты как сейчас. Поэтому можно смело использовать данное меню на своем сайте.

Успехов!

Источник: tutorialzine.com

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

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

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

    Как же сложно разобраться во всем этом! Я не представляю себе, как все это не то, что запомнить, а просто понять. Мне легче писать статьи. чем колдовать над кодом, у меня в Блоггере попроще — настроил шаблон и забыл. Спасибо за информацию!
    С уважением, Вадим.

     
    • Юрий

      Согласен, некоторым техническая часть действительно сложная, и вот поэтому скоро будет опубликована статья на эту тему(через 3 дня).

       
  • fotodizart

    Хорошее решение для меню! Можно сделать его плавающим сбоку сайта и вынести ряд необходимых кнопок, подобное решение используется на майле в новостях.
    У Вас интересный сайт, нашел для себя много интересного, думаю буду заглядывать частенько.

     
  • Алексей

    Доброго времени суток, только постигаю азы =) Подскажите, если у меня сделана структура, могу ли я использовать ваш код CSS и сделать меню на своём сайте таким как в примере.

    Просто даже сложно спросить, того, чего не понимаешь.

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

    Заранее спасибо.

     
    • Юрий Немец

      Чтобы правильно "сработал" CSS Вам необходимо HTML структуру сделать такую же, как в Демо.

       
      • Алексей

        Подскажите, а древовидную структуру можно делать ?

         
        • Юрий Немец

          Что Вам подсказать?

          Я же писал ранее, что необходимо сделать такую же структуру, если нет желания изменять CSS код. Легче переделать HTML структуру. Если самостоятельно тяжело разобраться, тогда можете поручить данную работу знающему человеку.

           

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

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