ಸೈಟ್ಗಾಗಿ ಸಮತಲ ಮೆನುವನ್ನು ಮಾಡಿ

ಸಮತಲ ಮೆನುವು ಯಾವುದೇ ಸೈಟ್ನಲ್ಲಿದೆ - ಇದು ಆಕರ್ಷಣೆಯ ಭಾಗವಾಗಿದೆ, ಇದಕ್ಕೆ ವಿರುದ್ಧವಾಗಿ, ಅದರ ನೋಟ ಮತ್ತು ಅನುಕೂಲಕ್ಕಾಗಿ ಸಂದರ್ಶಕರನ್ನು ಹೆದರಿಸುವ ಸಾಮರ್ಥ್ಯ ಹೊಂದಿದೆ. ಪ್ರಾಥಮಿಕ ಸಮತಲ ಮೆನುವನ್ನು ಹೇಗೆ ರಚಿಸುವುದು ಎಂಬುದನ್ನು ನಾವು ಕಲಿಯೋಣ: ನಾವು ಎಚ್ಟಿಎಮ್ಎಲ್ನಲ್ಲಿ ಅದನ್ನು "ಅಸ್ಥಿಪಂಜರ" ಎಂದು ಮಾಡುತ್ತೇವೆ, ನಾವು ರಚನೆಯ ಮೂಲಭೂತ ಕೌಶಲ್ಯಗಳನ್ನು ಸಾಧಿಸುತ್ತೇವೆ. ನೀವು ಸಹಜವಾಗಿ, ಸಿದ್ಧ ಮೆನುವನ್ನು ಹುಡುಕಬಹುದು, ಆದರೆ ಅದು ನಿಮ್ಮನ್ನು ಹೇಗೆ ಅಭಿವೃದ್ಧಿಪಡಿಸುವುದು ಎಂಬುದನ್ನು ತಿಳಿಯಲು ಹೆಚ್ಚು ಆಹ್ಲಾದಕರವಾಗಿರುತ್ತದೆ. ಇದು ತುಂಬಾ ಉತ್ತೇಜನಕಾರಿಯಾಗಿದೆ.

ಮೆನು ಮಾಡಲು ಕಲಿಯುವಿಕೆ

ವಿನ್ಯಾಸದ ಕೋರಿಫಿಯಸ್ಗೆ ಅನುಗುಣವಾಗಿರುವ ಸೆಮ್ಯಾಂಟಿಕ್ಸ್ನಿಂದ ವಿಪಥಗೊಳ್ಳದಂತೆ ನಾವು ಪ್ರಯತ್ನಿಸುತ್ತೇವೆ. ಸ್ವತಂತ್ರವಾಗಿ ಸಮತಲವಾದ ಮೆನು ಮಾಡಲು ಮೂಲ ಕೌಶಲ್ಯಗಳನ್ನು ಸದುಪಯೋಗಪಡಿಸಿಕೊಳ್ಳಲು ನಾವು ಎಚ್ಟಿಎಮ್ಎಲ್ನಲ್ಲಿ ನಮ್ಮ ಮೆನುಗಾಗಿ "ಅಸ್ಥಿಪಂಜರ" ಮಾಡಬೇಕಾಗಿದೆ. ತದನಂತರ ಶೈಲಿ ಹಾಳೆಗಳನ್ನು ಅನ್ವಯಿಸಿ ಅದನ್ನು ಅಲಂಕರಿಸಿ. ನಮ್ಮ ಸಮತಲ ಮೆನುವು 5 ಐಟಂಗಳನ್ನು ಹೊಂದಿರಲಿ. ಮೊದಲ ಐಟಂ ಮುಖ್ಯ ಪುಟಕ್ಕೆ ಮರುನಿರ್ದೇಶಿಸಲಾಗುತ್ತದೆ. ಎರಡನೇ ಐಟಂ "ಅಸ್ ಅಸ್" ಆಗಿದೆ. ಮೂರನೆಯದು ನಮ್ಮ ಪ್ರಶಸ್ತಿಗಳು. ನಾಲ್ಕನೇ - "ಇದು ಆಸಕ್ತಿದಾಯಕವಾಗಿದೆ." ಐದನೇ "ನಮ್ಮನ್ನು ಸಂಪರ್ಕಿಸಿ".

