X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Grid как правильно решить задачу
sergei_burg
sergei_burg
Topic Starter сообщение 2.6.2019, 11:16; Ответить: sergei_burg
Сообщение #1


<style>
body{
padding: 0;
margin: 0;
}
.contener{
display: grid;
grid-template-areas:
"header header header"
"aside-left main aside-right"
"footer footer footer";
grid-template-columns: 150px 1fr 150px;
grid-template-rows: 100px 1fr 100px;
min-height: 100vh;
}
.header{
grid-area: header;
background-color: lightgray;
padding: 20px 0px 0px 20px;
}
.main{
grid-area: main;
background-color: cornflowerblue;
padding:20px;
}
.asid-left{
grid-area: aside-left;
background-color: gray;
padding: 20px 0px 0px 20px;
}
.aside-right{
grid-area: aside-right;
background-color: gray;
padding: 20px 0px 0px 20px;
}
.footer{
grid-area: footer;
background-color: lightgray;
padding: 20px 0px 0px 20px;
}
@media screen and (max-width:600px){
.contener{
grid-template-areas:
"header"
"aside-left"
"main"
"aside-right"
"footer";
grid-template-columns: 100%;
grid-template-rows: 100px 50px 1fr 50px 100px;
}
}
</style>
<body>

<div class="contener">
<div class="header">шапка</div>
<div class="main">контенер</div>
<div class="asid-left">меню</div>
<div class="aside-right">меню</div>
<div class="footer">подвал</div>
</div>


Вот мне нужно что бы <div class="aside-right">меню</div> при размере меньше 600 пикселей исчез, я кончен могу дисплей ноне, но мне кажется это какое то корявое решение, если более правильное написание.
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Degradator
Degradator
сообщение 3.6.2019, 13:14; Ответить: Degradator
Сообщение #2


В последнее время стал тащитсья от анимаций. Почитай спеку про material design.
Если вкратце, то они делают вот так:
<style>
.asid-left{
max-width: 200px;
opacity: 1;
transition: all 0.4s ease-in-out;
}
@media screen and (max-width:600px){
.asid-left {
max-width: 0;
opacity: 0;
overflow: hidden
}
}
</style>

<div class="asid-left">меню</div>


easy-in для того чтобы что-то добавить, easy-out для того чтобы что-то убрать
если добавялется/исчезает блок (диалоговое окно, форма), то анимация занимает 0.4 секи, если добавляется-исчезает небольшой кусок (поле формы, кнопка, пункт меню), то анимация занимает 0.2 секи, если изменяется содержимое кнопки или поля, то анимация занимает 0.1 секи.

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Большие ставки для кликов в Я.Директ. Как удешевить?
2 rownong27 1117 26.3.2024, 14:13
автор: knezevolk
Открытая тема (нет новых ответов) Как вы бросили работу и перешли на заработок с сайтов?
12 uahomka 2284 25.3.2024, 6:52
автор: Skyworker
Открытая тема (нет новых ответов) Как отозвать банковский платеж фрилансеру?
28 metvekot 3910 25.3.2024, 6:34
автор: Skyworker
Открытая тема (нет новых ответов) Как вывести деньги в Украине с заблокированного Юмани ?
23 freeax 3636 24.3.2024, 20:55
автор: Liudmila
Открытая тема (нет новых ответов) Через какой браузер и как можно найти в кэшэ браузера видео
10 Room 1929 23.3.2024, 7:41
автор: Room


 



RSS Текстовая версия Сейчас: 28.3.2024, 16:39
Дизайн