ПРОСТОЕ МЕНЮ
Cоздадим простейшее меню с использованием CSS. В дальнейшем мы сделаем из него всплывающим и динамическим (будут выделены цветом те пункты меню, на которые нажал пользователь).
<div class='menu'>
<ul>
<li><a href='index.php'>МЕНЮ1</a></li>
<li><a href='#'>МЕНЮ2</a></li>
<li ><a href='#' >МЕНЮ3</a></li>
<li ><a href='#' >МЕНЮ4</a></li>
<li ><a href='#' >МЕНЮ5</a></li>
</ul>
</div>
потом поставим классу этого списка list-style:none; чтобы убрать жирные точки.
В общем обычный DIV внутри него список состоящий из ссылок.
Теперь разукрасим и оформим наш список. Делаем это с помощью CSS в специально обученом файле style.css,
который мы подгружаем строкой <link rel="stylesheet" type="text/css" href="css/style.css"/>
Вот наш CSS. все это мы кидаем в файл ..\css\style.css
.menu // задаем свойства класса для div class='menu'
{
float:left; // привязка влево
height: 200px; // высота
}
.menu ul // свойства для всех списков внутри класса menu
{
width:100px; // ширина 130
}
.menu ul li // свойство каждой строки внутри списка, которая внутри класса меню
{
text-decoration: none; //убираем подчеркивание
list-style: none; // убираем жирные точки со списка
height: 30px; //высота строки
margin-left: -5px; //смещаем список влево, т.к. убранные точки все еще занимают место
}
.menu ul li a // наводим красоту для ссылок. для тех пунктов меню в которых мы находимся.
{
display:block; //делаем всю строку ссылкой
padding-left: 20px; //отступы текста от левого края
text-decoration: none; //убираем подчеркивание у ссылок
border:1px #609 solid; //окантовочка вокруг ссылки
-moz-border-radius: 10px; // Делаем ссылки закругленные. эт для мозилы. в ie не работает
border-radius: 10px; // Делаем ссылки закругленные. Opera с Google Chrome и так понимают.
Это уже CSS3 фишки.
height: 20px; //высота строк.
margin: 5px; //отступ между строками
background: #FF8000; //фон строки для активной ссылки
color:#8000FF; //цвет текста
}
Осталось добавить изменение картинки (фона) при наведении мышкой. это делается с помощью hover.
т.к. данную реакцию надо делать при наведении на ссылку то к ней и применяем. Прописываем в стилях.
.menu ul li a:hover //a:hover это при навидении мышкой
{
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: #FF8000; //фон строки
color:yellow; //цвет текста
}
Но цвет меню меняется только при наведении, а если щелкнуть по нему, то он вернет себе цвет. Для
того чтобы выбранный пункт меню менял цвет мы воспользуемся php и сделаем страницу динамической