Направете CSS меню, което излиза от основното
Повечето хора, които имат компютри, винаги се опитват да се свържат с интернет. След това всеки може да посети различни сайтове като потребител. Това може да бъде търсене на информация, забавления, обучение, игри, разговори на форуми и др.
С достъп до страницата на сайта потребителят вижда съдържанието му. Това е като съдържанието на книгата, която ще прочетете. Съдържанието се състои от различни групи връзки, които превеждат потребителя на други страници на ресурса или дори на други сайтове. Тези връзки помагат на потребителите да навигират в интернет. Връзките се групират в отделни блокове, представляващи менюто на сайта.
Функционалността на всеки ресурс зависи до голяма степен от това кое меню се използва в него. Менюто на сайта може да има различен дизайн, да има хоризонтална или вертикална ориентация, разположени в долната част, отгоре или отстрани, да бъдат скрити, отворени, падащи, разгънати.
Хоризонтално CSS падащо меню
Хоризонталното падащо меню се използва за организиране на навигацията. структура на сайта. Не трябва да злоупотребявате с броя на нивата, за да инвестирате, не трябва да има повече от две. С повече нива на потребителя ще бъде много по-трудно да се намери необходимата информация. След това ще разгледаме по-подробно метода на създаване на менюто.
Представете си CSS меню, което излиза от основния хоризонтален блок. Нека усложним задачата и да създадем падащо меню на CSS, когато задържите. Трябва да има някакъв главен хоризонтален блок с връзки, представляващи елементи от менюто. След като задържите мишката върху тези точки, трябва да се отворят допълнителни навигационни точки.
За да създадете падащото меню на CSS, трябва да:
- HTML файл;
- CSS файл;
- изображение за фон.
Изображението на фона е спомагателен елемент, който подобрява дизайна и прави менюто стилно.
Създайте html файл
Страниците на всеки сайт могат да бъдат статични или динамични. Статичната страница на сайта, разглеждана в браузъра, се показва във формата, в която е била създадена. Динамичната страница се създава, когато се отвори в браузъра от отделни страници на приставката и допълнителна информация от базата данни. Но във всеки случай, ако отворите страница с изходния код през браузър, ще се покаже HTML страницата на хипертекстовото маркиране. За да създадете меню, трябва да разработите HTML страница и да я запишете в HTML файл. Създайте c-меню, което излиза от главното по този начин. HTML страници могат да се създават във всеки текстов редактор, но е по-добре да се използват специализирани: Notepad ++ или Adobe Dremweaver CSS. Отворете празна страница в редактора, въведете необходимия код и го запазете под името myindex.html. Коментарите могат да се добавят директно в кода между специалните маркери. които се използват в HTML за тази цел.
Разположението на страницата при създаване на падащо хоризонтално CSS меню ще се различава от обичайното стандартно меню, тъй като необходимите елементи от списъка
- или
- ,
HTML код
Трябва да се отбележи, че в HTML всички конструкции между <> скоби се наричат тагове. Етикетите могат да бъдат единични и двойки. Маркерът за двойки трябва да съдържа два чифта скоби <>, а във втората двойка структурата започва с наклонена черта /. При сдвоен маркер първият етикет е отварящ се, а вторият е затварящ.
Създаване на код:
Така можете да създадете безкраен брой елементи и подменю. В самия край затворете всички сдвоени маркери.
Създаване на CSS файл
Файлът е свързан с HTML файла. styles style.css необходимо е не само за правилното позициониране на менюто на страницата на сайта, но и за даване на красив външен вид на менюто, създавайки уникален уебсайт дизайн. CSS файлът се създава в същия редактор като HTML файла, но за разлика от HTML страницата, потребителят ще вижда само резултата от стиловия файл на разглежданата страница. Освен това, когато добавяте коментари към CSS, се използва / * Comment ... * / construct.
CSS код
Създаване на код:
/ * Падащо меню на CSS * /
body {/ * Стил за тялото на страницата на сайта * /
фон: # 0814da; / * Цвят на фона * /
марж: 0; / * Външна подложка * /
пълнеж: 0; / * Вътрешна подложка * /
фамилия: "Trebuchet MS", Arial, Helvetica, sans-serif; / * Семейство шрифтове * /
}
.примера {/ * на целия блок на менюто * /
позиция: относителна; / * Позициониране спрямо произхода * /
фон: # ebecf7 url (../ images / vanbackground.jpg); / * Фон с картина за цялото меню * /
ширина: 525px; / * Ширина на целия блок меню * /
височина: 384px; / * Височина на целия блок меню * /
граница: 1px # 000 твърди; / * Дебелина и стил на границата на целия блок меню * /
марж: 21px авто;
пълнеж: 16px;
}
/ * стилове за меню * /
.navigator, .navigator ul {/ * Блок стил с неномериран списък * /
стил в списъка: няма; / * Отмени маркерите за списъка * /
марж: 0;
пълнеж: 0;
}
.navigator {/ * Стил на блок за навигация * /
позиция: относителна;
}
.navigator ul {/ * Неномериран стил на списък * /
височина: 0; / * Височина * /
наляво: 0; / * Ляво * /
overflow: hidden; / * Част от блока е скрита, ако не съвпада напълно с предоставеното пространство * /
позиция: абсолютна; / * Ние правим абсолютно позициониране * /
отгоре: 47px; / * Над * /
}
.navigator li {/ * Стил на неномерираните елементи * /
поплавък: наляво; / * Завийте от лявата страна * /
позиция: относителна;
}
.navigator li a {/ * Стил със списък от списъци * /
фонов цвят: # 7c75b7; / * Цвят на фона * /
граница: 1px твърдо # 7c75b7;
цвят: #fbfbff;
дисплей: блок; / * Показване по блок. * /
размер на шрифта: 15px; / * Задайте размера на шрифта * /
височина на линията: 34 пиксела; / * Разстояние между редовете * /
пълнеж: 6px 21px;
текст-декорация: няма; / * Текст без дизайн * /
преход: 0.6s;
}
.navigator li: hover> a {/ * Стил на елементите в неномериран списък при преливане * /
фон: # 8fcb38;
border-color: # 7c75b7;
цвят: #fbfbff;
}
.navigator li: hover ul.vipadnoe {/ * Падащо меню със стил Hover * /
височина: автоматично;
ширина: 181px;
}
.navigator ul li {/ * Списък със стилове и елементи * /
-moz-преход: 0.7s;
}
.navigator li ul li {/ * Стил-елемент-списък-елемент * /
-moz-transition-delay: 1s;
}
.navigator li: hover ul li {/ * стил на мишка с мишката * /
}
.navigator ul li a {/ * Списък със стил-елемент-връзка * /
фон: # 7c75b7;
border-color: # 7c75b7;
цвят: #fbfbff;
line-height: 2px;
-moz-transition: 1.7s;
-о-преход: 1.7s;
-webkit-преход: 1.7s;
преход: 1.7s;
}
.navigator li: hover ul li a {/ * Елемент-списък-елемент-връзка на курсора * /
височина на линията: 36px;
}
.navigator ul li a: hover {/ * Списък със стил, плюс връзка за навъртане * /
фон: # 8fcb39;
фон-изображение: rgba (41,137,216,0.5);}
След създаването на файловете myindex.html и style.css, те трябва да бъдат поставени в отделна папка. За удобство създаваме в папката “My Documents” отделна демо папка, а в нея CSS папка, където поставяме файла style.css и папка с изображения, където поставяме фоновото изображение, зададено в стиловия файл. За файла myindex.html не създаваме друга отделна папка и я поставяме в демонстрационната папка, която първоначално е била създадена. Сега, като отворите файла myindex.html в браузъра, можете да видите хоризонталното CSS меню, което се появява, когато задържите. Това е всичко.
По същия начин се създава вертикално падащо меню в CSS, но само за него ще трябва да разработите малко по-различен стилов файл.