HTML ಕೋಡ್ ಈ ರೀತಿ ಕಾಣುತ್ತದೆ:

ಯಾರು ತಿಳಿದಿಲ್ಲ: ಉಲ್ ಟ್ಯಾಗ್ ಅನ್ನು ಬುಲೆಟ್ ಪಟ್ಟಿಗಾಗಿ ಬಳಸಲಾಗುತ್ತದೆ , ಅದರ ಅಂಶಗಳು ಲಿ ಜೊತೆಗೆ ಪ್ರಾರಂಭವಾಗುತ್ತದೆ. Li ಟ್ಯಾಗ್ಗಳು ಉಲ್ಗೆ ಅನ್ವಯವಾಗುವ ಶೈಲಿಗಳನ್ನು ಆನುವಂಶಿಕವಾಗಿ ಪಡೆದುಕೊಳ್ಳುತ್ತವೆ.

ಉಲ್ ಪಟ್ಟಿಯ ಒಂದು ಬ್ಲಾಕ್ ಅಂಶವಾಗಿದೆ, ಇದನ್ನು ಪುಟದ ಅಗಲಕ್ಕೆ ವಿಸ್ತರಿಸಲಾಗುವುದು. ಲಿ ಸಹ ನಿರ್ಬಂಧಿಸಲಾಗಿದೆ.

ಆದ್ದರಿಂದ, index.html ಅನ್ನು ರಚಿಸಿ. ನಮ್ಮ ಕೋಡ್ ಅನ್ನು ನಾವು ಡಯಲ್ ಮಾಡುತ್ತೇವೆ. ಈ ಹಂತದಲ್ಲಿ, ಬ್ರೌಸರ್ ಲಂಬವಾದ ಮೆನುವನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತದೆ, ಸಮತಲವಾಗಿರುವ ಒಂದು ಅಲ್ಲ. ಸೈಟ್ಗಾಗಿ ಸಮತಲವಾದ ಮೆನು ಮಾಡಲು - ನಮಗೆ ಗುರಿ ಇದೆ. ಇದಕ್ಕಾಗಿ ನಮಗೆ ಸಿಎಸ್ಎಸ್ ಬೇಕು.

ಏಕೆ ಸಿಎಸ್ಎಸ್?

