CSS: навигационное меню.
С недавного времени появилось потребность создания большого кол-ва шаблонов под разные сайты. Потихоньку изучаю такую мощную штуку как CSS, и действительно каскадные таблицы стилей в умелых руках творят чудеса.
Неотъемлемая часть любого сайта – меню навигации. Сделать его логично с помощью таких тэгов как <ul> / <li>
получится примерно так :
не очень похоже на меню, правда? И тут в дело вступает css :
убираем точки (на заморском это называется – bullets)
#nav-menu ul {
list-style: none;
}
Уже лучше, теперь нужно расположить элементы списка в одну линию. Делается это следующим образом :
#nav-menu li {
float: left;
margin: 0 2px;
}
Результат :
– далее можно поработать над каждым элементом более тщательно, например создать фон для каждого элемента, чтобы он выглядел как кнопка.
#nav-menu li a {
background: url(background.gif) #fff bottom left repeat-x;
height: 2em;
line-height: 2em;
float: left;
width: 9em;
display: block;
border: 0.1em solid #dcdce9;
color: #0d2474;
text-decoration: none;
text-align: center;
}
Так же не лишним будет задать ширину меню, чтобы избежать возможных наложений элементов дизайна.
#nav-menu {
width:200px;
}
Всйо.
