iPhone как папка открыла дизайн в сети

Question

Это немного сложно, и я хотел бы помочь с этим.Я исследовал навсегда и не могу найти способ сделать это, и не знаю, как это написать.Я ищу, чтобы создать iPhone-подобный дизайн для Интернета.Дизайн выглядит следующим образом:

Для тех из вас, у кого есть iDevices, я хочу, чтобы этот эффект «выдвигался», когда вы нажимаете и на папку.

Для тех из вас, у кого нет iPhone / ipads / itouch (я не знаю, как вы сначала живете с собой!), Но открывается приятное открывающееся меню при нажатии на него.

Когда вы нажимаете кнопку «Войти», я хочу, чтобы она выглядела как открытие папки iphone, и как бы «разделяла» страницу пополам, как это делают iDevices.

Я бы очень хотел помочь в написанииэто сработает, так как я уверен, что тонна людей также выиграет от этого.Это не обязательно должно быть точно, я просто хочу основную анимацию.Я могу написать все остальное сам.Все, что вам нужно, должно быть на этом сайте, если вы просматриваете источник.

Нажмите «Просмотреть все функции» на:

http://www.apple.com/ipodtouch/features/

Это именно то, что я хочу.

Спасибо всем за помощь всем!

Answer 1

Могу ли я указать вам вопрос, который я уже задавал некоторое время назад об этой же вещи?См. Вопрос здесь: Как разделить страницу и показать вещи внизу?

Специально взгляните на удивительный фрагмент кода Джимми Чандры: http://jsfiddle.net/hKHWL/

Это не будетслишком сложно изменить эту строку:

.folder { background-color:#0df }

, чтобы получить фон папки, который вы пытаетесь создать.

Answer 2

Я переделал некоторые из представлений / элементов iOS5 в jQuery .. в том числе динамический разделитель обоев (в настоящее время используется для 1 папки и газетного киоска).Он ведет себя относительно высоты и положения папки.Демонстрация: http://webkit -os.pixelass.com / iframe / (только для браузеров Webkit: Safari Chrome .. лучше всего подходит для safari5 OS X 10.6.x или новее)

Answer 3

Мой совет - разбить его на части и работать оттуда.

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

Возьмите его по частям, как это, и вы получите его в кратчайшие сроки.