ನೀವು ಇನ್ನೂ ಸೈಟ್ಗಳ ಅಭಿವೃದ್ಧಿಗೆ ಕೇವಲ ಮಾಸ್ಟರಿಂಗ್ ಆಗಿದ್ದರೆ, ನೀವು ಕ್ಯಾಸ್ಕೇಡಿಂಗ್ ಸ್ಟೈಲ್ ಶೀಟ್ಗಳ ಪರಿಕಲ್ಪನೆಯನ್ನು ತಿಳಿದುಕೊಳ್ಳಬೇಕು. ವಾಸ್ತವವಾಗಿ, ಇವುಗಳು ವೆಬ್ಸೈಟ್ನ ಪುಟಗಳಲ್ಲಿ ವಿಭಿನ್ನ ಅಂಶಗಳನ್ನು ಅನ್ವಯಿಸುವ ಫಾರ್ಮ್ಯಾಟಿಂಗ್, ಪ್ರಕ್ರಿಯೆಗೆ ಸಂಬಂಧಿಸಿದ ನಿಯಮಗಳಾಗಿವೆ. ಸ್ಟ್ಯಾಂಡರ್ಡ್ ಎಚ್ಟಿಎಮ್ಎಲ್ನಲ್ಲಿರುವ ಅಂಶಗಳ ಗುಣಲಕ್ಷಣಗಳನ್ನು ನೀವು ವಿವರಿಸಿದರೆ, ನೀವು ಇದನ್ನು ಮತ್ತೆ ಪುನರಾವರ್ತಿಸಬೇಕು, ನೀವು ಅದೇ ರೀತಿಯ ಸಂಕೇತಗಳನ್ನು ನಕಲಿಸುತ್ತೀರಿ. ಬಳಕೆದಾರರ ಕಂಪ್ಯೂಟರ್ನಲ್ಲಿ ಪುಟ ಲೋಡ್ ಆಗುವ ಸಮಯವು ಬೆಳೆಯುತ್ತದೆ. ಇದನ್ನು ತಪ್ಪಿಸಲು, ಸಿಎಸ್ಎಸ್ ಇದೆ. ಒಂದು ನಿರ್ದಿಷ್ಟ ಅಂಶವನ್ನು ಒಮ್ಮೆ ಮಾತ್ರ ವಿವರಿಸಲು ಸಾಕು, ತದನಂತರ ನಿರ್ದಿಷ್ಟ ಶೈಲಿಯ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಎಲ್ಲಿ ಬಳಸಬೇಕೆಂದು ಸೂಚಿಸಿ. ಪುಟದ ಪಠ್ಯದಲ್ಲಿ ಮಾತ್ರವಲ್ಲದೆ ಇನ್ನೊಂದು ಕಡತದಲ್ಲಿಯೂ ನೀವು ವಿವರಣೆಯನ್ನು ಮಾಡಬಹುದು. ಇದು ಸೈಟ್ನ ಯಾವುದೇ ಪುಟದಲ್ಲಿ ವಿಭಿನ್ನ ಶೈಲಿಗಳ ವಿವರಣೆಯನ್ನು ಅನ್ವಯಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಸಿಎಸ್ಎಸ್ ಫೈಲ್ ಅನ್ನು ಸರಿಪಡಿಸುವ ಮೂಲಕ ಹಲವಾರು ಪುಟಗಳನ್ನು ಬದಲಾಯಿಸುವ ಅನುಕೂಲವೂ ಸಹ ಇದೆ. ಸ್ಟೈಲ್ ಹಾಳೆಗಳು ಫಾಂಟ್ಗಳೊಂದಿಗೆ ಎಚ್ಟಿಎಮ್ಎಲ್ಗಿಂತ ಉತ್ತಮ ಮಟ್ಟದಲ್ಲಿ ಕೆಲಸ ಮಾಡಲು ಅನುಮತಿಸುತ್ತದೆ, ಗ್ರಾಫಿಕ್ಸ್ನೊಂದಿಗೆ ಸೈಟ್ನ ಭಾರವಾದ ಪುಟಗಳನ್ನು ತಪ್ಪಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.

ಮೆನು ಅಭಿವೃದ್ಧಿಯ ಶೈಲಿ ಹಾಳೆಗಳನ್ನು ಬಳಸಿ

ಮೆನುಗಾಗಿ ಸಿಎಸ್ಎಸ್:

1. # My_1menu {list-style: none; ಪ್ಯಾಡಿಂಗ್: 6; ಅಗಲ: 800 px; ಮಾರ್ಜಿನ್: ಸ್ವಯಂ;}
2. # My_1menu li {ಫ್ಲೋಟ್: ಎಡ; ಫಾಂಟ್: ಇಟಾಲಿಕ್ 18px Arial;}
3. # My_1menu a {color: # 756; ಪ್ರದರ್ಶಿಸು: ನಿರ್ಬಂಧಿಸು; ಎತ್ತರ: 55 px; ಸಾಲು-ಎತ್ತರ: 55px; ಪ್ಯಾಡಿಂಗ್: 0px 15px 0px 15px; ಹಿನ್ನೆಲೆ: # dfc; ಪಠ್ಯ-ಅಲಂಕಾರ: ಯಾವುದೂ ಇಲ್ಲ;
4. # My_1menu a: ಹೋವರ್ {color: #foa; ಹಿನ್ನೆಲೆ: # 788;}

ಈಗ ಪರಿಣಾಮವಾಗಿ ಸಿಎಸ್ಎಸ್ ಸಮತಲ ಮೆನು ಪರೀಕ್ಷಿಸಲು ಅವಕಾಶ.

