Перед прочтением рекомендуется ознакомится с этим уроком.
Что б сделать меню, которое будет работать на Веб-Странице нам не понадобится вся картинка меню. Нам понадобятся только ее элементы:
 - кнопка в "наведенном" состоянии.
 - кнопка в обычном состоянии.
 - надпись на кнопке.
Вот весь код, который нужно будет вставить на вашу страничку:
Code <style type=text/css> ul#menu { margin:0; padding:0; list-style-type:none; display:block; width:160; background:url('http://i022.radikal.ru/0801/e7/2b2f4b48adc9.jpg') repeat-y left top; text-align:right; } ul#menu a { display:block; width:160; height:40; background:url('http://i027.radikal.ru/0801/0f/8bddc5899d36.jpg') no-repeat left top; } ul#menu a:hover { background:none; } ul#menu li{ display:inline; } ul#menu img { border:0; padding:0; margin-top:12px; margin-right:15px; } </style> <ul id="menu"> <li><a href="http://web-desing.pp.net.ua/lessonExamples/menu/Menu.html"><img src="http://i038.radikal.ru/0801/14/1a7e0d867faa.gif"></a></li> <li><a href="#2"><img src="http://i038.radikal.ru/0801/14/1a7e0d867faa.gif"></a></li> <li><a href="#3"><img src="http://i038.radikal.ru/0801/14/1a7e0d867faa.gif"></a></li> <li><a href="#4"><img src="http://i038.radikal.ru/0801/14/1a7e0d867faa.gif"></a></li> </ul> <script type="text/javascript" language="JavaScript"> var loc=location.href var a=document.getElementById('menu').getElementsByTagName('a') var aHref=new Array() var num=parseInt(a.length)-1 for (var i=num;i>=0;i--) { var Href=a[i].href if (loc.indexOf(Href)==-1) { continue }else{ a[i].style.backgroundImage='none' break} } </script> Здесь вы можете посмотреть, как это будет выглядеть. А теперь немного о том, как оно работает:
Меню выводится как список:
Code <ul id="menu"> <li><a href="http://web-desing.pp.net.ua/lessonExamples/menu/Menu.html"><img src="http://i038.radikal.ru/0801/14/1a7e0d867faa.gif"></a></li> <li><a href="#2"><img src="http://i038.radikal.ru/0801/14/1a7e0d867faa.gif"></a></li> <li><a href="#3"><img src="http://i038.radikal.ru/0801/14/1a7e0d867faa.gif"></a></li> <li><a href="#4"><img src="http://i038.radikal.ru/0801/14/1a7e0d867faa.gif"></a></li> </ul>
Каждый элемент списка это кнопочка. Надпись сидит в тэге <img src="http://i038.radikal.ru/0801/14/1a7e0d867faa.gif">. Что б ставить свои надписи просто замените ссылку(http://i038.radikal.ru/0801/14/1a7e0d867faa.gif) на ссылку, на свою надпись. В стилях картинке присваивается отступ от правого и верхнего края, а также убирается рамка.
Code ul#menu img {
border:0; - Рамка
padding:0;
margin-top:12px; - Отступ от верхнего края
margin-right:15px; - Отступ от правого края
}
Тэгу <ul id="menu"> присваивается повторяемый фон(который является нашей кнопкой в наведенном состоянии, в случае если менять фон у самой ссылки то при наведении курсора некоторое время картинки не будет вообще, поскольку она будет в процессе загрузки и для избежания этого кнопка в наведенном состоянии как бы есть сразу но ее прикрывает кнопка в обычном состоянии). Также убираются отступы в списке и стандартные точечки перед каждым элементом списка.
Code ul#menu {
margin:0; -Оступ.
padding:0; -Оступ.
list-style-type:none; -Отключение точичек-маркеров списка.
display:block;
width:160;
background:url('http://i022.radikal.ru/0801/e7/2b2f4b48adc9.jpg') repeat-y left top; - Фон кнопки в наведеном состоянии.
text-align:right; -Выравнивание по правому краю(для наших ссылок).
Всё что присваивается тегу <li> это изображение как строкового элемента(связано с тем что браузер Internet Explorer делает между элементами списка пустое место):
Code ul#menu li{
display:inline;
}
В теге <a href="http://web-desing.pp.net.ua/lessonExamples/menu/Menu.html"> указываем ссылку, на которую будет вести наш элемент меню. С помощью стилей тегу <a> присваивается фон кнопки в не наведенном состоянии, что б областью щелчка на ссылке была не только надпись в меню, но и вся кнопка тег <a> нужно сделать блочным и задать ему высоту и ширину.
Code ul#menu a {
display:block; -Это делает ссылку блочным элементом
width:160; -Длина
height:40; -Высотра
background:url('http://i027.radikal.ru/0801/0f/8bddc5899d36.jpg') no-repeat left top; -Фоновое изображение (кнопка в не наведенном состоянии).
}
С помощью стиля
Code ul#menu a:hover {
background:none;
}
при на видении курсора на кнопку в меню убирается фон с тега <a> тем самым открывая фон наведенной кнопки.
Так же в нашем коде присутствует JavaScript, который делает кнопку наведенной в том случае если в браузере загружена та страница, на которую эта кнопка ссылается. Вот и всё наверно.
Пишите, если возникли вопросы или вы заметили какую-то ошибку в коде. Для ленивых: архив с страницей и рисунками (всё что вам нужно это заменить надписи на кнопках) (С)SleepWalker
| 
