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

08 10/09
36

На CSSplay недавно была опубликована новая версия выпадающего меню на «чистом» CSS. В этой версии никаких хаков, условных комментариев и таблиц для IE6.

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

<ul id="nav">
  <li><a href="">Главная</a></li>
  <li><a href="">Товары</a>
    <ul>
      <li><a href="">Компьютеры</a></li>
      <li><a href="">Мониторы</a></li>
      <li><a href="">Комплектующие</a></li>
    </ul>
  </li>
  <li><a href="">Услуги</a>
    <ul>
      <li><a href="">Сборка</a></li>
      <li><a href="">Ремонт</a></li>
      <li><a href="">Обслуживание</a></li>
    </ul>
  </li>
  <li><a href="">Условия</a></li>
  <li><a href="">Карта сайта</a></li>
</ul>
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

*{
  margin:0;
  padding:0
}
#nav{
  font-size:0.7em;
  list-style-type:none;
  width:600px;
  height:25px;
  display:inline-block;
  background:#355C96;
  line-height:25px
}
  #nav li{
    float:left;
    width:120px;
    margin-top:-10000px
  }
    #nav li a{
      width:120px;
      text-decoration:none;
      text-align:center;
      color:#fff;
      position:relative;
      float:left;
      margin-right:-119px;
      margin-top:10000px
    }
    #nav li a:hover, #content #nav li a:focus, #content #nav li a:active{
      background:#DCE2FC;
      margin-right:0;
      color:#355C96
    }
    #nav li ul{
      background:#6286BD;
      float:left;
      margin-top:-25px;
      padding-top:25px;
      margin-bottom:-10000px;
      list-style-type:none
    }
      #nav li ul li{
        float:none;
        margin:0;
        width:auto
      }
        #nav li ul li a{
          float:none;
          display:block;
          margin:0;
          margin-right:-1px;
          background:#6286BD
        }
Теги:

DD_belatedPNG – фикс PNG24 в IE6

24 08/09
52

DD_belatedPNG – еще один способ решения проблем с полупрозрачными PNG в IE6.

В DD_belatedPNG позволяет использовать background-position, background-repeat и :hover. Ссылки и элементы форм в блоке с полупрозрачным фоном остаются кликабельны.

Использовать скрипт очень просто:

  • Скачайте js файл.
  • Подключите его к странице.
  • Укажите какие элементы необходимо исправить. 
1
2
3
4
5
6

<!--[if IE 6]>
  <script src="DD_belatedPNG.js" type="text/javascript"></script>
  <script type="text/javascript">
    DD_belatedPNG.fix('.png-elem');
  </script>
<![endif]-->
Теги: •

Position fixed в IE6

03 08/09
14

Как известно IE6 не поддерживает position:fixed. Для эмуляции данного эффекта можно использовать position:absolute и CSS expression.

1
2
3
4

#fixed{ /* Стили для IE6 */
  position:absolute;
  top:expression(eval(document.documentElement.scrollTop))
}

Чтобы не было подергиваний фиксированного блока, нужно добавить элементу html или body фоновое изображение. В качестве значения background можно использовать about:blank.

1
2
3

html{
  background:url(about:blank)
}
Теги:

Поддержка браузерами веб-технологий

14 07/09
17

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

When can I use…

When can I use…

When can I use… даёт возможность сравнить поддержку браузерами различных технологий (HTML 5, CSS 3, CSS 2, SVG, Canvas, PNG и т.д.). Можно выбрать как определённые браузеры, так и определённые технологии. В целом достаточно информативно и удобно.

Теги: •

Шпаргалка по HTML 5 и CSS 3

14 07/09
21

HTML 5

HTML 5 cheat sheet

Шпаргалка содержит перечень всех поддерживаемых в настоящее время HTML 5 тегов, их описания, атрибуты, и поддержка в HTML 4.

CSS 3

CSS 3

Полный список всех свойств, селекторов и допустимых значений в текущей спецификации CSS 3.

Теги: • •