Что б сделать меню, которое будет работать на Веб-Странице нам не понадобится вся картинка меню. Нам понадобятся только ее элементы:
- кнопка в "наведенном" состоянии.
- кнопка в обычном состоянии.
- надпись на кнопке.
Вот весь код, который нужно будет вставить на вашу страничку:
Код
<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://nbd.in.ua/forum"><imgsrc="http://i038.radikal.ru/0801/14/1a7e0d867faa.gif"></a></li>
<li><a href="#2"><imgsrc="http://i038.radikal.ru/0801/14/1a7e0d867faa.gif"></a></li>
<li><a href="#3"><imgsrc="http://i038.radikal.ru/0801/14/1a7e0d867faa.gif"></a></li>
<li><a href="#4"><imgsrc="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.style.backgroundImage='none'
break}
}
</script>
А теперь немного о том, как оно работает:
Меню выводится как список:
Код
<ul id="menu">
<li><a href="http://nbd.in.ua/forum"><img src="http://i038.radikal.ru/0801/14/1a7e0d867faa.gif"></a></li>
<li><a href="#2"><imgsrc="http://i038.radikal.ru/0801/14/1a7e0d867faa.gif"></a></li>
<li><a href="#3"><imgsrc="http://i038.radikal.ru/0801/14/1a7e0d867faa.gif"></a></li>
<li><a href="#4"><imgsrc="http://i038.radikal.ru/0801/14/1a7e0d867faa.gif"></a></li>
</ul>
Каждый элемент списка это кнопочка. Надпись сидит в тэге Код
<img src="http://i038.radikal.ru/0801/14/1a7e0d867faa.gif">
Код
ul#menu img {
border:0; - Рамка
padding:0;
margin-top:12px; - Отступ от верхнего края
margin-right:15px; - Отступ от правого края
}
Тэгу присваивается повторяемый фон(который является нашей кнопкой в наведенном состоянии, в случае если менять фон у самой ссылки то при наведении курсора некоторое время картинки не будет вообще, поскольку она будет в процессе загрузки и для избежания этого кнопка в наведенном состоянии как бы есть сразу но ее прикрывает кнопка в обычном состоянии). Также убираются отступы в списке и стандартные точечки перед каждым элементом списка.
Код
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; -Выравнивание по правому краю(для нашихссылок).
Всё что присваивается тегу это изображение как строкового элемента(связано с тем что браузер Internet Explorer делает между элементами списка пустое место):
Код
ul#menu li{
display:inline;
}
В теге
Код
<a href="http://nbd.in.ua/forum">
Код
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;
}
при на видении курсора на кнопку в меню убирается фон с тега
тем самым открывая фон наведенной кнопки.
Так же в нашем коде присутствует JavaScript, который делает кнопку наведенной в том случае если в браузере загружена та страница, на которую эта кнопка ссылается.Вот и всё наверно.
Пишите, если возникли вопросы или вы заметили какую-то ошибку в коде.
Суббота 23.11.2024, 12:09:33 
