Обикновено хоризонтално меню различни браузъри с помощта на CSS

Така че тук и да отидем. Създаване на списък с имената на нашето меню. Най Оставете ги да бъдат такива, че да търсите: "Home", "Новини", "Продукти", "Услуги", "Партньори", "Контакт". Създаване на нов файл, наречен menu.html. например чрез програма Dreamweawer или с помощта на обикновен лаптоп. На мястото му между маркерите на тялото на нашето меню. Тя обикновено е с етикет със списък от елементи, ул Ли. Разбира се, всеки елемент от менюто, се обръща внимание, когато, вместо на URL адреса въведете #. Използване на Photoshop програма ще създаде размер 3x30 пиксела изображения с градиент на запълване, както е показано на фигурата по-долу. Файловете се съхраняват в GIF формат. Наречете го bg.gif. Тази цифра ще служи като фоновото изображение на нашето меню.

Ето и съдържанието на menu.html на файлове:

Сега, създаване на отделен лист със стилове файл, наречен main.css. Неговото пълно списък по-долу.

За да обобщим. Резултатът е напълно krosbrauzernoe хоризонтално меню, което изглежда по същия, не само във всички съвременни браузъри, но и рядкости като IE 5.5 и IE 6.0. Всички елементи от менюто са представени като блокови елементи и да имат еднакви размери по ширина и 100 пиксела височина 30px. Както меню сепаратор регистрация т блок елемент с граничния точно в бяло 1 пиксел, дебела. Това е на практика най-лесният начин за изпълнение на хоризонтален лентата с менюта. Разбира се, това може да бъде променено, ако е необходимо, да направи по-красив и функционален използване фантазия свойства на CSS и допълнителни графични елементи. Е, нашата хоризонтално меню изглежда така:

Предимствата на това решение:
Лесен за изпълнение
прост код
Все още няма маси и й # 097; vascript
съвместимост различни браузъри: меню във всички браузъри изглежда по същия начин
Използва се само на една снимка
код поне menu.html страница
код поне за прилагане на стилове в main.css

Файловете използвани в този пример, можете да изтеглите архив menu.zip [1,94 Kb]

Свързани новини: