Падащо меню в html. Как да центрирате хоризонтално меню

Този ред е предшестван от 2 реда, очевидно ирелевантни (Начало
и Изглед на вертикално меню). Отнема време на човек, който не е запознат с новия материал (тоест само този, за който сте писали), за да разбере, че тези редове не са необходими за падащото меню. Или все още са необходими?

Във вашия пример има 3 реда в заглавката. От тях само един е свързан с темата (определя името на DSN файла), а другите 2 не са. Освен това затруднява овладяването на материала. Освен това на моя компютър такова заглавие обикновено води до неправилно показване на текст, тъй като трябва да поставя не "utf-8", а "Windows -..."

В примера не е ясно, че думите "style.css", "block-menu" и "nav" не са ключови думи, а имена, дефинирани от потребителя. Разбрах го експериментално

Накратко, бих искал примерите да съдържат само релевантното за случая, още повече, че на редовете, които не са ясни в контекста, да се пише какъв вид "относими към случая" имат.

• Влезте, за да оставяте коментари

Олег сб, 20.09.2014 - 23:50ч

Най-обемният коментар!!!
Коментарите се предават само след модериране, така че не сте видели коментара си веднага.
Ще се опитам да отговоря на всичко. Нека започнем с въпроса защо е това тук. Две връзки изтекоха от работната версия.
Относно неправилното показване на текста. Успяхте да прочетете и коментирате тази страница, въпреки факта, че има същото кодиране като примера в публикацията.
Тази публикация не е предназначена за абсолютно начинаещи и е написана по желание на абонатите. Ако обясните абсолютно всичко, ще трябва да говорите за класове и идентификатори, блокове, позициониране, псевдоселектори, каскада и т.н. Ще се окаже доста дълга статия и, най-важното, безполезна.
ul.nav li: hover> ul (display: block;) ще покаже скрития по-рано елемент. Ако го анализираме по буква, тогава (тук разглеждаме кода успоредно) при задържане на курсора на мишката върху елемента от менюто (ul.nav li): задържането на курсора ще се задейства и първият вложен списък> ul ще бъде видим поради факта, че стойността на дисплея ще се промени от none на block.

Хабр, здравей!

В Codepen се появяват много добри решения от различни специалисти и вярвам, че най-добрите от тях трябва да бъдат събрани на едно място. Затова преди 2 години започнах да записвам интересни скриптове на различни теми на моя компютър.

Преди ги публикувах в облачната продуктова група IDE mr. Gefest, това бяха сборки от 5-8 решения. Но сега започнах да натрупвам 15-30 скрипта в различни теми (бутони, менюта, съвети и т.н.).

Такива големи комплекти трябва да се показват на повече професионалисти. Затова ги публикувам в Хабр. Надявам се, че ще ви бъдат полезни.

В този преглед ще разгледаме многослойните менюта.

Плоска хоризонтална навигация

Приятна навигационна лента с плавно появяващи се подменюта. Кодът е добре структуриран, използва се js. Съдейки по използваните функции, работи в ie8+.
http://codepen.io/andytran/pen/kmAEy

Заглавка на материалната навигация с подравнени падащи менюта

Отзивчива лента с връзки с подменю с две колони. Всичко се прави в css и html. Приложени css3 селектори, които не се поддържат в ie8.
http://codepen.io/colewaldrip/pen/KpRwgQ

Гладко падащо меню за акордеон

Стилно вертикално меню с плавно падащи елементи. Използва се Transition, transform js-код.
http://codepen.io/fainder/pen/AydHJ

Pure CSS Dark Inline навигационно меню

Тъмна вертикална навигационна лента с икони от ionicons. Прилага се Javascript. В ie8 най-вероятно ще работи без анимация.
http://codepen.io/3lv3n_snip3r/pen/XbddOO

Pure CSS3 Mega падащо меню с анимация

Стилно меню с два изходни формата: хоризонтален и вертикален. Използват се икони и css3 анимация. В ie8 определено ще изглежда ужасно, но в други браузъри всичко е страхотно.
Вертикална връзка: http://codepen.io/rizky_k_r/full/sqcAn/
Хоризонтална връзка: http://codepen.io/rizky_k_r/pen/xFjqs

