Как да направите хоризонтално меню за уеб сайт
Класически начин за навигация на сайта е хоризонтално меню в заглавната част. Нека да видим как да се направи проста хоризонтално меню в HTML и CSS.
Обикновен HTML меню
По смисъла на менюто е списък на секции на сайта, така че е логично да се използва менюто етикет UL - списък с водещи символи. В допълнение, HTML5 има нов маркер, който трябва да се използва за обозначаване на района на плаване на сайта - навигация. Използването на тези две тагове позволи по-точно на търсачката да се разбере структурата на нашия уебсайт.
Като пример, да вземе менюто на 4 елемента: Дом, статии, услуги и контакти. Така HTML кода на нашето меню ще изглежда така:
Ако NAV се използва само за основната хоризонталното меню, което можете да направите, без да е класа и всички стилове са описани с помощта на навигационна като отправна точка за избор. Но аз ще покажа няколко опции на менюто, така че добавената hmenuA клас. така че можете да прилагате различни стилове с различни опции на менюто. Буквата А в края на класа, тъй като ще има повече възможности за В и С
Досега нашето меню е доста за разлика от хоризонталата. Тя изглежда така:
Първият списък на символите, трябва да бъдат отстранени и допълнително подложка:
Елементите на списъка, които използваме режим инлайн блок:
Този режим означава, че "извън" елементи на списъка ще бъдат третирани като малки елементи, т.е. те ще вървят в една линия. Вътре, те ще продължат да блокират елементи. Оказва хоризонталната лента на менюто:
Вижте разликите между елементите на менюто? Това не е тире, текстът и реални пространства. Те произтичат от факта, че HTML-кодът е разделена на няколко реда, и "празни" герои между менюта браузър интерпретира като пространства между "думи". Тази функция трябва да се обмисли, когато използвате режим инлайн блок.
По принцип, тези пропуски, ние наистина не пречат. Но ако сте в меню vorstke трябва да настроите точното разстояние уплътнение между елементи от менюто или натиснете елементите от менюто един до друг, без наличието на тапицерия, пропуски ни пречат. Ето защо, когато vorstke хоризонтални панели инлайн блок-то реши да премахне всички ненужни интервали. Оправих меню HTML код, така че етикетите не са имали допълнителни интервали. За да прочетете кода бил нормален, аз слагам нови редове вътре тагове, преди ъгловата скоба затваряне. Ето един код, получен чрез:
Сега пространствата са изчезнали:
Не се страхувайте, че елементите на менюто са се слели. Сега ние добавите малко украса, и всичко ще бъде много по-хубаво:
текст-приравни: център се използва за привеждане в съответствие на менюто на страницата. По този начин ние сме посочили, че елементите на менюто трябва да се разглежда като малка elemenity, те са изравнени с помощта на текст подравняване.
височина Меню попитах аз, като се посочва линия височина. Този метод позволява да се активира едновременно височината на блока и подравняване на текст и вертикално в центъра на квартала.
За таг, аз също така поиска режим на дисплея: блок. то се позовава, на който можете да Нада, целият елемент от менюто правоъгълник, а не само една малка част от текст.
Как ще се държи нашето меню с намаляване на ширината на страницата? Намаляване на ширината на прозореца на браузъра, така че менюто е вече не се вписват в него. Какво става? Меню на двуредов еднократна stanovistya. (Или дори три и chetyrohstrochnym, ако направите прозореца на браузъра си прави тесен.)
Ако не искате да се превърне в менюто няколко реда, ще трябва да се ограничи минимална ширина на страницата, изберете подходяща стойност мин ширина на тялото маркер.
Нека добавим малко анимация. Най-лесният вариант - да се подчертае елементите на менюто с мишката. Но толкова просто подчертаване - това е доста скучно, нека да направим това, че се появяват и изчезват постепенно.
Добави в стиловете на следното:
Друг вариант на анимацията:
Нека да видим още няколко възможности за това как можете да подредите в менюто. Всичко е ограничен само от вашето въображение.
Меню с плоски клавиши
опция от менюто с плоски бутони и появата на граничния навъртам:
Меню с релефни сепаратори
Манипулиране на цветни граници на кръстопътя на елементите от менюто, можете да постигнете появата на псевдо-облекчение линия. Подобен меню се използва в заглавната част на сайта.
Анимирани менюта с надписи
Ница меню с надписи, които се появяват, когато се движите мишката: