Как добавить раскрывающееся меню Smooth CSS

Мне удалось создать меню с выпадающим меню (подменю) с помощью CSS. Но я не могу добавить гладкий эффект выпадающего меню для моего кодирования. Я попытался добавить -moz-переход и многое другое. Я не знал, где добавить этот переход, чтобы сделать обычное раскрывающееся меню плавным выпадающим меню.

Ниже мой HTML-код

<div id="cssmenu">
<ul>
 <li><a href="index.html" target="_blank"><span>Home</span></a></li>
 <li><a href="#" target="_blank"><span>Products</span></a>
 <ul>
 <li><a href="#" target="_blank"><span>Product 1</span></a>
 <ul>
 <li><a href="#" target="_blank"><span>Sub Item</span></a></li>
 <li><a href="#" target="_blank"><span>Sub Item</span></a></li>
 </ul>
 </li>
 <li><a href="#" target="_blank"><span>Product 2</span></a>
 <ul>
 <li><a href="#" target="_blank"><span>Sub Item</span></a></li>
 <li><a href="#" target="_blank"><span>Sub Item</span></a></li>
 </ul>
 </li>
 </ul>
 </li>
 <li><a href="#" target="_blank"><span>About</span></a></li>
 <li><a href="#" target="_blank"><span>Contact</span></a></li>
</ul>
</div>

Вот css

4 ответа

Когда вы написали "гладкое меню CSS", которое вы имели в виду без javascript и только CSS?

Если это так, используйте переход css уровня 3.

#cssmenu ul ul { 
 /* this will apply to inner UL, adapt to your desired selector */
 -webkit-transition: height 0.3s ease-in-out;
 -o-transition: height 0.3s ease-in-out;
 -moz-transition: height 0.3s ease-in-out;
 transition: height 0.3s ease-in-out;
}

[РЕДАКТИРОВАТЬ]

Если он не работает для вашего контекста, возможно, это потому, что нет высоты для вашего внутреннего элемента UL.

#cssmenu .has-sub:hover > ul {
 display: block;
 height:auto; /* add this */
}
#cssmenu .has-sub ul {
 display: none;
 position: absolute;
 width: 200px;
 height:0; /* add this */
 top: 100%;
 left: 0;
}

Для получения дополнительной информации о теме для кросс-браузерного решения, найдите сеть для генератора перехода css


Я использую это http://cssdeck.com/labs/pure-css3-smooth-drop-down-menu

Это меню создано только в CSS3, которое вдохновлено этим сообщением на Forrst! Это состоит из вложенной структуры ul для создания второго уровня меню, которое изначально скрыто с непрозрачностью, равной 0. Когда ссылка зависнет, соответствующая ul отображается и покачивается вниз. Это достигается путем установки его непрозрачности на 1 и изменения его верхнего смещения, когда он зависает в сочетании с переходами CSS3 для плавного анимирования процесса.

Проверьте код и поиграйте с ним столько, сколько захотите :)


Я бы рекомендовал использовать что-то более обширное, например jQuery, чтобы дать вам желаемый эффект. Здесь ссылка на эффект "аккордеона", который звучит как то, что вы собираетесь делать. Расположение меню аккордеона полностью настраивается - так что не беспокойтесь, если вам не нравится дизайн макета по умолчанию.

http://jqueryui.com/accordion/#default

Добавление jQuery на вашу веб-страницу занимает около 30 секунд, но дает вам целую вечность полезных дополнений, анимаций и интерактивной обработки контента для вашей страницы!


u может использовать jquery для смягчения эффектов для вашего меню dropdwon, вот один пример

http://devsnippets.com/article/slick-drop-down-menu-with-easing-effect-using-jquery-css.html

licensed under cc by-sa 3.0 with attribution.