CSS3 падащо меню

Хоризонтално меню с големи елементи и падащ списък с връзки. Изчистен и минималистичен код без js.
http://codepen.io/ojbravo/pen/tIacg

Просто Pure CSS падащо меню

Просто, но стилно хоризонтално меню. Използва се от font-awesome. Всичко работи в css и html, без js. В ie8 ще работи.
http://codepen.io/Responsive/pen/raNrEW

Мега падащо меню на Bootstrap 3

Отлично решение за онлайн магазини. Показва множество нива на категории и големи изображения (например артикули на склад). Той е базиран на boostrap 3.
http://codepen.io/organizedchaos/full/rwlhd/

Плоска навигация

Стилна лента за навигация с плавни подменюта. Ще се показва с проблеми в по-стари браузъри.
http://codepen.io/andytran/pen/YPvQQN

3D вложена навигация

Хоризонтално меню с много готини анимации без js!
http://codepen.io/devilishalchemist/pen/wBGVor

Отзивчиво мега меню - Навигация

Хоризонтално отзивчиво меню. Изглежда добре, но мобилната версия е малко куца. Използвани css, html и js.
http://codepen.io/samiralley/pen/xvFdc

Чисто меню Css3

Оригинално меню. С прост и чист код без js. Използвайте за уау ефекти.
http://codepen.io/Sonick/pen/xJagi

Пълно CSS3 падащо меню

Цветно падащо меню с едно ниво на влагане. Използват се икони от font-awesome, html и css.
http://codepen.io/daniesy/pen/pfxFi

Падащо меню само за Css3

Доста добро хоризонтално меню с три нива на гнездене. Работи без js.
http://codepen.io/riogrande/pen/ahBrb

Падащи менюта

Минималистично меню с оригинален ефект на външния вид на вложен списък с елементи. Радвам се, че това решение също е без javascript.
http://codepen.io/kkrueger/pen/qfoLa

Чисто CSS падащо меню

Примитивно, но ефективно решение. Само css и html.
http://codepen.io/andornagy/pen/xhiJH

Издърпайте меню - Концепция за взаимодействие с менюто

Интересна концепция за меню за мобилен телефон. Не съм виждал това преди. Използвани html, css и javascript.
http://codepen.io/fbrz/pen/bNdMwZ

Направете просто падащо меню

Чист и прост код, без js. В ie8 определено ще работи.
http://codepen.io/nyekrip/pen/pJoYgb

Чисто CSS падащо меню

Не е лошо решение, но има твърде много използвани класове. Радвам се, че няма js.
http://codepen.io/jonathlee/pen/mJMzgR

Падащо меню

Хубаво вертикално меню с минимален javascript код. JQuery не се използва!
http://codepen.io/MeredithU/pen/GAinq

CSS 3 падащо меню

Хоризонтално меню с допълнителни надписи може да украси добре вашия сайт. Кодът е прост и ясен. Javascript не се прилага.
http://codepen.io/ibeeback/pen/qdEZjR

Приятно решение с много код (html, css и js). Измислени са 3 формата на подменюта. Решението е много подходящо за онлайн магазини.
http://codepen.io/martinridgway/pen/KVdKQJ

Падащи менюта на CSS3 (Специално решение)!

Тъмно хоризонтално меню с тринадесет (13) опции за анимация! Определено ви съветвам да го прочетете, ще ви бъде от полза в ежедневието.
http://codepen.io/cmcg/pen/ofFiz

P.S.
Надявам се, че сте харесали сглобяването на 23 решения. Ако искате да ги прочетете допълнително, преминете през анкетата по-долу.
Насладете се на работата си, всички.

Поздравления! Ако сте начинаещ дизайнер на оформление, тогава рано или късно ще се натъкнете на факта, че искате по някакъв начин да съживите страниците си, да ги направите поне малко интерактивни. CSS анимациите могат да ви помогнат тук. Но трябва да знаете къде и как да ги приложите.

