ßê ñòâîðèòè ñïëèâàþ÷å ìåíþ
Çà äîïîìîãîþ ãðàìîòíîãî HTML-êîäó ³ ïðîñòèõ ïðàâèë CSS ìîæíà çðîáèòè ñïëèâàþ÷å ìåíþ, äîïîâíþâàòè éîãî ³ çì³íþâàòè. ßêùî âèêîðèñòîâóâàòè êîøòè êàñêàäíèõ òàáëèöü ³ ìîâè ðîçì³òêè, ìîæíà ó âñ³õ áðàóçåðàõ çàáåçïå÷èòè êîðåêòíó ðîáîòó ñàìîãî ìåíþ.
1
Ñòðèâàéòå äëÿ ïî÷àòêó áàçîâó ðÿäîê ìåíþ. Ñòâîð³òü ñïåö³àëüíèé íóìåðîâàíèé ñïèñîê ç ï³äì³íþ â òåêñòîâîìó ðåäàêòîð³. Çàçâè÷àé äëÿ öèõ ö³ëåé âèêîðèñòîâóþòü «Áëîêíîò». ϳäì³íþ âèñòóïຠåëåìåíòîì áàòüê³âñüêîãî ñïèñêó. Íàïðèêëàä: Ïåðøèé åëåìåíòÂèïàäàþù³é åëåìåíòÂèïàäàþù³é åëåìåíò2Âèïàäàþù³é åëåìåíò3Âèïàäàþù³é åëåìåíò4Âèïàäàþù³é åëåìåíò5
2
Äàíèé ñïèñîê çáåðåæ³òü â îêðåìîìó html-ôàéë³. Ïîò³ì ñòâîð³òü ôàéë .css. Ââåä³òü âñ³ íåîáõ³äí³ ïàðàìåòðè òàáëèö³ ñòèë³â. Ðîá³òü öå äóæå óâàæíî, àäæå îäíà ïîìèëêà, ³ ñïëèâàþ÷å ìåíþ áóäå â³äîáðàæàòèñÿ íåêîðåêòíî àáî âçàãàë³ íå áóäå ïðàöþâàòè.
3
Âèäàë³òü âñ³ ìàðêåðè ³ â³äñòóïè, ùî çàñòîñîâóþòüñÿ â íåíóìåðîâàíèé ñïèñêó. Çàäàéòå øèðèíó ìåíþ çà äîïîìîãîþ çàñîá³â CSS: ul -style: none; width: 200px; }
4
³äçíà÷òå â³äíîñíå ïîëîæåííÿ âñ³õ åëåìåíò³â ñïèñêó çà äîïîìîãîþ àòðèáóòà ï³ä íàçâîþ position: ul li: relative-}
5
Ïîò³ì îôîðìèòå ï³äì³íþ, åëåìåíòè ÿêîãî áóäóòü ç`ÿâëÿòèñÿ â³ä áàòüê³âñüêîãî ìåíþ ïðàâîðó÷ â ìîìåíò, êîëè êóðñîð ìèøêè áóäå ïåðåáóâàòè íàä ïóíêòîì: li ul: absolute-left: 199px; top: 0-display: none; }
6
Ó àòðèáóòà left çíà÷åííÿ íà îäèí ï³êñåëü ìåíøå, í³æ ó øèðèíè ñàìîãî ìåíþ. Öå äîçâîëÿº ïðàâèëüíî ðîçòàøóâàòè ñïëèâàþ÷³ ïóíêòè áåç ñòâîðåííÿ ïîäâ³éíèõ êîðäîí³â. Àòðèáóò display âèêîðèñòîâóºòüñÿ, ùîá ïðè â³äêðèòò³ ñòîð³íêè ïðèõîâàòè ï³äìåíþ.
7
Çàäàéòå íåîáõ³äí³ ñòèë³ äëÿ ïîñèëàíü çà äîïîìîãîþ â³äïîâ³äíèõ ïàðàìåòð³â css. ϳäêëþ÷³òü ïàðàìåòð display: block, ùîá ïîñèëàííÿ çàéìàëè âñ³ â³äâåäåí³ äëÿ íèõ ì³ñöÿ. Äëÿ òîãî ùîá ìåíþ ç`ÿâëÿëîñÿ â ìîìåíò, êîëè êóðñîð ìèø³ áóäå íàäàâàòèñÿ íàä íèì (hover), ââåä³òü òàêèé êîä: li: hover ul: block-}
8
Çà áàæàííÿì çàäàéòå äîäàòêîâ³ ïàðàìåòðè äëÿ â³äîáðàæåííÿ åëåìåíò³â ñïèñêó ³ ïîñèëàíü. Âêëþ÷³òü â ôàéë .html àòðèáóò. Ñïëèâàþ÷å ìåíþ ãîòîâå äî çàñòîñóâàííÿ.
Ñòàòò³ çà òåìîþ "ßê ñòâîðèòè ñïëèâàþ÷å ìåíþ"
Îö³í³òü, áóäü ëàñêà ñòàòòþ