Създаване на менюта с JavaScript
Създаване на менюта с JavaScript


Добре направеното меню е едно от основните неща в дизайна на един сайт. JavaScript често се използва за създаване на интерактивни менюта - потъващи бутони, разширяващи се менюта или просто анимирани менюта. Тук ще разгледаме основните типове менюта:

- Меню с различни състояния на бутоние (Натиснат/Ненатиснат)

Първо трябва да се създадат бутоните. За всеки бутон са необходими две изображения - едно с ефект на изпъкналост и едно с ефект на потънал бутон. Когато бутона е правоъгълен, този ефект се постига изключително лесно. Всичко което трябва да направим е да оставим двелинии (о 1 пиксел широки) по края на бутона. За едното състояние оцветяваме линиите долу и в дясно в черно, а горе и в ляво в сиво. За другото разменяме цветовете:

//webdesign.gif - webdesign2.gif

Необходим ни е скрипт, който при натискането на бутон да го прави потънал, а всички останали - вдлъбнати. И за да не се зареждат всеки път всички изображения, скриптът трябва потъналия бутон да направи изпъкнал, а този който сме натиснали - потънал. Съотвтено ни е необходима функция, която приема за параметър номера на бутона който я е извикал. Ако оизползваме ID на таговете *IMG* съответно image1, image2, image3 и image4, а файловете с изображенията съответно img1.gif, img1a.gif, img2.gif, img2a.gif, img3.gif, img3a.gif, img4.gif и img4a.gif, то нашия скрипт ще бъде:

<SCRIPT LANGUAGE="JavaScript">
function changeState(num){
if (image1.src=="img1a.gif"){image1.src=="img1.gif"}
if (image2.src=="img2a.gif"){image1.src=="img2.gif"}
if (image3.src=="img3a.gif"){image1.src=="img3.gif"}
if (image4.src=="img4a.gif"){image1.src=="img4.gif"}
if (num==1){image1.src="img1a.gif}
if (num==2){image2.src="img2a.gif}
if (num==3){image3.src="img3a.gif}
if (num==4){image4.src="img4a.gif}
}
< /SCRIPT>

Всичко необходимо за създаване на менюто е всеки бутон при събитие onclick да извиква функцията changeState със съответния параметър.

- Създаване на меню с променящ се цвят на фона на активния елемент

Менюто с потъващите бутони изглежда много добре, но тъй като ползва изображения може да е тромаво при по-бавна връзка. Освен това не е удобно, ако има множество елементи. Едно стилно, леко и лесно създаващо се меню е това, при което цвета на фона на елемента, над който е курсора, е различен. Това меню се създава изключително просто. Всичко което трябва да направите е да подредите елементите в таблица и да използвате следната обработка на събитията onmouseover и onmouseout на полетата:
onmouseover="this.bgcolor='newcolour'"
onmouseout="this.bgcolor='oldcolour'"

където oldcolour и newcolour са двата цвята които искате да използвате

-Създаване на разширяващи се менюта

Разширяващите се менюта са изключително полезни, когато имате множество елементи, които искате да подредите в категории. За създаването им се използва комбинация от CSS и JavaScript, като се създават два класа - един при който елемента е видим и друг, при който е невидим. Работата на скрипта е само да следи кои елементи са видими и да променя класовете при необходимост. Съотвтено се създава по една функция за всяка група, която извежда елементите, ако не са изведени, или ги скрива, ако са изведени. Проблемът е, че така могат да бъдат отворени всички групи едновременно и потребителя отново ще трябва да търси къде точно е необходимия му елемент. Затова преди да отвори елементите в някое раздел, скриптът трябва да затворти елементите във всички останали. Тъй като самите функции за извеждане на елментите ги скриват, ако те веча са изведени, то нашия скриопт трябва да извиква функциите на тези раздели, в които има изведен елемент от групата. Проблемът е как да не се попадне в рекурсия. Съответно, ако анализираме кода на необходимя скрипт, то той ще се състои от:

n брой функции, извиквани при събитието onclick на съответната група

1 функция, приемаща параметър номер на функцията, която я е извикала, и извикваща измежду всички останали функции (изключая тази, която я е извикала), тези, чиито групи имат отворени елементи. Проблемът е с извикването на тази функция. Ако просто от всяка друга първо извикваме тази, а после променяме елементите, то тази функция ще се извиква сама себе си, докато не затвори всички менюта. Тъй като в един момент всички менюта са затворени, тя ще спре да извиква сама себе си, но тук въпроса е на оптимизация на кода. Скриптовете трябва да се пишат максимално малки и бързо изпълними. Затова ще използваме променлива, указваща дали функцията в момента се изпълнява. Нека приемем че имаме 4 раздела, първия и последния с по 4 елемента, останалите с по 3. Разделите кръщаваме sectiona, sectionb, sectionc и sectiond, а елементите от тях - с името на раздела и съответен номер. Съответно имаме нужда от два класа:

<STYLE>
.on {display: on}
.off {display: none}
< /STYLE>

Всеки от раздеклите е клас "on", всеки от елементите в тях - "off". При шракване разделите извикват съответно функциите doSectionA(), doSectionB(), doSectionC() или doSectionD(). Ето го и необходимия скрипт:

<SCRIPT LANGUAGE="JavaScript">
var running = 0
function doSectionClose(num){
running = 1;
if (sectiona1.className=="on" && num!=1){doSectionA()}
if (sectionb1.className=="on" && num!=2){doSectionB()}
if (sectionc1.className=="on" && num!=3){doSectionC()}
if (sectiond1.className=="on" && num!=4){doSectionD()}
running = 0
}

doSectionA(){
if (running==0){doSectionClose(1)}
if (sectiona1.className=="off"){
sectiona1.className="on"
sectiona2.className="on"
sectiona3.className="on"
sectiona4.className="on"
}
else
{
sectiona1.className="off"
sectiona2.className="off"
sectiona3.className="off"
sectiona4.className="off"
}

}

doSectionB(){
if (running==0){doSectionClose(2)}
if (sectiona1.className=="off"){
sectionb1.className="on"
sectionb2.className="on"
sectionb3.className="on"
}
else
{
sectionb1.className="off"
sectionb2.className="off"
sectionb3.className="off"
}

}

doSectionC(){
if (running==0){doSectionClose(3)}
if (sectionc1.className=="off"){
sectionc1.className="on"
sectionc2.className="on"
sectionc3.className="on"
}
else
{
sectionc1.className="off"
sectionc2.className="off"
sectionc3.className="off"
}

}

doSectionD(){
if (running==0){doSectionClose(4)}
if (sectiond1.className=="off"){
sectiond1.className="on"
sectiond2.className="on"
sectiond3.className="on"
sectiond4.className="on"
}
else
{
sectiond1.className="off"
sectiond2.className="off"
sectiond3.className="off"
sectiond4.className="off"
}

}
< /SCRIPT>

В заключение ще кажем, че JavaScript e незаменим при създаването на меню за вашите сайтове. Ако се поразровите из интернет, ще откриете безброй много готови скриптове, които можете да промените по ваше желание според нуждите ви - има стотици сайтове с безплатни такива.


/ Трябва да сте регистриран за да напишете коментар /