Все записи с тегом: css

С появлением display: flex; стало гораздо проще центрировать блоки по центру родителя, как по горизонтали, так и по вертикали. Но на браузерах сафари такая верстка работать не будет:

1
2
    display: flex;
    align-items: center;

Все дело в вендорных префиксах. Safai, так же как и Chrome, является WebKit браузером. Поэтому, для решения проблем с display: flex;, нужно использовать правильные префиксы. Например, так:

1
2
3
4
5
6
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;

Кстати, существует отличный автопрефиксер CSS.

12 апреля
Теги:

Верстка горизонтального меню - центрирование всплывающего элемента по центру родителя

Иногда крайне простые вещи забываешь, и потом долго повторно в этом разбираешься. Оставлю на заметку себе и другим.

Способ обладает существенным недостатком — всплывающее меню должно быть фиксированного размера (шучу, не должно).

Построим меню:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<ul class="nav">
    <li><a href="">Пункт меню 1</a></li>
    <li>
        <a href="">Пункт меню 2</a>
        <ul class="sub-menu">
            <li><a href="">Пункт меню 2.1</a></li>
            <li><a href="">Пункт меню 2.2 </a></li>
            <li><a href="">Пункт меню 2.3</a></li>
            <li><a href="">Пункт меню 2.4</a></li>
        </ul>
    </li>
    <li><a href="">Пункт меню 3</a></li>
    <li>
        <a href="">Пункт меню 4</a>
        <ul class="sub-menu">
            <li><a href="">Большой пункт меню 4.1</a></li>
            <li><a href="">Большой пункт меню 4.2 </a></li>
            <li><a href="">Большой пункт меню 4.3</a></li>
            <li><a href="">Большой пункт меню 4.4</a></li>
        </ul>
    </li>
</ul>

Пишем стили для горизонтального меню. Самое важное: родительский элемент должен иметь свойство position: relative;, а дочерний position: absolute; и white-space: nowrap;. Такой набор даст позиционирование относительно родителя и запретит перенос слов. Недостаток: большие названия в выпадающем меню переносится не будут.

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
.nav {
    list-style: none;
    background: #000;
    text-align: center;
}
.nav>li {
    display: inline-block;
    position: relative;
    border-left: 1px #fff solid;
}
.nav>li:last-child {
    border-right: 1px #fff solid;
}
.nav>li>a {
    display: inline-block;
    padding: 20px 30px;
    color: #fff;
}
.nav li .sub-menu {
    display: inline-block;
    position: absolute;
    text-align: center;
    list-style: none;
    background: red;
    white-space: nowrap;
    margin-top: 20px;
    left: 50%;
    padding: 10px 0;
    opacity: 0;
    visibility: hidden;
    transition: 0.5s;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
}
.nav li .sub-menu li {
    display: list-item;
    padding: 5px 20px;
}
.nav li .sub-menu li a {
    color: #fff;
 
}
 
.nav li:hover .sub-menu {
    margin-top: 0px;
    opacity: 1;
    visibility: visible;
}

Скрипт, который пробегается по всем элементам .sub-menu, считывает их ширину, делит на 2 и добавляет обратно с отрицательным значением.

1
2
3
4
$('.nav .sub-menu').each(function() {
    var elemwidth = $(this).width();
    $(this).css({'margin-left' : -(elemwidth/2)});
});
31 декабря
Теги: , ,