Новые сообщения · Участники · Правила форума · Поиск
  • Страница 1 из 1
  • 1
Форум о uCoz и Web » Веб-программирование и дизайн » Готовые элементы страницы » Делаем навигационную панель для сайта (по уроку "Как cделать стильное меню для веб-сайта")
Делаем навигационную панель для сайта
SleepWalkerДата: Воскресенье, 06.01.2008, 19:13 | Сообщение # 1
Admin
Сообщений: 5493
Репутация: 487
Социальная репутация:

Статус: Оффлайн
Перед прочтением рекомендуется ознакомится с этим уроком.
Что б сделать меню, которое будет работать на Веб-Странице нам не понадобится вся картинка меню. Нам понадобятся только ее элементы:
- кнопка в "наведенном" состоянии.
- кнопка в обычном состоянии.
- надпись на кнопке.
Вот весь код, который нужно будет вставить на вашу страничку:
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

Как установить кнопки социальных сетей?

Time Waits For No One
 
-=NEX=-Дата: Четверг, 24.07.2008, 18:50 | Сообщение # 2
Майор
Сообщений: 95
Репутация: 5
Социальная репутация:

Статус: Оффлайн
Клас !!!!!!!!!!!!!!! cool


требуюются Модераторы

 
[VindDevil]Дата: Понедельник, 07.12.2009, 00:05 | Сообщение # 3
Майор
Сообщений: 97
Репутация: 7
Социальная репутация:

Статус: Оффлайн
прикольно спс
NULL версия CMS - то же самое, что и бритвой по .........
Работаю на http://oz-dez.ru/
 
LakooДата: Понедельник, 28.12.2009, 19:11 | Сообщение # 4
Рядовой
Сообщений: 4
Репутация: 0
Социальная репутация:

Статус: Оффлайн
[size=20]Админ извени я просто непонел 1 понел .А остальное непонел куда встовлять можеш пожалуста описать куда это вставлять пожелусто ото я новичёк .
 
SleepWalkerДата: Понедельник, 28.12.2009, 23:43 | Сообщение # 5
Admin
Сообщений: 5493
Репутация: 487
Социальная репутация:

Статус: Оффлайн
а я не понял что ты мне хотел сказать своим постом. он какой-то запутанный. может гдето не поставил знаков припинания и изза этого до меня не доходит...
Time Waits For No One
 
LakooДата: Вторник, 29.12.2009, 19:59 | Сообщение # 6
Рядовой
Сообщений: 4
Репутация: 0
Социальная репутация:

Статус: Оффлайн
Я токо 1 понел куда вставлять . А остальные непонел опиши плис )
 
SleepWalkerДата: Воскресенье, 03.01.2010, 13:18 | Сообщение # 7
Admin
Сообщений: 5493
Репутация: 487
Социальная репутация:

Статус: Оффлайн
вот это:
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>

туда де хочешь видеть меню. а дальше уже идут пояснения нащет стиля.

Time Waits For No One
 
PsixiatorДата: Понедельник, 04.01.2010, 11:35 | Сообщение # 8
Генерал-лейтенант
Сообщений: 586
Репутация: 27
Социальная репутация:

Статус: Оффлайн
Кульно!
 
miffkaДата: Суббота, 05.06.2010, 13:52 | Сообщение # 9
Рядовой
Сообщений: 1
Репутация: 0
Социальная репутация:

Статус: Оффлайн
Привет а как и куда встовлять эти коды?
wacko
 
xxKrabxxДата: Вторник, 18.01.2011, 14:46 | Сообщение # 10
Рядовой
Сообщений: 1
Репутация: 0
Социальная репутация:

Статус: Оффлайн
Коды вставлять нужно в редактор главной стр. или какой сахочеш

Я вот тока не понял, а для чего они нужны???

 
SleepWalkerДата: Вторник, 18.01.2011, 16:52 | Сообщение # 11
Admin
Сообщений: 5493
Репутация: 487
Социальная репутация:

Статус: Оффлайн
это просто меню для сайта
Time Waits For No One
 
АдминестратоРДата: Вторник, 23.08.2011, 21:32 | Сообщение # 12
Полковник
Сообщений: 187
Репутация: 7
Социальная репутация:

Статус: Оффлайн
а можно вместо этого изображения
Code
<li><a href="#1"><img src="http://i038.radikal.ru/0801/14/1a7e0d867faa.gif"></a></li>
заменить на текст?
 
djemNaДата: Среда, 24.08.2011, 08:58 | Сообщение # 13
злой пингвин
Сообщений: Скрыто
Репутация: Скрыто
Социальная репутация:

Статус: Hidden
АдминестратоР, чисто теоретически можно, попробуй
-> Правила - тут! Читать всем!
-> Линукс - просто, красиво, юзабельно!
-> Есть вопросы? Вам сюда!

Стабильность Windows заключается в ее нестабильности. С чем я от всей души поздравляю Microsoft.
 
AnarkiДата: Среда, 24.08.2011, 13:13 | Сообщение # 14
Генералиссимус
Сообщений: 2386
Репутация: 162
Социальная репутация:

Статус: Оффлайн
АдминестратоР, только придётся со стилями повозится.
"Если не можешь сделать сам — по крайней мере, помешай другому."
Карел Чапек

◘ Я снова в деле.. >:D ◘
 
Форум о uCoz и Web » Веб-программирование и дизайн » Готовые элементы страницы » Делаем навигационную панель для сайта (по уроку "Как cделать стильное меню для веб-сайта")
  • Страница 1 из 1
  • 1
Поиск: