337

Горизонтальне меню на CSS

На всіх сайтах, однією з основних деталей верстки – є головне меню. Зазвичай воно розміщене горизонтально, відразу під шапкою, або ж і є шапкою. У статті описується як реалізувати простеньке меню, за допомогою CSS i HTML.

Нічого складного і нового, але сподіваюся для новачків буде корисно, а знавцям – цікаво. Як і в попередній статті, спочатку покажу CSS код, а потім і HTML, в кінцевому результаті ми отримаємо наступне: меню


І так таблиці CSS:

Навіть не знаю що тут пояснювати – настільки все просто. Єдине, на що зверну увагу, це розміри, які задаються одиницею em. 1em – рівне ширині літери M використовуваного шрифта. Кольори можна завжди замінити на свої, і ще один параметр: border-radius– задає круглі кути, це параметр CSS3 він може в старих браузерах не працювати, це потрібно обов’язково врахувати.

Ну і HTML код:

Тут ще простіше – простий масив посилань, навіть не списком.

Ось так легко і швидко, можна написати цікаве меню, яке, хоч і найпростіше, але ефектно виглядати на будь-якому статичному сайті, де не потрібно перевантажень різними скриптами, графікою та іншим непотрібним дизайнерським мотлохом. Сподіваюся був корисним.

Читайте також: