Техника Web-дизайна для студента
Вертикальное меню
Внешний вид вертикального меню показан на рис. 8.11.
|
Рис 8.11. Внешний вид вертикального раскрывающегося меню в окне браузера |
Кроме вертикального расположения разделов, особенность меню заключается в том, что раскрытие пунктов сопровождается смещением разделов, располагающихся ниже. Несмотря на многие сходства документа с предыдущим, его текст целесообразно привести полностью (листинг 8.18).
Листинг 8.18. Пример создания вертикального раскрывающегося меню
<HTML>
<НЕА0ХТ1ТЬЕ>Вертикальное мешо</Т1ТЬЕ>
<SCRIPT>
Function prR()
{event. cancelBubble="true"
Function prH(stolbx)
{stolbx. style. display="none"
Function prV(stolbx)
{stolbx. style. display="block"
Function prS(sx, fn)
{sx. src=fn }
</SCRIPT>
<BODY onmousemove=prH(stolbl),prH(stolb2),prH(stolb3)>
<DIV style="WIDTH: 95px; TEXT-ALIGN: center" onmouse - move=prH(stolb2),prR()>
<IMG id=pl src="rl. jpg" onclick=prV(stolbl)>
<SPAN id=stolbl style="DISPLAY:none; WIDTH: 70px" on - click=prH(stolbl),prR()>
|
On- On- On- On- |
<IMG id=pll src="ppl. jpg" onmousemove=prS(pll,"ppld. jpg") mouseout=prS(pll,"ppl. jpg")><br>
<IMG id=pl2 src="pp2.jpg" onmousemove=prS(pl2,"pp2d. jpg") mouseout=prS(pl2,"pp2.jpg")><br>
<IMG id=pl3 src="pp3.jpg" onmousemove=prS(pl3,"pp3d. jpg") mouseout=prS(pl3,"pp3.jpg")><br>
<IMG id=pl4 src="pp4.jpg" onmousemove=prS(pl4,"pp4d. jpg") mouseout=prS(pl4,"pp4.jpg")>
</SPAN>
</DIV>
<DIV style="WIDTH: 95px; TEXT-ALIGN: center" onmouse - move=prH(stolbl),prH(stolb3),prR()>
<IMG src="r2.jpg" onclick=prV(stolb2)>
<SPAN id=stolb2 style="DISPLAY:none; WIDTH: 70px" on - click=prH(stolb2),prR()>
|
On- On- On- On- |
<IMG id=p21 src="ppl. jpg" onmousemove=prS(p21,"ppld. jpg") mouseout=prS(p21,"ppl. jpg")><br>
<IMG id=p22 src="pp2.jpg" onmousemove=prS(p22,"pp2d. jpg") mouseout=prS(p22,"pp2.jpg")><br>
<IMG id=p23 src="pp3.jpg" onmousemove=prS(p23,"pp3d. jpg") mouseout=prS(p23,"pp3.jpg")><br>
<IMG id=p24 src="pp4.jpg" onmousemove=prS(p24,"pp4d. jpg") mouseout=prS(p24,"pp4.jpg")>
</SPAN>
</DIV>
<DIV style="WIDTH: 95px; TEXT-ALIGN: center" onmouse - move=prH(stolb2),prR()>
<IMG src="r3.jpg" onclick=prV(stolb3)>
<SPAN id=stolb3 style="DISPLAY:none; WIDTH: 70px" on-
click=prH(stolb3),prR()>
<IMG id=p31 src="ppl. jpg" onmousemove=prS(p31,"ppld. jpg") on- mouseout=prS(p31,"ppl. jpg")><br>
<IMG id=p32 src="pp2.jpg" onmousemove=prS(p32,"pp2d. jpg") on- mouseout=prS(p32,"pp2.jpg")><br>
<IMG id=p33 src="pp3.jpg" onmousemove=prS(p33,"pp3d. jpg") on- mouseout=prS(рЗЗ,"pp3.jpg")><br>
<IMG id=p34 src="pp4.jpg" onmousemove=prS(p34,"pp4d. jpg") on - mouseout=prS(p34,"pp4.jpg")>
</SPAN>
</DIV>
</BODY>
</HTML>
Каждый раздел создается меткой-контейнером <div>, а не <span>, как в предыдущем примере. Это позволяет размещать каждый раздел с новой строки, располагая их вертикально. Кроме того, в функциях ргн () и prv () вместо свойства VISIBILITY используется СВОЙСТВО DISPLAY, ЧТО И 1ф!1 ВОДИТ При раскрытии списка к изменению положения разделов, расположенных ниже. В остальном можно руководствоваться пояснениями к предыдущему документу.
