наверх





Создание большого и красивого меню, с активными ссылками (через PHP), а так же внутренней тенью. Небольшой код, красивый результат.


В этом примере мы создадим большое и красивое горизонтальное меню, в стиле ВКонтакте. Пунктами меню у нас будут служить теги <a>. Начнем с HTML разметки.

HTML


<div class="menu">
    <a href="http://bluecode.ru/" class="menu_active">BlueCode</a><a href="http://bluecode.ru/css/">CSS примеры</a><a href="http://bluecode.ru/html/">HTML примеры</a><a href="http://bluecode.ru/css3-generator">CSS3 генераторы</a>
</div>


Класс menu_active у нас будет служить классом для активного пункта меню.

CSS



Задаем стиль главному классу menu:

.menu {
  padding:0 0 10px 0; /* Внутренние отступы */
}


Здесь мы задали, что отступ будет лишь снизу.

Следующие стили для пункта меню:

.menu a{
  color: #E2E7ED;    /* Цвет */
  text-decoration:none;    /* Отстутсвие нижней линии */
  text-transform: uppercase;    /* Все буквы - заглавные */
  background: #4D7096;    /* Цвет фона */
  padding: 10px;    /* Внутренний отступ */
  font-weight:bold; /* Жирный шрифт */
  font-family: "Trebuchet MS", tahoma, verdana, arial narrow, arial; /* Семейство шрифта */
  
  /* transition */
  -webkit-transition:All 0.3s ease;    
  -moz-transition:All 0.3s ease;
  -o-transition:All 0.3s ease;
  /* transition end */
}
.menu a:hover{
  background: #5A7DA3;    /* Цвет фона */
}


Теперь собственно сами стили для активного пункта меню:

.menu_active {
  background: #5A7DA3;    /* Цвет фона */
  
  /* box-shadow */
  box-shadow:inset 2px 10px 5px 1px #47668B;
  -webkit-box-shadow:inset 2px 10px 5px 1px #47668B;
  -moz-box-shadow:inset 2px 10px 5px 1px #47668B;
  /* box-shadow end */
}


Вот и все! А теперь, как сделать, что класс menu_active автоматически присваивался элементам? Здесь есть разные пути решения, JS, PHP. Я выберу PHP. Ниже простейший код для задания активной ссылки меню автоматически:

<?
$cat = $_GET['cat'];
if ($cat == NULL) {
    $active = 'class="menu_active"';
}
?>
<a href="http://bluecode.ru/" <?=$active;?>>BlueCode</a>


Если нужно, чтобы были автоматически активны и другие пункты меню, то можно дописать правила:

<?
$cat = $_GET['cat'];
if ($cat == NULL') {
    $active = 'class="menu_active"';
}
if ($cat == 'css') {
    $activecss = 'class="menu_active"';
}
if ($cat == 'html') {
    $activehtml = 'class="menu_active"';
}
if ($cat == 'tools') {
    $activegen = 'class="menu_active"';
}
?>
<a href="http://bluecode.ru/" <?=$active;?> >BlueCode</a><a href="http://bluecode.ru/articles/cat/14/" <?=$activecss;?> >CSS примеры</a><a href="http://bluecode.ru/articles/cat/15/" <?=$activehtml;?> >HTML примеры</a><a href="http://bluecode.ru/tools/" <?=$activegen;?>>Инструменты</a>





Просмотр демо-варианта


Поделиться
Border-radius генератор
Занимаетесь веб-разработкой? Кроссбраузерный border-radius генератор с поддержкой выборочных скруглений краев.


Комментарии — 0


У вас нет прав для добавления комментария. Зарегистрируйтесь или авторизуйтесь.