Как сделано на Lenta.ru?

Сообщений: 3448 Регистрация: Май 2011

29 Августа 2013 20:47

На сайте _Lenta.ru_ есть левое меню, которое автоматом прячется, если правая часть не вся влазит на экран.
Как сделали? JavaScript? CSS?

Не подписываюсь на темы, так что не слежу за вопросами, которые вы оставляете в топике после меня. Если нужно получить ответ, пишите в ЛС с указанием ссылки на мой комментарий.

Алик Яушев

Сообщений: 3448 Регистрация: Май 2011

29 Августа 2013 20:53

Видно, что когда появляется мини панель, то большая становится с "left:-200px"
Порылся во всех JS скриптах, которые видны в исходном коде, и не нашел ответа.

maxib bib

Сообщений: 827 Регистрация: Июн 2013

29 Августа 2013 20:57

Алик Яушев, Часто читаю Ленту, но только совсем недавно увидел это меню smile:D

Она была идеальна.. Но гуглила через яндекс...

Алик Яушев

Сообщений: 3448 Регистрация: Май 2011

29 Августа 2013 20:58

maxib bib, хорошее меню, хороший сайт smile:)

video-freelancer

Сообщений: 2803 Регистрация: Авг 2012

29 Августа 2013 21:43

А мне понравилось как они назвали класс иконки 18+ прям фантазёры:mocking:

Прикрепленные файлы

1.jpg (664.41 КБ) [ Скачать ]

Купить авиабилеты онлайн дешево | Аренда Серверов Дешево https://clck.ru/afhGc Выделенные СЕРВЕРЫ - БЕСПЛАТНЫЕ плюшки https://clck.ru/YhkZe 🖧 / / Хостинг от 6руб в день! https://clck.ru/Rk2P5 Хостинг - Скидки при

Валентин

Сообщений: 621 Регистрация: Май 2010

30 Августа 2013 01:48

Цитата
Алик Яушев пишет: Видно, что когда появляется мини панель, то большая становится с "left:-200px" Порылся во всех JS скриптах, которые видны в исходном коде, и не нашел ответа.

Код
<link href="http://icdn.lenta.ru/assets/lenta-4266f51cd2e932d83d893831a17d8218.css" media="all" rel="stylesheet" type="text/css" />

в самом конце этого файла медиа-запросом подгружаются стили, исходя из расширения монитора , а узкая панелька раскрывается-закрывается скриптом

инвестиции

Алик Яушев

Сообщений: 3448 Регистрация: Май 2011

30 Августа 2013 09:11

Валентин, большое спасибо. Теперь буду знать.

Цитата

@media only screen and (min-width: 1220px){
.b-footer{padding-left:200px !important}
.g-application{padding-left:200px !important}
.b-sidebar-menu .mini{display:none !important}
.b-sidebar-menu .origin{left:0 !important}
.b-sidebar-menu .origin .b-sidebar-menu__search{left:20px}
}

@media only screen and (max-width: 1039px)
{.b-footer{padding-left:30px}
.g-application{padding-left:0}
.g-application{padding-left:30px}
}

@media only screen and (max-width: 1219px){
.b-up{left:1040px}
}

Новые темы	Объявления	Свободное общение
22:11 Webvork - международная товарная СРА сеть с сертифицированными офферами на Европу. 21:45 Как сократить ссылку и зачем это делать. 16:49 Perfect.Studio: InstAccountsManager — лучший инструмент для автоматизации заработка в Instagram 19:14 Magic click - гемблинг пп, ставки выше конкурентов 15:37 Adtrafico - Правильная партнёрская сеть под бурж трафик 13:38 Вопрос по Cloudflare 16:33 DreamCash.tl - заработок на онлайн-видео. До 95% отчислений, отличный конверт!	21:12 Ural-obmen.ru — выгодный сервис обмена 12:35 Современный скрипт обменника электронных валют 11:00 Obama.ru - безопасный обмен криптовалют и электронных денежных средств 14:16 Продам порно сайт на KVS 12:58 Профильный прогон 200 рублей, Тиц (Икс) от 10, проверен Checktrust 12:02 TETChange-Обменник криптовалют 11:02 DualCoin - быстрый криптовалютный обменник	02:47 Точные прогнозы на футбол 20:22 Как получить рефералов и посетителей на сайт бесплатно. 18:31 Видимо, похороны СУПРа уже прошли как-то по-тихому 12:48 Каспкрски ОС 11:21 Ням-ням! - 8 деликатесов, которые когда-то ели только бедные люди 14:41 Бесплатный мини-аудит юзабилити и конверсии + технический SEO-аудит в подарок 15:24 Добро пожаловать в цифровой мир...

Новые темы

Объявления

Свободное общение

22:11 Webvork - международная товарная СРА сеть с сертифицированными офферами на Европу.
21:45 Как сократить ссылку и зачем это делать.
16:49 Perfect.Studio: InstAccountsManager — лучший инструмент для автоматизации заработка в Instagram
19:14 Magic click - гемблинг пп, ставки выше конкурентов
15:37 Adtrafico - Правильная партнёрская сеть под бурж трафик
13:38 Вопрос по Cloudflare
16:33 DreamCash.tl - заработок на онлайн-видео. До 95% отчислений, отличный конверт!

21:12 Ural-obmen.ru — выгодный сервис обмена
12:35 Современный скрипт обменника электронных валют
11:00 Obama.ru - безопасный обмен криптовалют и электронных денежных средств
14:16 Продам порно сайт на KVS
12:58 Профильный прогон 200 рублей, Тиц (Икс) от 10, проверен Checktrust
12:02 TETChange-Обменник криптовалют
11:02 DualCoin - быстрый криптовалютный обменник

02:47 Точные прогнозы на футбол
20:22 Как получить рефералов и посетителей на сайт бесплатно.
18:31 Видимо, похороны СУПРа уже прошли как-то по-тихому
12:48 Каспкрски ОС
11:21 Ням-ням! - 8 деликатесов, которые когда-то ели только бедные люди
14:41 Бесплатный мини-аудит юзабилити и конверсии + технический SEO-аудит в подарок
15:24 Добро пожаловать в цифровой мир...

15.05.2020 14:47	Lenta.ru: Китаец носил маску во время пробежек и попал в больницу
26.11.2015 14:39	Как же прикольно сделано ( рекламный ролик мелкого соц сервиса )