Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > как сделать такое меню

Автор: supervladislav 1.4.2008, 21:18

вот мне поставили такую задачу сделать такое меню вот как тут
http://forum.htmlbook.ru/viewtopic.php?pid=29438

ну так чтоб когда нажимаешь кнопку она не только меняла цвет ,но и нижняя часть полосу пропадала?Подскажите плиз???

Автор: awers 1.4.2008, 23:03

supervladislav, советую детально изучить исходный код сайта.

Код


 <span id="m5" style="top: 36px"><a href="/"><img src="http://htmlbook.ru/images/forum2.gif" width="65" height="26" border="0" alt="Форум" /></a></span>

где style="top: 36px"

Автор: supervladislav 2.4.2008, 00:18

Цитата(awers @ 1.4.2008, 23:03)

supervladislav, советую детально изучить исходный код сайта.

Код


 <span id="m5" style="top: 36px"><a href="/"><img src="http://htmlbook.ru/images/forum2.gif" width="65" height="26" border="0" alt="Форум" /></a></span>

где style="top: 36px"

зы не догоняю ))))вы моглибы объяснить????

Автор: awers 2.4.2008, 01:02

ну там у обычных кнопок один отступ от верха, а у выделенной +2px, в следствии чего она попросту перекрывает линию. только это ИЗВРАЩЕННЫЙ способ организации меню )

Автор: supervladislav 2.4.2008, 11:13

зы а как сделать так чтоб она цвет меняла))))на другой ))с помощью событий дхтмл

Автор: webevt 2.4.2008, 15:15

supervladislav, событие onmouseover

Код


document.getElementById( 'your_obj_id' ).style.backgroundColor = "#000000";

Таких примеров в сети достаточно, чтоб их можно было найти Гуглом.

Автор: supervladislav 2.4.2008, 19:25

спасибо

Автор: YelloW 2.4.2008, 22:54

сделал новигацию на flash&actionscript и нет проблемм, и просто и красиво)

Автор: supervladislav 3.4.2008, 17:14

Цитата(webevt @ 2.4.2008, 15:15)

supervladislav, событие onmouseover

Код


document.getElementById( 'your_obj_id' ).style.backgroundColor = "#000000";

Таких примеров в сети достаточно, чтоб их можно было найти Гуглом.

а скажи как сделать тоже самое только с дивами(классами) ,но на событиях дхмл

Автор: bars80080 3.4.2008, 17:52

supervladislav, а что для вас DHTML ?

Автор: TryLight 3.4.2008, 18:41

Кстати, интересный вопрос:
как изменять свойство класса или группы тегов?

Автор: supervladislav 3.4.2008, 20:29

Цитата(bars80080 @ 3.4.2008, 17:52)

supervladislav, а что для вас DHTML ?

ну насколько я понимаю енто ,поправте если я не прав ))))это события типо
onkeypress="" onmouseout="" onmouseup=""

Автор: awers 3.4.2008, 20:45

голый JS не советую, уж больно много проблем при заточке под браузеры разные.
Берем в руки jQuery и радуемся жизни )

Автор: TryLight 3.4.2008, 21:32

Цитата(TryLight)

Кстати, интересный вопрос:
как изменять свойство класса или группы тегов?

Вот скрипт в кач. примера, который это демонстирует.

Код


<html>
<head>
<style>
 .d {color:#0000FF;font-size: 16px;}
 .mid {color:#FF0000;font-size: 20px;}
</style>

<script>
function down() {
  sht = document.styleSheets[0];
  rules = sht.rules||sht.cssRules; // IE/Mozilla
  rules[0].style['color'] = "#FF0000";
  rules[0].style.fontSize = "20";
  rules[1].style.color = "#0000FF";
  rules[1].style.fontSize = "16";
} 
function up() {
  sht = document.styleSheets[0];
  rules = sht.rules||sht.cssRules; // IE/Mozilla
  rules[1].style['color'] = "#FF0000";
  rules[1].style.fontSize = "20";
  rules[0].style.color = "#0000FF";
  rules[0].style.fontSize = "16";
}
</script>
</head>


<body>

<br>
<div class="d">first</div>
<div class="mid">middle</div>
<div class="d">second</div>
<div class="mid">middle</div>
<br>
<button onMouseDown="down()" onMouseUp="up()">&nbsp;Set colors&nbsp;</button>

</body>
</html>

Автор: bars80080 4.4.2008, 09:31

Цитата(supervladislav @ 3.4.2008, 20:29

)

ну насколько я понимаю енто ,поправте если я не прав ))))это события типо
onkeypress="" onmouseout="" onmouseup=""

DHTML - это короткая аббревиатура, переводится известно как, но обозначет она не какой-то иной синтаксис HTML, а всего лишь HTML+CSS+JS в одном комплекте, учитывая что пример http://forum.vingrad.ru/index.php?showtopic=203974&view=findpost&p=1464689 содержит в себе и второе, и третье (и уж точно при вставке на страницу будет содержать и первое) он отвечает DHTML