ßê îôîðìèòè ìåíþ íà ñàéò³
Ìåíþ âèêîðèñòîâóºòüñÿ äëÿ ïîëåãøåííÿ íàâ³ãàö³¿ êîðèñòóâà÷åâ³ ïî ðîçä³ëàõ íà ñàéò³. Ùîá ïðèâåðíóòè óâàãó â³äâ³äóâà÷à, ìåíþ ïîâèííî áóòè ôóíêö³îíàëüíèì, çðó÷íèì ó âèêîðèñòàíí³ ³ ïðè öüîìó ïîºäíóâàòèñÿ ç äèçàéíîì âñüîãî ðåñóðñó.
1
Ïåðåä ñòâîðåííÿì ìåíþ âèçíà÷èòåñÿ ç éîãî òèïîì. Âè ìîæåòå ñòâîðèòè ñïèñîê, ùî âèïàäຠãîðèçîíòàëüíèé àáî âåðòèêàëüíèé áëîê, ÿêèé áóäå ïîêàçàíèé êîðèñòóâà÷åâ³ ïðè íàâåäåíí³ íà íüîãî êóðñîðîì ìèøêè. Ïðè âèáîð³ òîãî ÷è ³íøîãî ìåíþ âè ìîæåòå êåðóâàòèñÿ òèì, íàñê³ëüêè â³äâ³äóâà÷àì áóäå çðó÷íî éîãî çàñòîñîâóâàòè ³ ÿê âîíî áóäå ïîºäíóâàòèñÿ ç äèçàéíîì.
2
ϳñëÿ âèáîðó òèïó ìåíþ â³äêðèéòå âàø ôàéë ñòîð³íêè çà äîïîìîãîþ áóäü-ÿêîãî òåêñòîâîãî ðåäàêòîðà, ÿêèé âè âèêîðèñòîâóºòå äëÿ ðåäàãóâàííÿ HTML. Ïåðåéä³òü äî ïîòð³áíî¿ ä³ëÿíêè êîäó, â ÿêèé âè õî÷åòå âñòàâèòè âàø åëåìåíò ³íòåðôåéñó.
3
ϳñëÿ öüîãî çðîá³òü ñïèñîê îïö³é, ñòâîðèâøè áëîê
³ çðîáèâøè íóìåðîâàíèé ñïèñîê ç ïðèñâîºíèìè äî íüîãî id. íàïðèêëàä:
 äàíîìó ïðèêëàä³ áóâ ñòâîðåíèé ìàðêîâàíèé ñïèñîê ç òðüîõ åëåìåíò³â, ÿêèé ïîì³ùåíèé â øàð div ç ïðèñâîºíèì ³äåíòèô³êàòîðîì panel.
4
Ïåðåéä³òü äî áëîêó
5
Ùîá ñòâîðèòè ãîðèçîíòàëüíó ë³í³þ ïî âñ³é øèðèí³ ñòîð³íêè âè ìîæåòå ñêîðèñòàòèñÿ íàñòóïíèì êîäîì:
#panel ul {margin-left: 0- padding: 2px 0-}
6
Ïîò³ì âè ìîæåòå çðîáèòè â³çóàëüíå ðîçä³ëåííÿ íà ïðÿìîêóòíèêè:
#panel ul li a {margin-left: 3px; border: 1px; padding: 2px 3px; background: blue-}
Äàíèé êîä çàäຠâ³äñòóïè òåêñòó â³ä åëåìåíò³â êîðäîíó ÷åðåç àòðèáóòè margin-left ³ padding, à òàêîæ ïðèñâîþº ôîíîâèé êîë³ð äëÿ êîæíîãî ç åëåìåíò³â ñïèñêó.  äàíîìó ïðèêëàä³ êîë³ð âêàçàíî blue, îäíàê çì³íèòè âè éîãî ìîæåòå íà âëàñíèé ðîçñóä.
7
Ùîá âêàçàòè íà ïóíêò ïîòî÷íî¿ ñòîð³íêè, ÿêà îáðàíà ó âêëàäö³, çàäàéòå êëàñó open â³äïîâ³äí³ ïàðàìåòðè:
#menu ul li a # open {background: red- border-bottom: 1px; }
Ïîòî÷íà ñòîð³íêà, îáðàíà â ïàíåë³, òåïåð áóäå â³äîáðàæàòèñÿ ÷åðâîíèì êîëüîðîì.
8
Çáåðåæ³òü çì³íè ó ôàéë³ ³ ïåðåâ³ðòå ïðàöåçäàòí³ñòü íàïèñàíîãî êîäó, â³äêðèâøè âàøó ñòîð³íêó ÷åðåç áðàóçåð. Ùîá çàäàòè äîäàòêîâ³ ïàðàìåòðè â³äîáðàæåííÿ, âè çàâæäè ìîæåòå äîäàòè êîä CSS àáî HTML äëÿ óäîñêîíàëåííÿ çîâí³øíüîãî âèãëÿäó îá`ºêòà.
Ñòàòò³ çà òåìîþ "ßê îôîðìèòè ìåíþ íà ñàéò³"
Îö³í³òü, áóäü ëàñêà ñòàòòþ