Как сделано на 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

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

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

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

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

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

Минтранс дал добро на продажу авиабилетов по низкой цене в 2025 году Купить авиабилеты онлайн дешево

Валентин

Сообщений: 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}
}

Новые темы	Объявления	Свободное общение
13:53 AviTool - мощный инструмент для автоматизации работы с Avito 17:01 Absence в Армении 23:19 Ребята подскажите какими сервисами и прогами вы пользуетесь для SEO продвижения? 19:30 Индексация страниц 20:28 Dao.AD: Монетизация и покупка Push/Pops/Inpage и Video трафика! 14:50 Какую выбрать тему/нишу для сайта? 18:32 Gambling Craft - гемблинг по белому	10:19 GoodsMoney.io 20:19 BestX24 - быстрый и безопасный обменник криптовалют и электронных денежных средств 09:45 Резидентные Прокси Ротационные BACKCONNECT США Европа Микс 19:49 Комплексный прогон по трастовым сайтам, статейное размещение. Рост НЧ-СЧ, Тиц-пр. 15:42 WebKazna. Обмены криптовалют. Доставка наличных. 14:42 SOCKS5 приватные прокси на 30 дней для PayPal 14:42 Google Voice аккаунты для бесплатных SMS и звонков	10:59 Ням-ням! - 8 деликатесов, которые когда-то ели только бедные люди 20:17 Точные прогнозы на футбол 12:23 150+ хакерских поисковых систем и инструментов 08:38 Накрутка поисковых подсказок 17:41 Стряхнуть обыденность - об Агасфере 10:54 Добро пожаловать в цифровой мир... 22:39 Топ-5 способов использовать мобильные прокси для бизнеса: подробный обзор

Новые темы

Объявления

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

13:53 AviTool - мощный инструмент для автоматизации работы с Avito
17:01 Absence в Армении
23:19 Ребята подскажите какими сервисами и прогами вы пользуетесь для SEO продвижения?
19:30 Индексация страниц
20:28 Dao.AD: Монетизация и покупка Push/Pops/Inpage и Video трафика!
14:50 Какую выбрать тему/нишу для сайта?
18:32 Gambling Craft - гемблинг по белому

10:19 GoodsMoney.io
20:19 BestX24 - быстрый и безопасный обменник криптовалют и электронных денежных средств
09:45 Резидентные Прокси Ротационные BACKCONNECT США Европа Микс
19:49 Комплексный прогон по трастовым сайтам, статейное размещение. Рост НЧ-СЧ, Тиц-пр.
15:42 WebKazna. Обмены криптовалют. Доставка наличных.
14:42 SOCKS5 приватные прокси на 30 дней для PayPal
14:42 Google Voice аккаунты для бесплатных SMS и звонков

10:59 Ням-ням! - 8 деликатесов, которые когда-то ели только бедные люди
20:17 Точные прогнозы на футбол
12:23 150+ хакерских поисковых систем и инструментов
08:38 Накрутка поисковых подсказок
17:41 Стряхнуть обыденность - об Агасфере
10:54 Добро пожаловать в цифровой мир...
22:39 Топ-5 способов использовать мобильные прокси для бизнеса: подробный обзор

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