Выпадающее меню без Javascript

24 06/08
175

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

Приступим…

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

<div class="menu">
    <ul> 
        <li><a class="hide" href="">Раздел 1</a>
 
        <!--[if lte IE 6]>
        <a href="">Раздел 1
        <table><tr><td>
        <![endif]-->
 
            <ul>
                <li><a href="" title="">Страница 1</a></li>
                <li><a href="" title="">Страница 1.1</a></li>
                <li><a href="" title="">Страница 1.2</a></li>
            </ul>
 
        <!--[if lte IE 6]>
        </td></tr></table>
        </a>
        <![endif]-->
 
        </li>
 
        <li><a class="hide" href="">Раздел 2</a>
 
        <!--[if lte IE 6]>
        <a href="">Раздел 2
        <table><tr><td>
        <![endif]-->
 
            <ul>
                <li><a href="" title="">Страница 2</a></li>
                <li><a href="" title="">Страница 2.1</a></li>
                <li><a href="" title="">Страница 2.2</a></li>
                <li><a href="" title="">Страница 2.3</a></li>
                <li><a href="" title="">Страница 2.4</a></li>
                <li><a href="" title="">Страница 2.5</a></li>
            </ul>
 
        <!--[if lte IE 6]>
        </td></tr></table>
        </a>
        <![endif]-->
 
        </li>
 
</ul> 
</div>

Вы можете добавить дополнительные разделы, при этом необходимо будет изменить в 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
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

.menu{
    font-family:arial, sans-serif;
    width:212px;
    height:100px;
    position:relative;
    font-size:11px;
    z-index:100
}
.menu ul li a, .menu ul li a:visited{
    display:block;
    text-decoration:none;
    color:#000;
    width:104px;
    height:20px;
    text-align:center;
    color:#fff;
    border:1px solid #fff;
    background:#710069;
    line-height:20px;
    font-size:11px;
    overflow:hidden
}
.menu ul{
    padding:0;
    margin:0;
    list-style:none
}
.menu ul li{
    float:left;
    position:relative}
.menu ul li ul{
    display:none
}
.menu ul li:hover a{
    color:#fff;
    background:#36f
}
.menu ul li:hover ul{
    display:block;
    position:absolute;
    top:21px;
    left:0;
    width:105px
}
.menu ul li:hover ul li a{
    display:block;
    background:#ddd;
    color:#000
}
.menu ul li:hover ul li a:hover{
    background:#6fc;
    color:#000
}

Оформление пунктов меню можно менять так как вам хочется. Для IE6 используются дополнительные стили, которые также нужно подключить с помощью условных комментариев:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

.menu ul li a.hide, .menu ul li a:visited.hide{
    display:none
}
.menu ul li a:hover{
    color:#fff;
    background:#36f
}
.menu ul li a:hover ul{
    display:block;
    position:absolute;
    top:21px;
    left:0;
    width:105px
}
.menu ul li a:hover ul li a{
    display:block;
    background:#ddd;
    color:#000
}
.menu ul li a:hover ul li a:hover{
    background:#6fc;
    color:#000
}

Вот собственно и все. Пример работает во всех наиболее популярных браузерах, включая IE6. Для корректной работы меню необходимо указать тип документа.

Теги: • •

Делаем простую форму без таблиц

16 06/08
10

Тем, кто недолюбливает использование таблиц не по назначению, хочу предложить простой пример того, как можно сделать простую форму не используя таблицу для расположения элементов формы. Изначально этот пример я увидел у Антонио Лупетти на блоге Woork, однако в его варианте предлагался код, не проходящий валидацию. Поэтому я немного изменил структуру, чтобы проблем с валидацией не было.

Делаем простую форму без таблиц

(далее…)

Теги:

Монохромный дизайн

05 06/08
11

Интернет это красочное место. Можно запросто взять любой понравившийся цвет и использовать его в дизайне сайта. Сделать красочный сайт просто, но есть ли альтернатива?

Монохромный дизайн

Монохромный дизайн — это дизайн с одним ключевым цветом. Вы выбираете один базовый цвет, а затем делаете его более светлым или более темным для получения различных оттенков.

В дизайне присутствует исключительно монохромная палитра и различные оттенки серого.

Монохромный дизайн

Есть несколько инструментов готовых помочь вам в выборе цветов.

Преимущества монохромного дизайна

  • Монохромную палитру очень легко сделать. Достаточно выбрать один цвет и сделать нужные оттенки.
  • Отсутствие цветов, которые не сочетаются друг с другом.
  • Дизайн становится более простым. Простота расширяет цветовую гамму в самой конструкции. Нет конкурирующих цветов, что делает дизайн более приятным для восприятия.
  • Достаточно просто выделить важные элементы. Хотя основная часть дизайна должна быть выполнена с использованием выбранной монохромной палитры, вы можете использовать контрастные цвета для одного или двух элементов, которые вы хотите выделить. Например, вашу RSS иконку.

Минусы монохромного дизайна

  • Меньше разнообразия в дизайне. Отсутствие разнообразия и контраста снижает визуальный интерес. Пытаясь создать простой дизайн, в итоге вы можете получить визуально скучный сайт. Вы должны добиться того, чтобы элементы выглядели нормально.
  • Трудно читать текст. Нередко бывает недостаточно контраста между текстом и фоном. Будьте с этим особенно осторожны и убедитесь, что ваша страница легко читается.
  • Разочарование. Ограниченная палитра может разочаровать вас в начале работы и вы вероятно захотите добавить больше цветов. Иногда это может быть правильным решением, но не всегда. Работа с монохромной палитрой требует некоторого времени для привыкания.

Примеры монохромного дизайна

Примеры монохромного дизайна

Примеры монохромного дизайна

Примеры монохромного дизайна

Примеры монохромного дизайна

Ахроматический дизайн

Развитием монохромного является ахроматический дизайн. В ахроматическом дизайне присутствуют лишь оттенки серого.

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

Примеры ахроматического дизайна

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

Примеры ахроматического дизайна

Примеры ахроматического дизайна

Вывод:

Хороший дизайн не подразумевает множество цветов. Нет необходимости использовать все цвета радуги при создании дизайна сайта.

Если Ваш блог является достаточно простым или у вас «легкие» для восприятия тексты, то монохромной или ахроматический дизайн то, что вам нужно.

А что вы думаете о монохромном дизайн?

Оригинал: Make The Web a Less Colorful Place