Пятница, 29.03.2024, 03:15
Приветствую Вас Гость | RSS
Главная Создание горизонтального меню - ФорумРегистрацияВход
[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Форум » Все для вебмастера!!! » Горизонтальное меню » Создание горизонтального меню
Создание горизонтального меню
Armen_Chelsea
Офлайн
Дата: Воскресенье, 25.12.2011, 10:39 | Сообщение # 1
Постов: 182
Урок посвящен созданию горизонтального меню на основе неупорядоченного списка и визуального оформления с помощью CSS-стилей. Неупорядоченный список вместо буквенной или цифровой нумерации предполагает использование различных символов, называемых маркерами. Список располагается внутри контейнера <UL>. Каждый пункт списка начинается стандартным тегом <LI>.

К чему стремимся:


Code
<ul>
     <li><a href="#">Home</a></li>
     <li><a href="#">About us</a></li>
     <li><a href="#">Portfolio</a></li>
     <li><a href="#">Contact us</a></li>
     <li><a href="#">FAQ</a></li>
</ul>


В данном примере меню располагается по центру страницы. Данный параметр будет зависеть от ширины внешнего блока, т.к. ширина меню составляет 100%.

С помощью CSS стилей придадим создаваемому меню желаемый вид.

Code
*{
  margin:0;
  padding:0;
}
.page{
  margin:0 auto;
  width:995px;
}
ul{
  list-style:none;
  width:100%;
  height:40px;
  background:#000 url(images/bg-nav.gif) top left repeat-x;
}
ul li{
  float:left;
  border-right:1px solid #333;
}
ul li a{
  display:block;
  height:40px;
  padding:0 35px;
  float:left;
  text-transform: uppercase;
  font:70%/40px Helvetica,"microsoft sans serif",arial,sans-serif;
  color:#fff;
  text-decoration:none;
  text-align:center;
}
ul li a:hover,
ul li.active a{
  background:url(images/bg-button.gif) top left repeat-x;


Посмотреть пример горизонтального меню »

Скачать пример горизонтального меню »
Форум » Все для вебмастера!!! » Горизонтальное меню » Создание горизонтального меню
  • Страница 1 из 1
  • 1
Поиск:

ОБМЕН БОЛЬШИМИ БАННЕРАМИ 468x60
Последние обновленные темы:
Администратор - Армен Адамян © 2024