На тази страница са примери за създаване на хоризонтална меню на сайта с помощта на HTML и CSS. В допълнение, препратките са разположени хоризонтално, те споделят друга особеност на тези меню - текстови връзки вътре - това наистина е текста в тага . вместо на изображението, когато текстът е част от картината.
Често срещана практика е да се създаде списък навигация-базирани, така и ние ще разгледаме тези опции. За по-голяма намаляване примери кодовите няма да се използва всякакъв вид декоративни изкушения кръгли ъглите, но трябва да се помни, че връзките в CSS толкова много начини, по които могат да се променят. Ето защо, ако искате, можете лесно да добавите необходимия код за CSS стилове, за да се появи хоризонтална меню, което ви трябва.
И още нещо. Във всички примери, ще попаднете на елемент от менюто с клас = "ток" (ток), която не съдържа връзка. Това е демонстрация и показва как трябва да изглежда като елемент от менюто, което съответства на страницата, на която се намира потребителят. Фактът, че в интернет е добра практика липсата на връзки към страници, които се свързват с нея самата и от другото, за едни и същи служители казват търсачките (Yandex, Google и т.н.).
А просто хоризонтално меню
Най-просто хоризонтално меню с без излишни украшения.
Примерен HTML и CSS: прост хоризонтални меню
Описание пример
- Създаване на списък с водещи символи (таг
- ), Които поставят на HTML-връзките (таг ). Махни от този списък и неговите предмети маркери (CSS списък стил), както и външното поле (CSS марж) и пълнеж (CSS подложка).
- да тагове
- наредени хоризонтално - ние ги вгражда (инлайн) правят с дисплея на имот CSS: инлайн.
- Тъй като елементите на списъка, който сега се подредят ниво, тогава ние можем лесно да ги приведе в съответствие с левия или десния край на блока, като се използва CSS текст подравняване.
Намерете елементите от менюто на един ред и да ги приведе по различен начин - чрез замяна на последните две описания сочат CSS поплавък имот със стойността наляво или надясно. Но тук е необходимо да се разбере, че стойността на предметите ляво ще бъде правилния ред, но в дясно (както е необходимо в нашия пример), че ще обърне реда и трябва да се промени мястото на изгнание.
хоризонтално меню Block (флоат)
Това меню справки са блокове, в които можете да промените ширината и височината, ако е необходимо.
Примерен HTML и CSS: блок с хоризонтално меню поплавък
Описание пример
- С имот CSS плувка: ляв изграждате елементи от списъка хоризонтално и добавяне на всяка една от тях на дясно поле (CSS марж-надясно), така че те не са в непосредствена близост един до друг.
- Направете връзките вградени блокове (CSS дисплея: инлайн блок), така че ако е необходимо, те могат да бъдат преоразмерени. В края попитам всички елементи, необходими хоризонтален дизайн на менюто.
Тъй като ние имаме падащото меню вляво на HTML-елементи, които ще бъдат разположени под навигацията, тя също ще бъдат в състояние obtech. За да избегнете това, можете да направите за прекъсване на потока с помощта на CSS ясна собствеността или разположен в блок с клас = "меню" такава височина, че е гарантирано да бъде по-голяма от височината на връзки.
хоризонтално меню Block (дисплей)
Ние правим още един блок меню, но малко по-различен начин.
Примерен HTML и CSS: блок с хоризонтален дисплей меню
Описание пример
- За изграждане на елементи от менюто в хоризонтален ред се прилага отново дисплей: инлайн. Това впоследствие ни позволява да се приведе в съответствие елементи в списъка с център.
- Е, връзки и етикет с клас = "ток" се трансформира в интегрирани единици, така че да могат да бъдат ясно определени, както и промяна на ширината (CSS ширина) и височина (CSS височина), ако е необходимо.
- Молим всички елементи, необходими клирънс под формата на кадъра, цвета на текста, фона, и т.н.
Хоризонтално меню с раздели
Да се промени предишния пример и да направи меню, което ще бъде подобен на разделите. Такива неща често се използват в уеб сайтове.
Примерен HTML и CSS: блок хоризонтално меню с раздели
Описание пример
Този пример е подобен на предишния, затова считаме, че само разликите.
- Резерв на блока на нашето хоризонтално меню само долната граница на рамка (CSS граничен дъното), както и промяната на подложките (CSS подложка), така че елементите са притиснати към списъка на границата. Този път ние няма да се приведе в съответствие елементите от менюто за някоя от страните или в центъра, просто питам големия лявото поле на блока, така че той ги бутна малко предимство.
- В резултат на действията на първия етап от нашите елементи от менюто, и следователно позоваването вкопчи в долната граница на основния модул. Въпреки това, ние имаме, че те не просто натиснат, и не е налагането на по-ниските части на рамките на справки по тази граница. За да направите това, да поиска от елементите в списъка относително позициониране (CSS позиция: относителна) и да ги измести надолу на разстояние, равно на дебелината на рамката (ние я имаме 2 пиксела). Изместване общо с дъното на имота CSS.
- За позиция "ток" и връзки, когато задържите върху тях курсора на мишката (CSS: навъртам) предифинирахме цвета на рамката отдолу граница (CSS граничен отдолу цвят) и да я направи същото като на фона на тези елементи. Така че ние се скрие долната граница на места, наслагване на връзки и раздели, за да получите ефект.
- Как да направите уеб сайт
Самият безплатно - Уроци по HTML
за начинаещи - CSS начинаещи
за начинаещи - Позоваването
HTML и CSS - примери
HTML и CSS - препратки
Полезни сайтове за уебмастъри - инструменти
Програми за създаване на сайтове