Днес ще ви разкажа как да направя падащо меню на чистCSSи как да му добавите гладкостс помощта на CSS анимация. Ако не знаете, значи е време да се запознаете с основите.

Оформете менюто HTML + CSS

Първо, за да имаме с какво да работим, нека изложим просто меню на едно ниво. Нека не се занимаваме твърде много с дизайна, за по-голяма яснота това е достатъчно:

какво имаме? Най-обикновен неподреден списък с идентификатор "top_menu" и с връзки, увити в елементите на самия този списък. Всичко е банално и просто. При задържане на мишката елементите на менюто променят цвета си ... вече знаете това и разбирате как да го направите (надявам се).

Добавяне на меню от второ ниво

За да направим многослойно меню, трябва да добавим втори неподреден списък вътре в първия. Мисля, че си го издържал някъде в началните уроци. И също така фактът, че трябва да го вмъкнете не само в нашия списък, но и в елемента на списъка, тоест маркера „ ли", Веднага след затварянето" "таг.

Ние позиционираме вложените списъци абсолютно във връзка с " ли„В което са инвестирани. И всичко " ли»Горното ниво е позиционирано спрямо ( роднина). За да бъде падащото меню ВЕДНАГА след нашето меню от най-високо ниво, то (падащото - “ вътрешно_меню”) Трябва да зададете

Позиция: абсолютна; отгоре: 100%;

Тоест, запълването от горната граница на родителя ще бъде равно на височината на родителя. Много логично според мен.

В допълнение към позиционирането, трябва да стилизирате падащото меню като меню от най-високо ниво. Ябълка от ябълково дърво, както се казва ...

Както можете да видите, нашето падащо меню все още не изглежда падащо, а изпуснато и висящо. Но нищо, скоро ще го оправим.

Как да направите падащо меню наистина падащо

Не може да бъде по-лесно! За да направите нашия вложен списък, просто трябва да го скриете! И след това се отваря само когато курсорът на мишката премине върху елемента от менюто от най-високо ниво, който съдържа падащо меню. Може да звучи малко сложно, но в действителност може да се реши само с няколко реда код.

Добавете падащото меню:

Дисплей: няма;

И за да го покажете, трябва да се регистрирате:

#top_menu> li: hover> ul (дисплей: block;)

Какво ни казва цялата тази група селекционери? Четем от края. Ние задаваме стилове (видимост) за списъка от второ ниво, който се намира вътре в елемента на списъка от първо ниво, но тези стилове ще работят само ако задържим курсора на мишката (задържаме курсора на мишката) над „li "който съдържа нашия списък от второ ниво.

Надявам се, че съм се изразил ясно. Ако не, опитайте да го прочетете няколко пъти. Още по-добре, просто го разберете, като погледнете кода. Да видим какво имаме:

Да, май постигнахме това, което искахме - направихме падащо меню, истинско падащо меню, майната му! Но нещо му липсва. Знаеш ли какво? Гладкост! В крайна сметка всичко изглежда така, сякаш менюто не отпада, а просто се появява. И много рязко, дори мигновено, бих казал.

Е, нека му направим малко магия още малко.

Плавното падащо меню е лесно

Така че нека направим гладко падащо меню в чист CSS. Защо да правя това? Защото хората обичат, когато всичко е гладко и меко... и изглежда красиво. Ще има плюс за използваемостта на вашия сайт. Да тръгваме!

Не забравяйте, че можете да анимирате само точни математически стойности, като 50px и 300px, 0 и 100%, 0,5 и 1,0 и т.н. В нашия случай няма да можем да анимираме двете състояния на нашето падащо меню ( дисплей: няма;и дисплей: блок;).

Но можем да ги заменим с прозрачност - непрозрачност: 0 и непрозрачност: 1. И задайте времето, през което нашето меню ще се показва от прозрачно състояние. Да, работи, но не е точно този ефект, който бихте очаквали. Така че нека го направим малко по-трудно. Но си заслужава, повярвайте ми.

