Как создать меню, которое скатывается вниз? CSS

Пример:Как создать меню, которое скатывается вниз? CSS

<div id="one"> 
    (content) 
</div> 
<div id="two"> 
    <ul>............</ul> 
    </div>

Я хочу, чтобы создать эффект, который появляется, что #two является пришедшим вниз от #ONE, я попытался с помощью переходов так, когда я: наведите курсор мыши на #ONE так #two, казалось бы, идут вниз от #one, но контент остался там, в то время как только размер фона изменился, я хочу, чтобы весь список отображался с #one, как на этом сайте: http://merryweddings.com/

источник

2013-05-03 Manuel Medina

Изменяется ли высота вашего выпадающего меню? Если это не так и говорит, что это максимальный набор 500PX во все времена, то это можно сделать только с помощью CSS. В противном случае это крайне затруднительно, так как единственный способ сделать это - оживить макс-высоту, что делает его немного напуганным. Если у вас нет определенной высоты в раскрывающемся списке, тогда ур захочет использовать javascript/jquery для этого. – Michael

Если вы знаете размер DIV, который всплывал, вы можете сделать простой переход от свойства «высоты», например:

http://jsfiddle.net/BeDQr/

Вы также можете использовать переход на 'max-height' и установите его в очень большое значение.

#two { 
    max-height: 0; 
    overflow: hidden; 
    transition-property: max-height; 
    transition: all 1s ease-in-out; 
} 
.wrapper:hover #two { 
    max-height: 500px; 
}

Но в этом случае конец анимации может быть немного резким.

источник

2013-05-03 21:02:05 Mark

Прекрасно работает для меня! Благодаря! –

это кроссбраузер? –

Возможно, вы захотите использовать JQuery для этого чистого CSS.

Проверьте этот пример: http://labs.abeautifulsite.net/jquery-dropdown/

This link также показывает много возможных решений JQuery.

источник

2013-05-03 20:27:25 Simon

Нет, это совсем не то, о чем я говорю, пожалуйста, обратитесь к веб-сайту, на который я указал на –

Хорошо, я уверен, что это можно сделать с помощью плагина JQuery, но я не знаю только о CSS. – Simon

Это возможно только с помощью CSS, но только если высота раскрывающегося списка исправлена и не изменяется. Если выпадающее меню изменяется по высоте, то javascript/jquery - это решение. – Michael

Смотрите эту ссылку здесь: How can I transition height: 0; to height: auto; using CSS?

см также ссылку в первом ответе вышеуказанной ссылке, которая находится здесь: Can you use CSS3 to transition from height:0 to the variable height of content?

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

источник

2013-05-03 20:36:56 Michael

Как создать меню, которое скатывается вниз? CSS

ответ

Смежные вопросы