JQuery ಜೊತೆ ಅಕಾರ್ಡಿಯನ್ ರೂಪದಲ್ಲಿ ಸೈಟ್ ಲಂಬ ಮೆನು

ಮೆನು, ನಿಮಗೆ ತಿಳಿದಿರುವಂತೆ - ಸೈಟ್ ನ ಒಂದು ಅವಿಭಾಜ್ಯ ಅಂಗವಾಗಿದೆ. ಆಸಕ್ತಿಕರ ನ್ಯಾವಿಗೇಟ್ ಆನ್ಲೈನ್ ರಿಸೋರ್ಸ್ ಆಸಕ್ತಿ ಭೇಟಿ ಸಾಧ್ಯವಾಗುತ್ತದೆ. ಜೊತೆಗೆ, ಯಾವುದೇ ಮೆನು ಮಹತ್ವದ ಅಂಶವೆಂದರೆ - ಅದರ compactness. ಒಂದು ಸರಳ ಲಂಬ ಮೆನು ಸುಲಭವಾಗಿ HTML ಮತ್ತು ಸಿಎಸ್ಎಸ್ ರಚಿಸಲಾಗಿದೆ. ಆದರೆ ನಾವು ಹೋಗಬೇಕು: ನಮಗೆ jQuery ನ ಸಹಾಯದಿಂದ ರಚಿಸಲು ಮೆನು "ಅಕಾರ್ಡಿಯನ್" ಕಲಿಯೋಣ.

ಒಂದು ಮೆನು "ಅಕಾರ್ಡಿಯನ್" ರಚಿಸಿ

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

HTML ಕೋಡ್

ಆದ್ದರಿಂದ, ನಮ್ಮ ಲಂಬ ಮೆನು ರಚಿಸಲು, ನೀವು ಮೊದಲು, ಎಚ್ಟಿಎಮ್ಎಲ್ ಕೋಡ್ ಡಯಲ್ ಮಾಡಬೇಕು ಕೆಳಗಿನ ಸಾಲುಗಳನ್ನು ಹೊಂದಿರುತ್ತವೆ:

Accord_menu.html ಎಂಬ ಕಡತದಲ್ಲಿ ಈ ಕೋಡ್ ಉಳಿಸಿ.

ನೀವು ನೋಡಬಹುದು ಎಂದು, ನಾವು ಒಂದು unordered ಪಟ್ಟಿ ರಚಿಸಿದ. ಇದು 3 ಮುಖ್ಯ ಅಂಶಗಳನ್ನು ಒಳಗೊಂಡಿದೆ:

- ಫೋಟೋಗಳು;

- ಚಲನಚಿತ್ರಗಳು;

- ಪುಸ್ತಕಗಳು.

ಪ್ರತಿ ಐಟಂ ಕೆಲವು ಪ್ಯಾರಾಗಳು ಹೊಂದಿದೆ. # ನೀಡುವವರಾದಿದ್ದರೆ ನೀವು ಕೊಂಡಿಗಳು ಸೇರಿಸಲು ಅಗತ್ಯವಿದೆ. ಈಗ ಶೈಲಿಯನ್ನು ವಿವರಿಸಲು ಮುಖ್ಯ. ಇದು ಎಲ್ಲಾ ನಿಮ್ಮ ಇಂಟರ್ನೆಟ್ ಸಂಪನ್ಮೂಲ ನೋಟ ಅವಲಂಬಿಸಿರುತ್ತದೆ. ಸೈಟ್ ತನ್ನ ವಿನ್ಯಾಸ ಸಮರಸವಾಗಿ ಸಂಯೋಜಿಸಲು ಮಾಡಬೇಕು ಲಂಬ ಮೆನು.

ಸಿಎಸ್ಎಸ್ ಕೋಡ್

ಶೈಲಿಗಳು ನಿಮಗೆ ಕಷ್ಟ ಮಾಡಬಾರದು. ಈ ಉದಾಹರಣೆಯಲ್ಲಿ ಗ್ರೇಡಿಯಂಟ್ ಫಿಲ್ ಬಳಸುವ ಮಾತ್ರವಲ್ಲದೇ ಗಮನಿಸಿ. ಇಲ್ಲಿ ಸಿಎಸ್ಎಸ್-ಕೋಡ್:

