Плавно відкривається меню за допомогою css, дизайн і розробка сайту

Доброго времени суток 🙂

Давненько я не писав статті про всякі цікаві способи анімації за допомогою CSS. Що ж, будемо виправлятися. Тому сьогодні мова піде про те, як прикрасити звичайне горизонтальне меню. Зробимо це, не прикрашаючи його, а додавши один невеликий ефект. Його суть полягає в плавному відкриванні меню, що випадає. З його допомогою замість різкого появи, випадає плавно розкриється зверху вниз.

Здійснимо нашу задумку за допомогою звичайнісінького CSS. У наступній статті, якщо не забуду, то опишу цей же ефект з допомогою jQuery. Але а поки, давайте приступимо до розбору даного методу. Але, спочатку запропоную подивитися, що вийде в підсумку:

Насамперед, давайте напишемо HTML код нашого меню. Меню буде найпростішим. Для прикладу у нього буде 2 пункту у кожного з яких буде список, що випадає з підпунктами.

Думаю тут все зрозуміло, найпростіше 2-х рівнева меню. Як і говорив, меню має два головні пункти, можете додати скільки завгодно, якщо потрібно. Далі потрібно просто додати стилі, які і зроблять всю магію 🙂

Код CSS не маленький. але за своєю суттю не складний. Якщо Ви володієте навичками верстки, то запросто розберетеся що і як. Я лише зупинюся на деяких моментах, які є важливими.

max-height: 0px; і прописуємо властивість overflow: hidden ;. щоб приховати наше дочірнє меню, тобто випадає. Далі вже прописуємо кросбраузерності властивість transition. яке зробить анімацію.

Тут можете змінити хіба що час анімації. В даний момент час задано 0.4 секунди. Відразу після того як поставили анімацію, додано властивість. для завдання нової висоти при наведенні на головні пункти меню:

Тут така картинка. Висота задається максимальна фіксована, якщо у Вас висота меню, що випадає буде побільше, то і значення міняйте на більше. В іншому випадки Ваше меню обріже по висоті 300 пікселів.

Далі вже задаємо стилі для меню, що випадає, так що на них докладно зупинятися не буду. Ту як би і все. Це і є весь спосіб. Він простий і дієвий і справляється зі своїм завданням на всі 100%.

Даний спосіб можна застосовувати не тільки до самопісний меню а й до тих же динамічним меню, які створюються системами управління сайтом, наприклад WordPress. Для цього потрібно небагато підправити стилі і все. Тобто перший HTML код використовувати не потрібно, тільки стилі. У стилях потрібно замінити ім'я айди #slow_nav на те що буде у Вас, ну і можливо підправити ще щось по дрібницях. Докладно зупинятися не буду. Для кожного випадку потрібен персональний підхід, так що вже вибачайте 🙂 Я дав ідею і спосіб, а Вам вирішувати, застосовувати його чи ні.

На цьому все, спасибі за увагу. 🙂

Якщо Вам був корисним моя праця, можете підтримати сайт :)

Привіт дорогий друже

У тебе встановлено розширення AdBlock або подібне. Додай мій сайт в білий список, і тим самим внесеш свій внесок в його розвиток. Інструкція як відключити AdBlock Хочу й собі віконце