Динамическое меню на PHP
Вот наш CSS. все это мы кидаем в файл ..\css\style.css
.menu // задаем свойства класса для div class='menu'
{
float:left; // привязка влево
height: 700px; // высота
}
.menu ul // свойства для всех списков внутри класса menu
{
width:130px; // ширина 130
}
.menu ul li // свойство каждой строки внутри списка, которая внутри класса меню
{
text-decoration: none; //убираем подчеркивание
list-style: none; // убираем жирные точки со списка
height: 30px; //высота строки
margin-left: -35px; //смещаем список влево, т.к. убранные точки все еще занимают место
}
.active // наводим красоту для активных ссылок. для тех пунктов меню в которых мы находимся.
{
display:block; //делаем всю строку ссылкой
padding: 2px 6px; //отступы тектса внутри строки
text-decoration: none; //убираем подчеркивание у ссылок
border:1px #609 solid; //окантовочка вокруг ссылки
-moz-border-radius: 10px; // Делаем ссылки закругленные. эт для мозилы. в ie не работает
border-radius: 10px; // Делаем ссылки закругленные. Opera с Google Chrome и так понимают.
Это уже CSS3 фишки.
height: 20px; //высота строк.
margin: 5px; //отступ между строками
background: #6FC; //фон строки для активной ссылки
color:#C03; //цвет текста
}
.active:hover //наводим красоту для активной ссылки при наведении на нее мышкой.
{
border:1px solid #FF0;
padding: 2px 6px;
background:#033 ;
-moz-border-radius: 10px;
border-radius: 10px;
color:#CF3;
display:block;
height: 20px;
margin: 5px;
}
.no_active:hover //красота для не активной ссылки при наведении
{
border:1px solid #FF0;
background: #033 ;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 2px 6px;
color:#CF3;
display:block;
height: 20px;
margin: 5px;
}
.no_active //красота для не активной ссылки
{
margin: 5px;
border:1px solid #FF0;
display:block;
padding: 2px 6px;
text-decoration: none;
background: #CF9 no-repeat;
-moz-border-radius: 10px;
border-radius: 10px;
height: 20px;
display:block;
}
Ну а теперь мы это наше меню можем вставлять куда угодно.