Навигационни Менюта
Всеки уебсайт е важно да има лесно за използване навигационно меню. Със CSS можете да трансформирате скучни HTML менюта в добре изглеждащи навигационни ленти.
Navigation Bar = Списък от връзки
Навигационната лента се нуждае от HTML елементи като база. В нашите примери, ние ще изградим лентата за навигация от стандартен HTML списък. A навигационна лента е просто списък от линкове, така че използването на <ul> и <li> е идеален начин за оформление:
Сега нека да премахнем маркерите, маргините и падингите от списъка:
Обяснение на примера:
- list-style-type: none – Премахва маркерите. A лентата за навигация не се нуждае от тях
- Махаме маргините и падингите, за да премахнем настройките по подразбиране на браузъра. По този начин, избягваме възможността сайтът ни да се „счупи“ при някои браузъри
Кодът в примера по-горе е стандартният код, използван в двете вертикални и хоризонтални ленти за навигация.
Vertical Navigation Bar
За изграждането на вертикалната лента за навигация, само трябва да оформим <a> елементите, в допълнение към кода по-горе:
- display: block – Показване на уеб връзките като блокови елементи, прави цялото блокче годно за кликане, а не само текста. По този начин можем да определим и ширината
- width: 60px – Блок елементите заемат цялата ширина, която е възможна по подразбиране. Искаме да уточним ширина 60 пиксела
Съвет: Също така да погледнете нашата напълно оформена вертикална лента за навигация . Забележка: Винаги определяйте ширината за <a> елементи във вертикалната лента за навигация. Ако пропуснете ширината, IE6 може да доведе до неочаквани резултати.
Хоризонтален Navigation Bar
Има два начина за създаване на хоризонтална лента за навигация. Използвайки inline или float елементи. И двата метода работят добре, но ако искате връзките, да бъдат със същия размер, ще трябва да използвате метода float.
Inline List Items
Един от начините за изграждане на хоризонтална лента за навигация е като определим <li> елементите като Inline.:
- display: inline; – По подразбиране, <li> елементите са блокови елементи. Ето, премахваме новите редове, преди и след всеки елемент от списъка, за да ги покажем на един ред
Floating List Items
В примера по-горе връзки имат различни ширини. За, да имат всички връзки еднаква ширина, float-нете <li> елементите и определете ширината на <a> елементите:
- float: left – Кара елементите да застанат един до друг
- display: block – Показваме връзките като блокови елементи – това прави целия линк, да бъде кликван(а не само на текста), и можем да определим ширината
- width: 60px – Ако блок елемента заеме цялата ширина на разположение, те няма да могат да float-нат един до друг. За това определяме ширината на връзките като 60px
Съвет: Също така погледнете нашата напълно оформена хоризонтална лента за навигация .