ಬಣ್ಣ CSS-ಕಡತದಲ್ಲಿ ಸೂಚಿಸಲಾಗಿರುತ್ತದೆ, ಗಾತ್ರ ಗುರುತುಗಳು ಎಡಭಾಗದಲ್ಲಿರುವ ಪಟ್ಟಿಯಲ್ಲಿ ಐಟಂಗಳನ್ನು ತೆಗೆದುಹಾಕಲಾಗಿದೆ. ಇದು ನೀವು ಸುಳಿದಾಡಿ ಪ್ರತಿ ಐಟಂ ಮತ್ತು ಉಪ ಮೆನು ವರ್ತಿಸುತ್ತಾರೆ ಹೇಗೆ ನಿರ್ಧರಿಸುತ್ತದೆ. ಉದಾಹರಣೆಗೆ:

# E1fee2 - ಈ ತೆಳು ಹಸಿರು ಬಣ್ಣ ಉಪ.

# C4f0f7 ನೀವು ಅವುಗಳನ್ನು ಸುಳಿದಾಡಿ -golubovaty ನೆರಳಿನಲ್ಲಿ ಉಪ.

ಪ್ರದರ್ಶನ ಆಸ್ತಿ ಅಗತ್ಯ ಪ್ಯಾಡಿಂಗ್ ಮತ್ತು ಗಾತ್ರವನ್ನು ಹೊಂದಿಸಲು ಬ್ಲಾಕ್ ಮೌಲ್ಯವನ್ನು ಕೇಳಿ. ಬಣ್ಣ, ಗಾತ್ರ, ಫಾಂಟ್ ಮಾದರಿ, ಸ್ಥಳ - ಎಲ್ಲವೂ ಸಿಎಸ್ಎಸ್ ಕಡತದಲ್ಲಿ ವಿವರಿಸಲು ಇದೆ. ಉದಾಹರಣೆಗೆ, accordionmenu_my1.css ಕರೆ.

ಸಂಪರ್ಕಿಸಲಾಗುತ್ತಿದೆ jQuery ಮೆನು ಸುಧಾರಣೆಗಳು

ನೀವು ಸ್ಮರಿಸಿಕೊಳ್ಳಲು, ನಮ್ಮ ಗುರಿ - ಒಂದು ಲಂಬ ಮೆನು jQuery ರಚಿಸಲು. ಈ ತಂತ್ರಜ್ಞಾನ ಪರಿಚಿತವಾಗಿರುವ ಇದ್ದರೆ, ಚಿಂತಿಸಬೇಡಿ. ಗೂಗಲ್ ಭಂಡಾರ ಬಳಸಲು ಮತ್ತು JQuery ಸ್ಕ್ರಿಪ್ಟ್ ಸಂಪರ್ಕ. ಇದು ಹೆಚ್ಚು ಆಕರ್ಷಕ ಮೆನು ಮಾಡುತ್ತದೆ. jQuery ಹೈಪರ್ಟೆಕ್ಸ್ಟ್ ಮಾರ್ಕಪ್ HTML ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಸಂವಾದದ ಆಧಾರದ ಒಂದು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಗ್ರಂಥಾಲಯವಾಗಿದೆ. jQuery ನೀವು ಅಂಶಗಳ ವಿಷಯ ಮತ್ತು ಲಕ್ಷಣಗಳು ಪ್ರವೇಶಿಸಲು ಅನುಮತಿಸುತ್ತದೆ.

ಆದ್ದರಿಂದ, ಎಚ್ಟಿಎಮ್ಎಲ್-ಫೈಲ್ ದೇಹದಲ್ಲಿ ಅಗತ್ಯ ಸ್ಕ್ರಿಪ್ಟ್ ಸಂಪರ್ಕ ಮತ್ತು ಕುದುರೆ ರೇಸಿಂಗ್ ಅಂಶಗಳನ್ನು ಹೊರತುಪಡಿಸಿ, 2 ಅಸ್ಥಿರ ಸಂಗ್ರಹಕ್ಕಾಗಿ ನಿಯಮಗಳನ್ನು ಸೆಟ್. ಒಂದು ಮೌಸ್ ಕ್ಲಿಕ್ ಇದರಲ್ಲಿ ಒಂದು ಪ್ರಾರಂಭದಲ್ಲಿ ಇತರ ಟ್ಯಾಬ್ಗಳನ್ನು ಮುಚ್ಚುವ ಕೋಡ್ ಕೊಡುಗೆ ನೀಡಿ. ಇಲ್ಲಿ ತೋರುತ್ತಿದೆ ಹೇಗೆ:

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