За да направим анимацията по-гладка и по-предвидима, трябваше да зададем фиксирана височина за елементите на падащото меню, въпреки че можеше да се направи и без нея. Има много методи, просто измислете комбинации и решавайте проблеми.

Както можете да видите от кода, ние сме анимирали височината на падащите елементи и тяхната прозрачност. Това се оказа достатъчно, за да се направи хубава течаща анимация на падащото меню.

Какво ни трябваше за анимацията? Две състояния на нашите елементи от менюто, както и свойството за преход, което интерполира тези състояния, тоест запълни всички междинни стойности в определения интервал от време. Това е всичко!

Можеше да бъде дори по-лесно с jQuery, но първо казахме, че днес ще работим с чист CSS. И бихте могли да го направите още по-красив, като добавите криви на Безие към анимациите, но тази тема е малко извън обхвата на днешния ден. Но определено ще се върнем към него по-късно.

Изход:

Сега можете да се похвалите пред приятелите и семейството си, че знаете как да направите падащо меню в чист CSS. Това е наистина полезно умение, което ще ви бъде полезно отново и отново. Е, преценете сами, колко сайта сте виждали със статично меню? Не, повечето сайтове имат падащо меню.

Между другото, това беше първият ми урок за CSS. Опишете как ви харесва? Обясни ли всичко ясно или трябва да го сдъвкваш още повече? И заслужава ли си изобщо да продължаваме да пишем статии за CSS лайфхакове?

Благодаря за вниманието и до скоро!

Прочетохте ли до самия край?

Тази статия беше ли полезна?

Не точно

Какво точно не ти хареса? Статията беше непълна или невярна?
Пишете в коментарите и обещаваме да се подобрим!

Здравейте скъпи читатели на моя блог! Днешната статия ще бъде много полезна за начинаещи дизайнери на оформление. От днес ще създаваме просто хоризонтално меню с вас. Преди да пристъпим директно към оформлението, искам да кажа няколко думи за това защо реших да избера тази конкретна тема за статията.

Всъщност всичко е доста просто, когато мислех за темата на следващия урок за сайта, започнах да си спомням и анализирам опита си от изучаване на оформление, с какво трябваше да се сблъскам в началния етап, за да стана себе си като оформление дизайнер, което ми беше най-неразбираемо при изучаване на тази област и т.н. Зададох си всички тези въпроси, за да разбера по-добре какво може да представлява интерес за човек, който започва своето пътуване като дизайнер на оформление. И лично при мен, щом започнах да уча оформление, най-много въпроси се появиха за оформлението на различни менюта, особено когато става въпрос за многостепенни менюта. И така днес ще говорим за менюто и по-точно за хоризонталното меню. Така че тръгваме!

Да започнем оформлението на нашето хоризонтално меню!

Както вероятно се досещате, първото нещо, което трябва да направим, е да създадем html страница със стандартно маркиране и да свържем листа със стилове към нея. Няма да се спирам подробно на тази стъпка, тъй като все още се надявам, че не сте достатъчно начинаещ, за да ви разкаже подробно какво представляват тялото и главата и как са свързани стиловете. Само ще кажа, че в допълнение към стиловете за нашето меню, ще напиша най-простото нулиране в css файла, за да нулирам стиловете и да постигна еднакъв отстъп във всички браузъри. Ето как изглежда най-простото ми нулиране:

Няма да кажа нищо подробно и за нулирането на стилове, тъй като всъщност това е тема за друга статия, единственото нещо, което трябва да знаете за горния код е, че благодарение на този код всички елементи на страницата, които ще напишем, ще имат техните полета и полета се нулират. padding, това трябва да се направи, за да изглежда нашата страница еднакво във всички браузъри.

И така, какво имаме на този етап? Имаме html страница със стандартно маркиране:

И имаме лист със стилове, свързан с тази страница (моята е style.css), със следното съдържание:

Следващата стъпка е да създадем html маркировка за нашето меню.

Как да създадете маркировка за менюто

В нашата маркировка ще използваме нов таг