# My_1menu - ಈ ಶೈಲಿಯನ್ನು ಐಡಿ = my_1menu, ಪಟ್ಟಿ-ಶೈಲಿಯೊಂದಿಗೆ UL ಅಂಶಕ್ಕೆ ನಿಗದಿಪಡಿಸಲಾಗಿದೆ ಹೇಗೆ: ಪಟ್ಟಿಯ ಐಟಂಗಳ ಎಡಭಾಗದಲ್ಲಿ ಗುರುತುಗಳನ್ನು ತೆಗೆದುಹಾಕುವ ಆಜ್ಞೆ ಯಾವುದೂ ಇಲ್ಲ.

ಅಗಲ: 800px - ನಮ್ಮ ಮೆನುವಿನ ಅಗಲ 800 ಪಿಕ್ಸೆಲ್ಗಳು.

ಪ್ಯಾಡಿಂಗ್: 0 - ಇದು ಒಳಗೆ ಇಂಡೆಂಟ್ಗಳನ್ನು ತೆಗೆದುಹಾಕುತ್ತದೆ.

ಮಾರ್ಜಿನ್: ನಮ್ಮ ಪುಟದ ಮಧ್ಯಭಾಗದಲ್ಲಿರುವ ಸಮತಲ ಮೆನುವಿನ ಸ್ವಯಂ ಜೋಡಣೆ.

# My_1menu li - li- ಅಂಶಗಳಿಗೆ ಶೈಲಿಗಳನ್ನು ನಿಯೋಜಿಸುತ್ತದೆ.

ಎತ್ತರ: 55px - ಮೆನುವಿನ ಎತ್ತರ.

# My_1menu a: hover - ಒಂದು ಮೌಸ್ ಅದರ ಮೇಲೆ ಏರುವಾಗ ಒಂದು-ಅಂಶಕ್ಕೆ ಶೈಲಿಗಳನ್ನು ನಿಗದಿಪಡಿಸುತ್ತದೆ.

ಪ್ರತಿ ಡೆವಲಪರ್ ತನ್ನದೇ ನಿಯತಾಂಕಗಳನ್ನು ಇಲ್ಲಿ ಹೊಂದಿಸಬಹುದಾದ್ದರಿಂದ ನಾವು ಪ್ರತಿ ಸಾಲಿನ ವಿವರಗಳನ್ನು ವಿವರಿಸುವುದಿಲ್ಲ. ಸೈಟ್ನಲ್ಲಿರುವ ಮೆನುವಿನಲ್ಲಿ ಶೈಲಿಗಳನ್ನು ಅನ್ವಯಿಸಲು ಇದು ಆಧಾರವಾಗಿದೆ. ಚಿತ್ರಗಳನ್ನು ಅನ್ವಯಿಸುವ ಮೂಲಕ ನೀವು ಸಂಪೂರ್ಣ ಮತ್ತು ಸುಂದರ ನೋಟವನ್ನು ನೀಡಬಹುದು. ಅಂಶವನ್ನು ಒಂದು ಉದಾಹರಣೆಗೆ, ಹಿನ್ನೆಲೆ ನಿಗದಿಪಡಿಸಿ: url (img1.png) repeat-x. ನಮಗೆ ಹಿನ್ನೆಲೆಯಿದೆ: url (img2.png) ಪುನರಾವರ್ತಿತ- x ಒಂದು: ಹೂವರ್.

ನಿಮ್ಮ ಕಲ್ಪನೆಯ, ಸೃಜನಶೀಲ ಆದ್ಯತೆಗಳನ್ನು ಬಳಸಿ. ನಂತರ, ಸೈಟ್ನಲ್ಲಿ ಸರಳವಾದ ಮೆನುವನ್ನು ಹೇಗೆ ರಚಿಸುವುದು ಎಂಬುದರ ಕುರಿತಾದ ಜ್ಞಾನದ ಆಧಾರದ ಮೇಲೆ, ನೀವು ತಮ್ಮದೇ ಆದ ಅನನ್ಯ ವಿನ್ಯಾಸದೊಂದಿಗೆ ಪುಟಗಳನ್ನು ಅಭಿವೃದ್ಧಿಪಡಿಸಬಹುದು.