Настроить меню.
Подскажите как это делается, если можно линканите образец скрипта...
Есть картинка, в ней нарисованы варианты кнопки, всего 4 варианта для каждой кнопки т.е. вариант кнопки в нормальном состоянии, при наведении курсора, при клике, и когда на этой странице. Я мог бы при помощи css сделать всё это но только в том случае, когда каждый из вариантов кнопки находится в разных файлах, а когда в одном я не умею... подскажите, хочу научиться и такому варианту создания меню. Для тех кто не понял о чем речь прилагаю файлик, из которого мне нужно сделать меню. http://javascript.ru/files/u10172/1.gif Первая строка меню в нормальном состоянии Вторая строка - при наведении курсора т.е. я так думаю OnMouseOver Третья строка - при нажатой кнопке мыши что-то типа OnClick или OnButtonClick я просто не знаю JS, но думаю по образцу сориентирюсь... Четвертая когда я нахожусь на странице этого пункта меню. Если у кого-нибудь есть такой скрипик киньте плиз...:help: :( :cray: |
|
То есть получается что JS вообще не нужен?
|
Хотя нет, в любом случае нужен, ну прописал я этот код для css, настроил, но как теперь првязать к ним event которые мне нужны, о них говорилоь выше.
|
Цитата:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type='text/css'>
.button,
.button_dn {
width: 62px;
height: 20px;
display: block;
text-align: center;
text-decoration: none;
}
.button {
color: #000000;
background: url('http://javascript.ru/files/u10172/1.gif') no-repeat 0 0;
}
.button:hover {
color: #ffffff;
background: url('http://javascript.ru/files/u10172/1.gif') no-repeat 0 -22px;
}
.button_dn {
color: #ffffff;
background: url('http://javascript.ru/files/u10172/1.gif') no-repeat 0 -45px;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<a href='#' class='button' onmousedown='this.className="button_dn"' onmouseup='this.className="button"'>Test</a>
</body>
</html>
|
КУЛ! СПС! а как теперь сделать чтобы оставалась нажатой так кнопка где я нахожусь?
|
<script type='text/javascript'>
(function () {
var nodes = document.getElementById("menu").getElementsByTagName("A");
for (var i = 0; i < nodes.length; i++)
if (nodes[i].href.replace("www.", "").split("#")[0].split("?")[0] == location.href.replace("www.", ""))
nodes[i].className = "button_dn";
})();
</script>
Ссылки поместить в DIV с id='menu'. |
А что означает эта строчка if (nodes[i].href.replace("www.", "").split("#")[0].split("?")[0] == location.href.replace("www.", ""))
nodes[i].className = "button_dn"; что должно быть вместо "www" "" "#"? |
А ещё такой вопрос, если ссылки не постоянные, ну я пишу скин под CMS там через админку можно меню настраивать, т.е. менять название пунктов меню,адреса и их колличество, тогда вариант с DIV не сработает?
|
Цитата:
|
А что по поводу CMS? К примеру можно будет сделать так:
<div class=button_dn> <div id=menu> {PHP.cfg.menu5} </div> </div> Где {PHP.cfg.menu5} переменная, в которой будут указаны <ul> <li><a href="">блаблабла</a></li> <li><a href="">блаблабла</a></li> <li><a href="">блаблабла</a></li> </ul> Ну вот както так... |
Цитата:
onmouseup='this.className="button"' |
Цитата:
|
Цитата:
|
Нееет. меня опять не понимают....
Вот смотри. В коде, который ты мне дал есть следующее: стартовый вид кнопки - (0 0); кнопка при наведении курсора - (0 -38px); кнопка при нажатой клавише мыши -(0 -76px); А как ты думаешь, почему на самой картинке 4 строки, а не 3? |
Цитата:
Я показал как можно пользоваться одной картинкой и не более того. Дальше делай сколько хочешь классов и меняй их у элементов как тебе это заблогорассудится... |
Проблема как раз в этом 4 классе, как его прописать?
|
Цитата:
<объект>.className=<селектор> |
Давайте не будем играть в шпионов, хорошо? =)
как это выглядеть будет в коде, please... т.е. как его добавить именно чтобы он работал... ну вот у вас в лисинге всё прописано типа такого .button { color: #000000; background: url(globalnavbg.png) no-repeat 0 0; } .button:hover { color: #ffffff; background: url(globalnavbg.png) no-repeat 0 -38px; а патом вот так <li class="current"><a href='1.htm' class='button' onmousedown='this.className="button_dn"' onmouseup='this.className="button"'> </a></li> чего здесь нехватает? |
Цитата:
наводящий пример:
<!doctype html>
<html>
<body>
<style type="text/css">
div {
border: 1px solid red;
padding: 50px;
}
div div {
background: green;
}
</style>
<div>
<div></div>
</div>
</body>
</html>
|
Javascript абсолютно здесь не нужен.
Данное меню легко реализуется силами HTML и CSS. И конечно сложно помочь человеку который даже основ верстки не знает. Цитата:
И учите HTML и CSS |
| Часовой пояс GMT +3, время: 03:45. |