Авторизация







Регистрация / Забыли пароль?

Регистрация нового пользователя











< Назад

Восстановление пароля





< Назад

Добро пожаловать

Выход


Ежедневное обновление статей и уроков, будь в курсе, держи руку на пульсе событий!

Главная >> jQuery

Полноэкранный формат сайта с возможностью перехода по страницам (Стиль Windows 8)


Давайте, сегодня сделаем нечто необычное. Я предлагаю создать страничку в стиле Windows 8. Идея заключается в том, чтобы создать 4 элемента, располагающихся по всей ширине экрана. По клику, каждый из них будет увеличиваться, дополнительные же переходы, будут добавляться к внутренним.


​​

    Сегодня, мы бы хотели поделиться с вами экспериментальным примером сайта, реагирующим на все происходящие события. Изначально будут видимы 4 блока. По нажатию на каждый, он будет расширяться до полноэкранного, другие в свою очередь, будут уменьшаться в размерах и исчезать. Если мы закроем открытый блок, всё вернётся на свои места. Другой тип события, можно увидеть в разделе портфолио. Выбранная панель предстанет пред нами снизу, а задний блок отойдёт на второй план и исчезнет.

    Все эффекты данного эксперимента, работают благодаря CSS переходам, и контролируются из jQuery. Весь макет является гибким, а для небольших экранов, созданы стили улучшающие внешний вид страниц.

    Обращаю ваше внимание на то, что данный пример, будет работоспособен лишь в тех браузерах, которые поддерживают соответствующие свойства CSS.

    Прекрасные иллюстрации, используемые для демонстрации примера, были предоставлены талантливым товарищем Isaac Montemayor.

    Давайте взглянем на некоторые скриншоты:

    Начальный экран имеет четыре гибких блока. Измените размер окна браузера, чтобы увидеть адаптацию данного примера.

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

    Если мы ведём свой блог, и нам необходимо показать что у анонса есть продолжение, просто выделяем часть текста, где говорится о том, что есть продолжение.

    Для большей наглядности разделов, мы можем украсить их графическими элементами, сделать их ссылками, и по щелчку на них, открывать дополнительную информацию. При этом новый блок появится снизу, предыдущий же окажется сзади и исчезнет (например, как в разделе «Портфолио»).

    Навигация по пунктам, имеет одинаковую страницу перехода. Т.е. когда мы просмотрели интересующий нас пункт, переход обратно, возвратит нас к первоначальному окну выбора пунктов.

    На этом наш эксперимент подошёл к концу, надеюсь вы нашли его вдохновляющим и поделитесь с нами в разделе комментариев вашими работами =)

    Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.


Дата публикации: 11.05.2013
Опубликовал: Сергей Кашурин
Просмотров: 2413
Правила перепечатки

Правила перепечатки

Уважаемый посетитель сайта!
Ниже преведены условия использования и перепечатки материалов сайта /
Все материалы данного сайта подготовлены для Вас лично мной.

Большая часть материалов сайта - это авторские уроки, остальные, это переводы уроков с английского языка на русский.
Если Вы решили использовать материалы данного сайта где-то на своих ресурсах или в рассылке, то соблюдайте следующие требования:
1. Урок или статья должны перепечатываться «как есть» с сохранением всех ссылок на источник урока, а если это перевод, то и на сайт, авторы которого подготовили его.
2. Ссылки на сайт источника и переводчика обязательно должны быть работоспособными (при нажатии по ссылке человек должен перейти на сайт автора/переводчика). Если Вы перепечатали какой-либо документ, обязательно проверьте ссылку на работоспособность.
3. Искажение информации об авторе, источнике, переводчике при перепечатке материалов запрещено!
4. Содержание урока или статьи при перепечатке не должно подвергаться модификациям и переделке. Все уроки и статьи, размещенные на сайте, должны перепечатываться как есть. Вы не имеете права урезать, исправлять или иным образом коверкать републикуемый документ.
С уважением, Сергей Кашурин– владелец сайта /


110 бесплатных PSD элементов, для ваших слайдеров, лент, выпадающих меню навигации и аудио видео проигрывателей
Используйте бесплатно распространяемую графику, вместо того, чтобы тратить ваше драгоценное время, особенно, когда дело доходит до веб дизайна. Ведь его вы можете потратить на более нужные вещи, такие как проявление творчества. Чтобы сделать из вашего проекта конфетку, ниже приведены 110 бесплатных PSD элементов для создания слайдеров, лент, выпадающих меню навигации и аудио видео проигрывателей, полученных нами с различных веб-сайтов и отдельных лиц, которые вносят вклад в графику для дизайнеров, абсолютно бесплатно.
100 бесплатных PSD элементов для веб-дизайна и мобильных устройств.
Всем привет! Давайте сегодняшний день сделаем исключением, и вместо урока, посмотрим очень классные PSD заготовки для веб-сайтов и мобильных приложений которые вы сможете бесплатно скачать!
Colorizer: пользователь сам выберет цвет продукта на вашем сайте
Когда вы выбираете машину, или футболку в интернет магазине, хотелось бы вам самим выбрать для неё цвет? Думаю да. В этой статье, я расскажу вам про плагин Colorizer, с помощью которого, для наших дорогих пользователей, мы сможем предоставить возможность выбора цвета продукта в котором он заинтересован, что оставит о нас приятное впечатление и заявку на покупку. jQuery плагин Colorizer - изменим цвет к лучшему.
См. производство деревянных домов www.nostradomus.ru/proizvodstvo-derevyannyh-domov/ .
Когда вы выбираете машину, или футболку в интернет магазине, хотелось бы вам самим выбрать для неё цвет? Думаю да. В этой статье, я расскажу вам про плагин Colorizer, с помощью которого, для наших дорогих пользователей, мы сможем предоставить возможность выбора цвета продукта в котором он заинтересован, что оставит о нас приятное впечатление и заявку на покупку. jQuery плагин Colorizer - изменим цвет к лучшему.

Уроки и статьи

«Найден Самый Дешевый и Эффективный Способ Рекламы в Интернете!»

Доказанo: ведение своей почтовой рассылки - это самый действенный и дешевый метод рекламы в Интернете.

Используете ли Вы его?

Если нет, то Вы давно теряете свои деньги! Если да, то пришло время вести Вашу почтовую рассылку на самом эффективном инструменте в Рунете - сервисе рассылок SmartResponder.ru

Узнать об этом подробнее >>

Быть в курсе всех событий: