CSS - хоризонтално меню за начални уеб дизайнери
HTML и CSS са езици за уеб програмиране, необходими за оформлението на сайта. А начинаещ кодиращ, който реши да овладее основите на тази професия, трябва да започне с изучаването им, защото е възможно да се създаде прост уебсайт, базиран на тях. 
На HTML и CSS, хоризонталното меню за сайта е лесно за изграждане, трябва да започнете с писане на рамка.
Изграждане на рамка
Първо трябва да направите html маркиране. Менюто е най-лесно да се направи списък с маркер с помощта на маркера
- , Маркерът е сдвоен, така че трябва да се затвори в края на списъка.
например:
Това е базата, която след това се формира в CSS в хоризонтално меню, фиксирано или падащо.
Хоризонтално меню
След като кодът е маркиран, е време да се заемем със стила. Трябва да се отбележи, че сдвоените тагове, използвани за рамката по подразбиране, са блокови, което означава, че за да се създаде едновременно редовно и падащо хоризонтално меню в CSS, трябва да промените типа на елемента на малки. Това може да се направи с помощта на свойството на дисплея. Той се добавя към елемента:
.menu li {
дисплей: inline;
}
Така тя се превръща в хоризонтална. Ако има много подпозиции, те могат да се преместят в нов ред без допълнително определени свойства. В този случай използвайте свойството за показване на пространства и прехвърляне на текст. Nowrap запазва текста изцяло, без сричкопренасяне, а предварителното обвиване спестява пространства от HTML и добавя автоматични.
.menu li {
дисплей: inline;
бяло пространство: nowrap;
}
За да не вкарвате ред в твърд текст, можете да подредите информацията в групи и да създадете допълнително подменю, което да показва точно всичко, от което се нуждаете. Подменютата могат да бъдат падащи или отворени.
Падащо меню
След овладяване на основите на изграждане на хоризонтално меню в CSS, подменю, което излиза от него, може да бъде подредено във вертикален списък. Списъкът в маркирането трябва да бъде направен на няколко нива, да се добавят допълнителни тагове за маркираните списъци в желаната позиция. Маркерът трябва да съдържа следните елементи от списъка:
В css .menu, li се заменя с ".menu> li", така че вътрешните елементи да станат вертикални. Относителното позициониране се добавя към родителския селектор, в който елементът се премества от границите на родителския блок, а към детето - абсолютен (напълно премахва от потока и се координира от най-близкия елемент, а ако не, от границите на браузъра). Елементи с относително позициониране могат да съдържат вътрешни елементи с абсолютно позициониране. Това означава, че когато блокът се движи с позиция: относителна, неподвижните части ще останат на мястото си.
Стандартно, падащата част винаги остава отворена, освен ако не добавите дисплей към елемента само когато задържите курсора. За да направите това, допълнителният списък е скрит по подразбиране:
.menu> li {
дисплей: inline;
позиция: относителна;
}
.menu .second {
позиция: абсолютна; (подменюто се свързва с родителското устройство)
дисплей: няма; (скрий дисплея)
}
.menu> li: hover .second {(използва се псевдо-класа на hover, за да се покажат списъците с наведени бутони)
дисплей: блок;
}
Резултатът ще бъде малко, чисто меню.
Фиксирано меню
За да се заснеме създаденото в отворена форма, свойството на дисплея със стойността да се използва по аналогия с падащото меню, но без да се крие дисплея. Ако желаете, можете да коригирате не само отворения списък, но и лентата с менюта, когато прелиствате страницата. Когато потребителят превърти текста надолу, менюто винаги може да остане на върха, което улеснява навигацията в сайта. Този елемент има няколко функции. Тя е много подобна на абсолютната, но се свързва само с браузъра, изпадайки от потока. Удобно е да се координира такъв елемент, като се използват обичайните свойства отгоре / отдолу, наляво / надясно. Пример за хоризонтално меню с падащи елементи, фиксирани в браузъра:
.menu> li {
дисплей: inline;
позиция: фиксирана;
}
.menu .second {
позиция: абсолютна;
дисплей: няма;
}
.menu> li: hover .second {
дисплей: блок;
}
Добавя се свойство position с фиксираната стойност, след което менюто остава на място при превъртане. Дори един начинаещ може да се справи с това меню. Списъкът с HTML маркиране - прост и удобен. За правилно показване на CSS стилове в браузър, препоръчва се да се запомнят стайлинг точките в блоков изглед, добавяне на граници и координиращи елементи, вътрешни и външни отстъпи, така че описаните точки да не се наслагват един върху друг. Често забравяйте да добавите ширината и височината на елемента. За да се покаже желаният елемент извън видимата част за последващо проектиране, можете да използвате свойството float, за да го „заковавате” с дясната или лявата страна (float: right;).