Карта сайта
Sape. Хитрости. Тонкости.
Индексация в yandex.
Иконка сайта favicon.ico
title тэг
CSS3 Закругленные углы
CSS3 Тени(shadow)
Выпадающее меню на CSS
Динамическое меню на PHP
header
Динамическое простое меню на PHP
Динамическое выпадающее меню на PHP и CSS
Динамическое выпадающее меню на PHP и CSS
Динамическое выпадающее меню на PHP и CSS3
Динамическое выпадающее меню на PHP и CSS3
Динамическое выпадающее меню на PHP
СкринШот phpDesigner

ПРОСТОЕ МЕНЮ


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 и сделаем страницу  динамической