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

ಆದಾಗ್ಯೂ, ನೀವು ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಬಳಸಿ ಮಾತ್ರ ರಚಿಸಬಹುದು. ಈ ಲೈಬ್ರರಿ ಸಂಪರ್ಕ ಹೊಂದಿಲ್ಲದಿದ್ದರೆ, ನೀವು HTML ಮತ್ತು CSS ಅನ್ನು ಬಳಸಿಕೊಂಡು ಸ್ಪಂದಿಸುವ ಬಹು-ಹಂತದ ಮೆನುವನ್ನು ರಚಿಸಬಹುದು ಮತ್ತು ನಂತರ PHP ಕಾರ್ಯವನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಬಹುದು.

ಮೊದಲಿಗೆ, ನೀವು ಇತರ ಪಟ್ಟಿಗಳನ್ನು ಒಳಗೊಂಡಿರುವ HTML ಫೈಲ್‌ನಲ್ಲಿ ಅನುಕ್ರಮವಿಲ್ಲದ ಪಟ್ಟಿಯನ್ನು ರಚಿಸಬೇಕಾಗಿದೆ. ಇದನ್ನು ಮಾಡಲು, ನೀವು ಪ್ರಮಾಣಿತ ಟ್ಯಾಗ್ಗಳನ್ನು ಬಳಸಬೇಕು

ಮತ್ತು
• . CSS ಕ್ಯಾಸ್ಕೇಡಿಂಗ್ ಸ್ಟೈಲ್ ಶೀಟ್‌ನಿಂದ ನಂತರ ಪ್ರಕ್ರಿಯೆಗೊಳಿಸಲಾಗುವ ತರಗತಿಗಳ ರಚನೆಯ ಬಗ್ಗೆ ನಾವು ಮರೆಯಬಾರದು. ಅದನ್ನು ಹೆಚ್ಚು ಸ್ಪಷ್ಟಪಡಿಸಲು, ಪಟ್ಟಿಗಳನ್ನು ಬರೆಯುವ ಮತ್ತು ತರಗತಿಗಳನ್ನು ರಚಿಸುವ ಸಣ್ಣ ಉದಾಹರಣೆಯನ್ನು ನೀಡುವುದು ಯೋಗ್ಯವಾಗಿದೆ.

  ಕ್ಯಾಸ್ಕೇಡಿಂಗ್ ಸ್ಟೈಲ್ ಶೀಟ್ ಅನ್ನು ಬಳಸಿಕೊಂಡು ಸ್ಪಂದಿಸುವ ಡ್ರಾಪ್‌ಡೌನ್ ಮೆನುವಿನ ಅನಿಮೇಶನ್ ಅನ್ನು ಹೊಂದಿಸಲಾಗಿದೆ. ಪರದೆಯು 50, 75 ಮತ್ತು 25% ರಷ್ಟು ಕಡಿಮೆಯಾದಾಗ ಇಲ್ಲಿ ನೀವು ಮೆನುಗಾಗಿ ನಿಯತಾಂಕಗಳನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಬೇಕಾಗಿದೆ. ಹೊಂದಾಣಿಕೆಯ ಕಾರ್ಯವನ್ನು ರಚಿಸುವ ಈ ವಿಧಾನವು ಸಮರ್ಥ ವಿನ್ಯಾಸವನ್ನು ಖಾತ್ರಿಗೊಳಿಸುತ್ತದೆ, ಇದರಲ್ಲಿ ಮೆನು "ಹೊರಗೆ ಚಲಿಸುವುದಿಲ್ಲ".

  ಮತ್ತು ಅಂತಿಮವಾಗಿ, ನೀವು ಕೆಳಗೆ ಸೂಚಿಸಲಾದ ಕಾರ್ಯವನ್ನು ಡಾಕ್ಯುಮೆಂಟ್‌ಗೆ ನಮೂದಿಸಬೇಕಾಗುತ್ತದೆ.

  ಇದನ್ನು ಹೊರತುಪಡಿಸಿ ಯಾವುದೇ ಕಾರ್ಯಗಳ ಬಳಕೆಯ ಮೂಲಕ ಸೈಟ್ ಯೋಚಿಸದಿದ್ದರೆ, ನೀವು ಇನ್ನೂ ಪ್ರತ್ಯೇಕ ಸ್ಕ್ರಿಪ್ಟ್ ಡಾಕ್ಯುಮೆಂಟ್ ಅನ್ನು ರಚಿಸಬೇಕಾಗಿದೆ. ನೀವು ಅದನ್ನು ಸರಳ HTML ನಲ್ಲಿ ಟೈಪ್ ಮಾಡಿದರೆ, ಅದು ಪಠ್ಯದ ಭಾಗವಾಗಿ ಬ್ರೌಸರ್ ವಿಂಡೋದಲ್ಲಿ ಸರಳವಾಗಿ ಗೋಚರಿಸುತ್ತದೆ ಮತ್ತು ಕಾರ್ಯನಿರ್ವಹಿಸುವುದಿಲ್ಲ.

  

  JQuery

  JQuery ಪ್ಲಗಿನ್ ಅನ್ನು ಬಳಸಿಕೊಂಡು ನ್ಯಾವಿಗೇಷನ್ ಬಾರ್ ಅನ್ನು ರಚಿಸುವುದು ಮತ್ತೊಂದು ಉತ್ತಮ ಪರಿಹಾರವಾಗಿದೆ. ಅಂತಹ ಸೇವೆಯಲ್ಲಿ ಹೊಂದಾಣಿಕೆಯ ಮೆನು ಕೆಲವೇ ನಿಮಿಷಗಳನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ. ಪ್ಲಗಿನ್ ಅನ್ನು ಇಂಟರ್ನೆಟ್ನಲ್ಲಿ ಡೌನ್ಲೋಡ್ ಮಾಡಬಹುದು, ಇದು ಸರಳ ಮತ್ತು ಸ್ಪಷ್ಟವಾದ ಇಂಟರ್ಫೇಸ್ ಅನ್ನು ಹೊಂದಿದೆ, ಅದು ಬಳಸಲು ಸುಲಭ ಮತ್ತು ಸರಳವಾಗಿದೆ. ಆದ್ದರಿಂದ ಸ್ಟೈಲ್ಸ್ ಫೈಲ್ ಅನ್ನು ಸಂಪರ್ಕಿಸುವಲ್ಲಿ ಯಾವುದೇ ಸಮಸ್ಯೆಗಳಿಲ್ಲ.

  ಸ್ಟೈಲ್ ಫೈಲ್ ಅನ್ನು ಸಂಪರ್ಕಿಸಿದ ನಂತರ, ಹೊಂದಾಣಿಕೆಯ ನ್ಯಾವಿಗೇಷನ್ ರಚಿಸಲು ನೀವು ಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಬರೆಯಬೇಕಾಗುತ್ತದೆ.

  

  ಇದರ ನಂತರ, ನ್ಯಾವಿಗೇಷನ್ ಈಗಾಗಲೇ ಅಸ್ತಿತ್ವದಲ್ಲಿಲ್ಲದಿದ್ದರೆ ನೀವು ಅದನ್ನು ರಚಿಸಬೇಕಾಗಿದೆ. ಇಲ್ಲಿ ಎಲ್ಲವೂ ತತ್ವದ ಪ್ರಕಾರ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ: "ಚತುರ ಎಲ್ಲವೂ ಸರಳವಾಗಿದೆ." HTML ಡಾಕ್ಯುಮೆಂಟ್‌ನಲ್ಲಿ ನೀವು ಟ್ಯಾಗ್‌ನಲ್ಲಿ ಬುಲೆಟ್ ಪಟ್ಟಿಯನ್ನು ರಚಿಸಬೇಕಾಗಿದೆ nav. ನೀವು ಈಗಾಗಲೇ ನೀಡಿದ ಉದಾಹರಣೆಯನ್ನು ಅಥವಾ ಅದರ ಸರಳೀಕೃತ ಆವೃತ್ತಿಯನ್ನು ಬಳಸಬಹುದು, ಅದು ಕೆಳಗೆ ತೋರಿಸಿರುವಂತೆ ಕಾಣುತ್ತದೆ.

  ಕೆಲಸದ ಈ ಹಂತದಲ್ಲಿ, ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಲೋಗೋವನ್ನು ಮಾತ್ರ ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ ಮತ್ತು ಮೆನುವನ್ನು ಮರೆಮಾಡಲಾಗುತ್ತದೆ. ಇದು ಕಾಣಿಸಿಕೊಳ್ಳಲು, ನೀವು ಪ್ಲಗಿನ್‌ಗೆ ಬದಲಾವಣೆಗಳನ್ನು ಉಂಟುಮಾಡುವ ಕಾರ್ಯವನ್ನು ಸೇರಿಸುವ ಅಗತ್ಯವಿದೆ - okayNav.

  var ಸಂಚರಣೆ = $("#nav-main").okayNav();

  ಈಗ ನೀವು ಕೆಲಸದ ಫಲಿತಾಂಶಗಳನ್ನು ನೋಡಬಹುದು. ಬ್ರೌಸರ್ ವಿಂಡೋದ ಸಾಮಾನ್ಯ ಅಗಲದೊಂದಿಗೆ, ಈ ಮೆನು ಸಂಪೂರ್ಣವಾಗಿ ಸಾಮಾನ್ಯವಾಗಿ ಕಾಣುತ್ತದೆ, ಆದರೆ ನೀವು ಪರದೆಯನ್ನು ಕಡಿಮೆ ಮಾಡಿದರೆ, ಕೊನೆಯ ಐಟಂಗಳು ಕಣ್ಮರೆಯಾಗುತ್ತವೆ. ಬದಲಾಗಿ, ಮೂರು ದೊಡ್ಡ ಚುಕ್ಕೆಗಳು ಕಾಣಿಸಿಕೊಳ್ಳುತ್ತವೆ, ಲಂಬವಾಗಿ ಇದೆ. ಒತ್ತಿದಾಗ, ಅವು ಫ್ಲಿಪ್ ಓವರ್ ಆಗುವಂತೆ ತೋರುತ್ತವೆ, ಸಮತಲ ಸ್ಥಾನವನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತವೆ ಮತ್ತು ಪರದೆಯ ಮೇಲಿನ ಬಲ ಮೂಲೆಯಲ್ಲಿರುವ ಲಂಬವಾದ ಪಟ್ಟಿಯಲ್ಲಿ ಗುಪ್ತ ಮೆನು ಐಟಂಗಳನ್ನು ಬಹಿರಂಗಪಡಿಸಲಾಗುತ್ತದೆ.

  

  ಈ ಪರಿಹಾರವು ತುಂಬಾ ಆಧುನಿಕವಾಗಿ ಕಾಣುತ್ತದೆ, ಮತ್ತು ಬಳಸಿದ ಅನಿಮೇಷನ್ ಪರಿಣಾಮವು ಸಂಪನ್ಮೂಲವನ್ನು ಸಂದರ್ಶಕರಿಗೆ ಅನುಕೂಲಕರ ಬೆಳಕಿನಲ್ಲಿ ಇರಿಸುತ್ತದೆ.

  ಜೂಮ್ಲಾ

  ಮತ್ತು Joomla ವ್ಯವಸ್ಥೆಯನ್ನು ಬಳಸಿಕೊಂಡು ಹೊಂದಾಣಿಕೆಯ ಮೆನುವನ್ನು ರಚಿಸುವ ಕೊನೆಯ ಆಯ್ಕೆ. ಇದು CMS ವಿಷಯ ನಿರ್ವಹಣಾ ವ್ಯವಸ್ಥೆಯಾಗಿರುವ ಉಚಿತ ವೆಬ್‌ಸೈಟ್ ರಚನೆ ಸೇವೆಯಾಗಿದೆ. ಮತ್ತು ಆರಂಭದಲ್ಲಿ ಈಗಾಗಲೇ ಹೇಳಿದಂತೆ, ಸೈಟ್ ಅನ್ನು CMS ಬಳಸಿ ರಚಿಸಿದ್ದರೆ ಮತ್ತು ನೀವು ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಮೆನುವನ್ನು ಹೊಂದಾಣಿಕೆಗೆ ಬದಲಾಯಿಸಬೇಕಾದರೆ, ಮೊದಲ ಟ್ಯಾಗ್‌ನಿಂದ ಸೈಟ್‌ನ ಕ್ರಿಯಾತ್ಮಕತೆಯನ್ನು ರಚಿಸಲು ಪ್ರಾರಂಭಿಸುವುದು ಉತ್ತಮ. ಹಿಂದಿನ ಉದಾಹರಣೆಗಳಂತೆಯೇ, ನೀವು HTML ನಲ್ಲಿ ಬುಲೆಟ್ ಮೆನು ಪಟ್ಟಿಯನ್ನು ರಚಿಸಬೇಕಾಗಿದೆ. ಪ್ರತಿ ಐಟಂಗೆ ಮಾತ್ರ ನೀವು ನಿಮ್ಮ ಸ್ವಂತ ತರಗತಿಯನ್ನು ಬರೆಯಬೇಕಾಗಿದೆ. ಒಟ್ಟಾರೆಯಾಗಿ, ಎಲ್ಲವೂ ಕೆಳಗಿನಂತೆ ಕಾಣುತ್ತದೆ.

  ಮುಂದೆ ನೀವು ಶೈಲಿಗಳನ್ನು ಸೇರಿಸಬೇಕಾಗಿದೆ. ಎಲ್ಲಾ ಪ್ಯಾಡಿಂಗ್ ಅನ್ನು 0 px ಗೆ ಹೊಂದಿಸುವುದು ಮತ್ತು ಬಾಕ್ಸ್-ಗಾತ್ರವನ್ನು ಅನ್ವಯಿಸುವುದು ಉತ್ತಮವಾಗಿದೆ: ಬಾರ್ಡರ್-ಬಾಕ್ಸ್. ಎಷ್ಟು ಇಂಡೆಂಟ್‌ಗಳಿದ್ದರೂ ಅಂಶಗಳ ನಿರ್ದಿಷ್ಟ ಅಗಲವನ್ನು ನಿರ್ವಹಿಸಲು ಇದು ಸಾಧ್ಯವಾಗಿಸುತ್ತದೆ. ಮುಂದೆ, ನೀವು ಪೋಷಕ ಮೆನು ಅಂಶದ (ಡಿವಿ) ಅಗಲವನ್ನು 90% ಗೆ ಹೊಂದಿಸಬೇಕು ಮತ್ತು ನಂತರ ಪ್ರತಿ ಐಟಂ ಅನ್ನು ಪ್ರತ್ಯೇಕವಾಗಿ ಸ್ಟೈಲಿಂಗ್ ಮಾಡಲು ಪ್ರಾರಂಭಿಸಿ.

  

  ನೀವು ಗಡಿಗಳನ್ನು ತೆಗೆದುಹಾಕಬಹುದು, ಬಣ್ಣವನ್ನು ಬದಲಾಯಿಸಬಹುದು ಮತ್ತು ಭರ್ತಿ ಮಾಡಬಹುದು ಮತ್ತು ನೀವು ಕರ್ಸರ್ ಅನ್ನು ಸುಳಿದಾಡಿದಾಗ ಗೋಚರಿಸುವ ವಿನ್ಯಾಸವನ್ನು ಮಾಡಬಹುದು. ಒಂದು ಪದದಲ್ಲಿ, ಸಂಪನ್ಮೂಲದ ವಿನ್ಯಾಸಕ್ಕೆ ಅನುಗುಣವಾಗಿರುವ ಎಲ್ಲವನ್ನೂ ಮಾಡಿ. ಸ್ಪಂದಿಸುವ Joomla ಮೆನುವನ್ನು ರಚಿಸುವ ಕೊನೆಯ ಹಂತವೆಂದರೆ ಅದನ್ನು ಪರಿವರ್ತಿಸುವುದು. ಹೆಚ್ಚಾಗಿ, Joomla ಮೆನುವನ್ನು ರಚಿಸುತ್ತದೆ, ಪರದೆಯ ಗಾತ್ರವು ಬದಲಾದಾಗ, ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಮರುನಿರ್ಮಾಣವಾಗುತ್ತದೆ, ಹಲವಾರು ಸಾಲುಗಳಾಗಿ ವಿಭಜಿಸುತ್ತದೆ. ಇದೆಲ್ಲವನ್ನೂ CSS ನಲ್ಲಿ ಮಾಡಲಾಗುತ್ತದೆ, ಕ್ರಾಸ್-ಬ್ರೌಸರ್ ಸ್ಥಿತಿಯು ಸೇರಿಸಬೇಕಾದ ಏಕೈಕ ಕಾರ್ಯವಾಗಿದೆ. ವಿಭಿನ್ನ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಮೆನು ಒಂದೇ ರೀತಿ ಕಾಣಲು ಇದು ಅನುಮತಿಸುತ್ತದೆ.

  ಕ್ರಾಸ್-ಬ್ರೌಸರ್ ಕ್ರಿಯಾತ್ಮಕತೆ

  ಪ್ರತಿಕ್ರಿಯಾಶೀಲರಾಗಿರುತ್ತಾರೆ ಮೆನುವನ್ನು ರಚಿಸುವುದು ನಿಜವಾಗಿಯೂ ಸುಲಭವಲ್ಲ, ಇದಕ್ಕೆ ಜ್ಞಾನ ಮತ್ತು ಅನುಭವದ ಅಗತ್ಯವಿದೆ. ವಿವರಿಸಿದ ಎಲ್ಲಾ ಉದಾಹರಣೆಗಳು ಸಂಭವನೀಯ ವ್ಯತ್ಯಾಸಗಳ ಒಂದು ಸಣ್ಣ ಭಾಗವಾಗಿದೆ, ಆದರೆ ಒಬ್ಬ ವ್ಯಕ್ತಿಯು HTML ಮತ್ತು CSS ನ ಮೂಲಭೂತ ಜ್ಞಾನವನ್ನು ಹೊಂದಿದ್ದರೆ ಅವುಗಳು ಸಹ ಉಪಯುಕ್ತವಾಗಬಹುದು.

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

  flexMenu ಇದು ನಿಖರವಾಗಿ ಹುಡುಕಲು ತುಂಬಾ ಕಷ್ಟಕರವಾದ ಮೆನು ಮತ್ತು ನಾವು ಬರೆಯಲು ಪ್ರಾರಂಭಿಸಲಿರುವ ಕಾರ್ಯವನ್ನು ಹೊಂದಿದೆ.
  flexMenu - ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ಬದಲಾಗುತ್ತಿರುವ ಅಗಲವನ್ನು ಹೊಂದಿರುವ ಸೈಟ್‌ಗಳಿಗೆ ಸೂಕ್ತವಾದ ಮೆನು. ಇದರ ಮುಖ್ಯ ಮತ್ತು ವಿಶಿಷ್ಟ ವೈಶಿಷ್ಟ್ಯವೆಂದರೆ "ಇನ್ನಷ್ಟು" ಐಟಂನ ಸೇರ್ಪಡೆ ಮತ್ತು ಸಂಪೂರ್ಣ ನ್ಯಾವಿಗೇಶನ್ನ ಅಗಲಕ್ಕೆ ಹೊಂದಿಕೆಯಾಗದ ಐಟಂಗಳ ಡ್ರಾಪ್-ಡೌನ್ ಪಟ್ಟಿಗೆ ವರ್ಗಾವಣೆಯಾಗಿದೆ. ಅಂದರೆ, ನಾವು ದೊಡ್ಡ ಮಾನಿಟರ್ಗಳನ್ನು ನೋಡಿದರೆ, ನಾವು ಎಲ್ಲಾ ಬಿಂದುಗಳನ್ನು ನೋಡುತ್ತೇವೆ. ನಾವು ಬ್ರೌಸರ್ ವಿಂಡೋವನ್ನು ಕುಗ್ಗಿಸಲು ಪ್ರಾರಂಭಿಸಿದ ತಕ್ಷಣ, "ಇನ್ನಷ್ಟು" ಐಟಂ ಮೆನುವಿನ ಕೊನೆಯಲ್ಲಿ ಕಾಣಿಸಿಕೊಳ್ಳುತ್ತದೆ ಮತ್ತು ವಿಂಡೋ ಕುಗ್ಗಿದಂತೆ ಹೊಂದಿಕೊಳ್ಳದ ಐಟಂಗಳನ್ನು ಅದರ ಡ್ರಾಪ್-ಡೌನ್ ಪಟ್ಟಿಗೆ ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ಸರಿಸಲಾಗುತ್ತದೆ. ಹೀಗಾಗಿ, ನಾವು ಸ್ಥಿರ ಎತ್ತರ ಮತ್ತು "ಪ್ಲೇಯಿಂಗ್" ಅಗಲದೊಂದಿಗೆ ಮೆನುವನ್ನು ಹೊಂದಿದ್ದೇವೆ.
  FlexMenu ನೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವಾಗ ನಾವು ಒಂದು ಸಮಸ್ಯೆಯನ್ನು ಎದುರಿಸಿದ್ದೇವೆ. ನಮ್ಮ ಸಂದರ್ಭದಲ್ಲಿ, ಬಲಭಾಗದಲ್ಲಿ ಫ್ಲೋಟ್ನೊಂದಿಗೆ ಲೋಗೋ ಇತ್ತು: ಎಡ;, ಬಲಭಾಗದಲ್ಲಿ ಈ ಮೆನುವು ಫ್ಲೋಟ್: ಎಡ; ಮತ್ತು ಫ್ಲೋಟ್ನೊಂದಿಗೆ ಬಲಭಾಗದಲ್ಲಿ: ಬಲ; ಮತ್ತೊಂದು ಬ್ಲಾಕ್ ಇತ್ತು. ಬ್ರೌಸರ್ ವಿಂಡೋವನ್ನು ಮರುಗಾತ್ರಗೊಳಿಸುವಾಗ, ಬಲಭಾಗದಲ್ಲಿರುವ ಬ್ಲಾಕ್ ಮೆನುವಿನ ಕೆಳಗೆ ಜಿಗಿದಿದೆ, ನಂತರ ಇದೆಲ್ಲವೂ ಲೋಗೋ ಅಡಿಯಲ್ಲಿ ಜಿಗಿದಿದೆ ಮತ್ತು ನಂತರ ಮೆನು ಸಂಕೋಚನ ಕಾರ್ಯವನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಲಾಗಿದೆ. ಈ ಲೇಔಟ್ ವೈಶಿಷ್ಟ್ಯವನ್ನು ಹೇಗೆ ಎದುರಿಸುವುದು ಎಂಬುದನ್ನು ಮುಂದಿನ ವಿಷಯಗಳಲ್ಲಿ ಚರ್ಚಿಸಲಾಗುವುದು. ಟ್ಯೂನ್ ಮಾಡಿ ರೆಸ್ಪಾನ್ಸಿವ್ ನ್ಯಾವಿಗೇಷನ್ ಮೆನು ನ್ಯಾವಿಗೇಷನ್ ಮೆನುಗೆ ಉತ್ತಮ ಉದಾಹರಣೆ. ಬ್ರೌಸರ್ ವಿಂಡೋವನ್ನು ಮರುಗಾತ್ರಗೊಳಿಸುವಾಗ, ಐಟಂಗಳು ಒಂದಕ್ಕೊಂದು ಅತಿಕ್ರಮಿಸುತ್ತವೆ ಮತ್ತು ಅಗಲದಲ್ಲಿ ಜೋಡಿಸಲ್ಪಟ್ಟಿವೆ ಎಂದು ನಾವು ನೋಡುತ್ತೇವೆ. ತುಂಬಾ ಅಚ್ಚುಕಟ್ಟಾಗಿ ಕಾಣುತ್ತದೆ. ಬಹು ಮುಖ್ಯವಾಗಿ, ಈ ಹೊಂದಾಣಿಕೆಯ ಮೆನು ಮೊಬೈಲ್ ಸಾಧನಗಳಲ್ಲಿ ಉತ್ತಮವಾಗಿ ಕಾಣುತ್ತದೆ ಮತ್ತು ಮುಖ್ಯವಾಗಿ, ಸ್ಪರ್ಶ ಪ್ರದರ್ಶನದೊಂದಿಗೆ ಸಾಧನಗಳಲ್ಲಿ ಬಳಸಲು ಅನುಕೂಲಕರವಾಗಿದೆ.

  

  ಬಹು-ಹಂತದ ಫ್ಲಾಟ್ ಮೆನು - ಹೊಂದಾಣಿಕೆಯ ಸಂಚರಣೆ ಬಹು-ಹಂತದ ಫ್ಲಾಟ್ ಮೆನುವು ಹೊಂದಾಣಿಕೆಯ, ಬಹು-ಹಂತದ ಮೆನುವಾಗಿದ್ದು ಅದು jquery ಲೈಬ್ರರಿಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ. ಡೆಸ್ಕ್‌ಟಾಪ್ ಮಾನಿಟರ್‌ಗಳಲ್ಲಿ ನಾವು ಸಾಮಾನ್ಯ, ಪರಿಚಿತ ಸಮತಲ ಮೆನುವನ್ನು ನೋಡುತ್ತೇವೆ. ಮೊಬೈಲ್ ಸಾಧನಗಳಲ್ಲಿ, ಸಮತಲ ನ್ಯಾವಿಗೇಷನ್ ಡ್ರಾಪ್-ಡೌನ್ ಪಟ್ಟಿಯಾಗಿ ರೂಪಾಂತರಗೊಳ್ಳುತ್ತದೆ.
  ನೀವು ಪುಟದಲ್ಲಿ ಜಾಗವನ್ನು ಉಳಿಸಬೇಕಾದರೆ ಬಹು-ಹಂತದ ಫ್ಲಾಟ್ ಮೆನು ಉತ್ತಮ ಆಯ್ಕೆಯಾಗಿದೆ.

  

  ಹಬ್ರ್, ಹಲೋ!

  ಕೋಡ್‌ಪೆನ್‌ನಲ್ಲಿ ಕಾಣಿಸಿಕೊಳ್ಳುವ ವಿಭಿನ್ನ ತಜ್ಞರಿಂದ ಸಾಕಷ್ಟು ಉತ್ತಮ ಪರಿಹಾರಗಳಿವೆ ಮತ್ತು ಅವುಗಳಲ್ಲಿ ಉತ್ತಮವಾದವುಗಳನ್ನು ಒಂದೇ ಸ್ಥಳದಲ್ಲಿ ಸಂಗ್ರಹಿಸಬೇಕು ಎಂದು ನಾನು ನಂಬುತ್ತೇನೆ. ಆದ್ದರಿಂದ, 2 ವರ್ಷಗಳ ಹಿಂದೆ ನಾನು ನನ್ನ ಕಂಪ್ಯೂಟರ್‌ನಲ್ಲಿ ವಿವಿಧ ವಿಷಯಗಳ ಕುರಿತು ಆಸಕ್ತಿದಾಯಕ ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳನ್ನು ಉಳಿಸಲು ಪ್ರಾರಂಭಿಸಿದೆ.

  ನಾನು ಅವುಗಳನ್ನು mr ಕ್ಲೌಡ್ IDE ಉತ್ಪನ್ನ ಗುಂಪಿನಲ್ಲಿ ಪೋಸ್ಟ್ ಮಾಡುತ್ತಿದ್ದೆ. ಗೆಫೆಸ್ಟ್, ಇವುಗಳು 5-8 ಪರಿಹಾರಗಳ ಜೋಡಣೆಗಳಾಗಿವೆ. ಆದರೆ ಈಗ ನಾನು ವಿವಿಧ ವಿಷಯಗಳಲ್ಲಿ (ಬಟನ್‌ಗಳು, ಮೆನುಗಳು, ಟೂಲ್‌ಟಿಪ್‌ಗಳು, ಇತ್ಯಾದಿ) 15-30 ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳನ್ನು ಸಂಗ್ರಹಿಸಲು ಪ್ರಾರಂಭಿಸಿದೆ.

  ಅಂತಹ ದೊಡ್ಡ ಸೆಟ್‌ಗಳನ್ನು ಹೆಚ್ಚಿನ ತಜ್ಞರಿಗೆ ತೋರಿಸಬೇಕು. ಅದಕ್ಕಾಗಿಯೇ ನಾನು ಅವುಗಳನ್ನು Habr ನಲ್ಲಿ ಪೋಸ್ಟ್ ಮಾಡುತ್ತಿದ್ದೇನೆ. ಅವರು ನಿಮಗೆ ಉಪಯುಕ್ತ ಎಂದು ನಾನು ಭಾವಿಸುತ್ತೇನೆ.
  
  ಈ ವಿಮರ್ಶೆಯಲ್ಲಿ ನಾವು ಬಹು ಹಂತದ ಮೆನುಗಳನ್ನು ನೋಡುತ್ತೇವೆ.

  ಫ್ಲಾಟ್ ಸಮತಲ ನ್ಯಾವಿಗೇಷನ್

  

  ಸರಾಗವಾಗಿ ಕಾಣಿಸಿಕೊಳ್ಳುವ ಉಪಮೆನುಗಳೊಂದಿಗೆ ಸುಂದರವಾದ ನ್ಯಾವಿಗೇಷನ್ ಬಾರ್. ಕೋಡ್ ಉತ್ತಮವಾಗಿ ರಚನೆಯಾಗಿದೆ, js ಅನ್ನು ಬಳಸಲಾಗುತ್ತದೆ. ಬಳಸಿದ ವೈಶಿಷ್ಟ್ಯಗಳ ಮೂಲಕ ನಿರ್ಣಯಿಸುವುದು, ಇದು ie8+ ನಲ್ಲಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ.
  http://codepen.io/andytran/pen/kmAEy

  ಮೆಟೀರಿಯಲ್ Nav ಹೆಡರ್ w/ ಜೋಡಿಸಿದ ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳು

  

  ಎರಡು-ಕಾಲಮ್ ಉಪಮೆನುವಿನೊಂದಿಗೆ ಅಡಾಪ್ಟಿವ್ ಲಿಂಕ್ ಬಾರ್. ಎಲ್ಲವನ್ನೂ css ಮತ್ತು html ನಲ್ಲಿ ಮಾಡಲಾಗುತ್ತದೆ. ie8 ನಲ್ಲಿ ಬೆಂಬಲಿಸದ css3 ಸೆಲೆಕ್ಟರ್‌ಗಳನ್ನು ಬಳಸಲಾಗಿದೆ.
  http://codepen.io/colewaldrip/pen/KpRwgQ

  ಸ್ಮೂತ್ ಅಕಾರ್ಡಿಯನ್ ಡ್ರಾಪ್‌ಡೌನ್ ಮೆನು

  

  ಸರಾಗವಾಗಿ ತೆರೆಯುವ ಅಂಶಗಳೊಂದಿಗೆ ಸ್ಟೈಲಿಶ್ ಲಂಬ ಮೆನು. ಪರಿವರ್ತನೆ, ರೂಪಾಂತರ js ಕೋಡ್ ಅನ್ನು ಬಳಸಲಾಗುತ್ತದೆ.
  http://codepen.io/fainder/pen/AydHJ

  ಶುದ್ಧ CSS ಡಾರ್ಕ್ ಇನ್‌ಲೈನ್ ನ್ಯಾವಿಗೇಶನ್ ಮೆನು

  

  ಅಯಾನಿಕಾನ್‌ಗಳಿಂದ ಐಕಾನ್‌ಗಳೊಂದಿಗೆ ಡಾರ್ಕ್ ವರ್ಟಿಕಲ್ ನ್ಯಾವಿಗೇಷನ್ ಬಾರ್. ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಬಳಸಲಾಗುತ್ತದೆ. ie8 ನಲ್ಲಿ ಇದು ಹೆಚ್ಚಾಗಿ ಅನಿಮೇಷನ್ ಇಲ್ಲದೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ.
  http://codepen.io/3lv3n_snip3r/pen/XbddOO

  ಅನಿಮೇಷನ್ ಜೊತೆಗೆ ಶುದ್ಧ CSS3 ಮೆಗಾ ಡ್ರಾಪ್‌ಡೌನ್ ಮೆನು

  

  

  ಎರಡು ಔಟ್‌ಪುಟ್ ಫಾರ್ಮ್ಯಾಟ್‌ಗಳೊಂದಿಗೆ ಸ್ಟೈಲಿಶ್ ಮೆನು: ಅಡ್ಡ ಮತ್ತು ಲಂಬ. ಚಿಹ್ನೆಗಳು ಮತ್ತು css3 ಅನಿಮೇಷನ್ ಅನ್ನು ಬಳಸಲಾಗುತ್ತದೆ. ಇದು ಖಂಡಿತವಾಗಿಯೂ ie8 ನಲ್ಲಿ ಭಯಾನಕವಾಗಿ ಕಾಣುತ್ತದೆ, ಆದರೆ ಇತರ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಎಲ್ಲವೂ ತಂಪಾಗಿದೆ.
  ಲಂಬ ಲಿಂಕ್: http://codepen.io/rizky_k_r/full/sqcAn/
  ಸಮತಲಕ್ಕೆ ಲಿಂಕ್: http://codepen.io/rizky_k_r/pen/xFjqs

  CSS3 ಡ್ರಾಪ್‌ಡೌನ್ ಮೆನು

  

  ದೊಡ್ಡ ಅಂಶಗಳೊಂದಿಗೆ ಸಮತಲ ಮೆನು ಮತ್ತು ಲಿಂಕ್‌ಗಳ ಡ್ರಾಪ್-ಡೌನ್ ಪಟ್ಟಿ. js ಇಲ್ಲದೆ ಕ್ಲೀನ್ ಮತ್ತು ಕನಿಷ್ಠ ಕೋಡ್.
  http://codepen.io/ojbravo/pen/tIacg

  ಸರಳ ಶುದ್ಧ CSS ಡ್ರಾಪ್‌ಡೌನ್ ಮೆನು

  

  ಸರಳ ಆದರೆ ಸೊಗಸಾದ ಸಮತಲ ಮೆನು. ಫಾಂಟ್ ಅದ್ಭುತವನ್ನು ಬಳಸುತ್ತದೆ. ಎಲ್ಲವೂ js ಇಲ್ಲದೆ, css ಮತ್ತು html ನಲ್ಲಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ. ಇದು ie8 ನಲ್ಲಿ ಕೆಲಸ ಮಾಡುತ್ತದೆ.
  http://codepen.io/Responsive/pen/raNrEW

  ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ 3 ಮೆಗಾ-ಡ್ರಾಪ್‌ಡೌನ್ ಮೆನು

  

  ಆನ್ಲೈನ್ ​​ಸ್ಟೋರ್ಗಳಿಗೆ ಅತ್ಯುತ್ತಮ ಪರಿಹಾರ. ಹಲವಾರು ಹಂತದ ವರ್ಗಗಳು ಮತ್ತು ದೊಡ್ಡ ಚಿತ್ರಗಳನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತದೆ (ಉದಾಹರಣೆಗೆ, ಮಾರಾಟದಲ್ಲಿರುವ ಉತ್ಪನ್ನ). ಇದು ಬೂಸ್ಟ್ರ್ಯಾಪ್ 3 ಅನ್ನು ಆಧರಿಸಿದೆ.
  http://codepen.io/organizedchaos/full/rwlhd/

  ಫ್ಲಾಟ್ ನ್ಯಾವಿಗೇಷನ್

  

  ನಯವಾದ ಉಪಮೆನುವಿನೊಂದಿಗೆ ಸ್ಟೈಲಿಶ್ ನ್ಯಾವಿಗೇಷನ್ ಬಾರ್. ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಇದು ಸಮಸ್ಯೆಗಳನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತದೆ.
  http://codepen.io/andytran/pen/YPvQQN

  3D ನೆಸ್ಟೆಡ್ ನ್ಯಾವಿಗೇಷನ್

  

  JS ಇಲ್ಲದೆ ಅತ್ಯಂತ ತಂಪಾದ ಅನಿಮೇಷನ್‌ನೊಂದಿಗೆ ಸಮತಲ ಮೆನು!
  http://codepen.io/devilishalchemist/pen/wBGVor

  ರೆಸ್ಪಾನ್ಸಿವ್ ಮೆಗಾ ಮೆನು - ನ್ಯಾವಿಗೇಷನ್

  

  ಸಮತಲ ಪ್ರತಿಕ್ರಿಯಾಶೀಲರಾಗಿರುತ್ತಾರೆ ಮೆನು. ಇದು ಚೆನ್ನಾಗಿ ಕಾಣುತ್ತದೆ, ಆದರೆ ಮೊಬೈಲ್ ಆವೃತ್ತಿಯು ಸ್ವಲ್ಪ ಕುಂಟಾಗಿದೆ. CSS, html ಮತ್ತು js ಅನ್ನು ಬಳಸಲಾಗುತ್ತದೆ.
  http://codepen.io/samiralley/pen/xvFdc

  ಶುದ್ಧ Css3 ಮೆನು

  

  ಮೂಲ ಮೆನು. ಜೆಎಸ್ ಇಲ್ಲದೆ ಸರಳ ಮತ್ತು ಕ್ಲೀನ್ ಕೋಡ್‌ನೊಂದಿಗೆ. "ವಾವ್" ಪರಿಣಾಮಗಳಿಗಾಗಿ ಬಳಸಿ.
  http://codepen.io/Sonick/pen/xJagi

  ಪೂರ್ಣ CSS3 ಡ್ರಾಪ್‌ಡೌನ್ ಮೆನು

  

  ಒಂದು ಗೂಡುಕಟ್ಟುವ ಹಂತದೊಂದಿಗೆ ವರ್ಣರಂಜಿತ ಡ್ರಾಪ್-ಡೌನ್ ಮೆನು. ಫಾಂಟ್-ನಾಡಿದು, html ಮತ್ತು css ನಿಂದ ಐಕಾನ್‌ಗಳನ್ನು ಬಳಸಲಾಗುತ್ತದೆ.
  http://codepen.io/daniesy/pen/pfxFi

  Css3 ಮಾತ್ರ ಡ್ರಾಪ್‌ಡೌನ್ ಮೆನು

  

  ಮೂರು ಹಂತದ ಗೂಡುಕಟ್ಟುವಿಕೆಯೊಂದಿಗೆ ಸಾಕಷ್ಟು ಉತ್ತಮವಾದ ಸಮತಲ ಮೆನು. js ಇಲ್ಲದೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ.
  http://codepen.io/riogrande/pen/ahBrb

  ಡ್ರಾಪ್‌ಡೌನ್ ಮೆನುಗಳು

  

  ಅಂಶಗಳ ನೆಸ್ಟೆಡ್ ಪಟ್ಟಿಯ ಗೋಚರಿಸುವಿಕೆಯ ಮೂಲ ಪರಿಣಾಮವನ್ನು ಹೊಂದಿರುವ ಕನಿಷ್ಠ ಮೆನು. ಈ ಪರಿಹಾರವು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಇಲ್ಲದೆಯೇ ಇದೆ ಎಂದು ನನಗೆ ಖುಷಿಯಾಗಿದೆ.
  http://codepen.io/kkrueger/pen/qfoLa

  ಶುದ್ಧ CSS ಡ್ರಾಪ್‌ಡೌನ್ ಮೆನು

  

  ಪ್ರಾಚೀನ ಆದರೆ ಪರಿಣಾಮಕಾರಿ ಪರಿಹಾರ. ಕೇವಲ css ಮತ್ತು html.
  http://codepen.io/andornagy/pen/xhiJH

  ಪುಲ್ ಮೆನು - ಮೆನು ಇಂಟರ್ಯಾಕ್ಷನ್ ಕಾನ್ಸೆಪ್ಟ್

  

  ಮೊಬೈಲ್ ಫೋನ್‌ಗಾಗಿ ಆಸಕ್ತಿದಾಯಕ ಮೆನು ಪರಿಕಲ್ಪನೆ. ನಾನು ಈ ಹಿಂದೆ ಏನನ್ನೂ ನೋಡಿಲ್ಲ. html, css ಮತ್ತು javascript ಅನ್ನು ಬಳಸುತ್ತದೆ.
  http://codepen.io/fbrz/pen/bNdMwZ

  ಸರಳ ಡ್ರಾಪ್‌ಡೌನ್ ಮೆನು ಮಾಡಿ

  

  ಕ್ಲೀನ್ ಮತ್ತು ಸರಳ ಕೋಡ್, ಯಾವುದೇ js. ಇದು ಖಂಡಿತವಾಗಿಯೂ ie8 ನಲ್ಲಿ ಕೆಲಸ ಮಾಡುತ್ತದೆ.
  http://codepen.io/nyekrip/pen/pJoYgb

  ಶುದ್ಧ CSS ಡ್ರಾಪ್‌ಡೌನ್

  

  ಪರಿಹಾರವು ಕೆಟ್ಟದ್ದಲ್ಲ, ಆದರೆ ಇದು ಹಲವಾರು ವರ್ಗಗಳನ್ನು ಬಳಸುತ್ತದೆ. ಯಾವುದೇ js ಇಲ್ಲ ಎಂದು ನನಗೆ ಖುಷಿಯಾಗಿದೆ.
  http://codepen.io/jonathlee/pen/mJMzgR

  ಕೆಳಗೆ ಬೀಳುವ ಪರಿವಿಡಿ

  

  ಕನಿಷ್ಠ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕೋಡ್‌ನೊಂದಿಗೆ ಉತ್ತಮವಾದ ಲಂಬ ಮೆನು. JQuery ಬಳಸಲಾಗುವುದಿಲ್ಲ!
  http://codepen.io/MeredithU/pen/GAinq

  CSS 3 ಡ್ರಾಪ್‌ಡೌನ್ ಮೆನು

  

  ಹೆಚ್ಚುವರಿ ಶೀರ್ಷಿಕೆಗಳೊಂದಿಗೆ ಸಮತಲ ಮೆನು ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್ ಅನ್ನು ಉತ್ತಮವಾಗಿ ಅಲಂಕರಿಸಬಹುದು. ಕೋಡ್ ಸರಳ ಮತ್ತು ಸ್ಪಷ್ಟವಾಗಿದೆ. ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸಲಾಗುವುದಿಲ್ಲ.
  http://codepen.io/ibeeback/pen/qdEZjR

  

  ಬಹಳಷ್ಟು ಕೋಡ್ (html, css ಮತ್ತು js) ಜೊತೆಗೆ ಸುಂದರವಾದ ಪರಿಹಾರ. 3 ಉಪಮೆನು ಸ್ವರೂಪಗಳನ್ನು ರಚಿಸಲಾಗಿದೆ. ಆನ್‌ಲೈನ್ ಸ್ಟೋರ್‌ಗಳಿಗೆ ಪರಿಹಾರವು ಸೂಕ್ತವಾಗಿರುತ್ತದೆ.
  http://codepen.io/martinridgway/pen/KVdKQJ

  CSS3 ಮೆನು ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳು (ವಿಶೇಷ ಪರಿಹಾರ)!

  

  ಹದಿಮೂರು (13) ಅನಿಮೇಷನ್ ಆಯ್ಕೆಗಳೊಂದಿಗೆ ಗಾಢವಾದ ಸಮತಲ ಮೆನು! ಅದನ್ನು ಓದಲು ನಾನು ಖಂಡಿತವಾಗಿಯೂ ನಿಮಗೆ ಸಲಹೆ ನೀಡುತ್ತೇನೆ, ಇದು ದೈನಂದಿನ ಜೀವನದಲ್ಲಿ ಉಪಯುಕ್ತವಾಗಿರುತ್ತದೆ.
  http://codepen.io/cmcg/pen/ofFiz

  ಪಿ.ಎಸ್.
  ನೀವು 23 ಪರಿಹಾರಗಳ ಸಂಗ್ರಹವನ್ನು ಇಷ್ಟಪಟ್ಟಿದ್ದೀರಿ ಎಂದು ನಾನು ಭಾವಿಸುತ್ತೇನೆ. ನೀವು ಅವುಗಳನ್ನು ಓದುವುದನ್ನು ಮುಂದುವರಿಸಲು ಬಯಸಿದರೆ, ಕೆಳಗಿನ ಸಮೀಕ್ಷೆಯನ್ನು ತೆಗೆದುಕೊಳ್ಳಿ.
  ನಿಮ್ಮ ಕೆಲಸವನ್ನು ಎಲ್ಲರೂ ಆನಂದಿಸಿ.

  ಹಲೋ ಸ್ನೇಹಿತರು, ಸಹೋದ್ಯೋಗಿಗಳು! ಹೇಗಿದ್ದೀಯಾ? ಪ್ರತಿಯೊಬ್ಬರೂ ಉತ್ತಮವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತಿದ್ದಾರೆಂದು ನಾನು ಭಾವಿಸುತ್ತೇನೆ :) ಇಂದು ನಾವು ನಮ್ಮ ಲ್ಯಾಂಡಿಂಗ್ ಪುಟಕ್ಕಾಗಿ ಸರಳ ಹೊಂದಾಣಿಕೆಯ ಮೆನುವನ್ನು ಮಾಡುತ್ತೇವೆ. ಜನರು ಇದರ ಬಗ್ಗೆ ಹೆಚ್ಚು ಹೆಚ್ಚು ಕೇಳುತ್ತಿದ್ದಾರೆ, ಮತ್ತು ನಾನು ಅಂತಹ ಪ್ರಶ್ನೆಗಳನ್ನು ಬರೆಯುತ್ತೇನೆ ಮತ್ತು ನನ್ನ ಬಿಡುವಿನ ವೇಳೆಯಲ್ಲಿ ಈ ವಿಷಯಗಳ ಕುರಿತು ಲೇಖನಗಳನ್ನು ಬರೆಯಲು ಪ್ರಯತ್ನಿಸುತ್ತೇನೆ.

  ಈ ರೀತಿಯಾಗಿ ನನಗೆ ಹೊಸ ಆಲೋಚನೆಗಳನ್ನು ನೀಡಿದ್ದಕ್ಕಾಗಿ ಮತ್ತು ಬ್ಲಾಗ್ ಅನ್ನು ಅಭಿವೃದ್ಧಿಪಡಿಸಲು ಸಹಾಯ ಮಾಡಿದ್ದಕ್ಕಾಗಿ ಧನ್ಯವಾದಗಳು. ಅಂದಹಾಗೆ, ಮುಂದಿನ ಲೇಖನವನ್ನು ನೀವು ಯಾವ ವಿಷಯವನ್ನು ಓದಲು ಬಯಸುತ್ತೀರಿ? ದಯವಿಟ್ಟು ಕಾಮೆಂಟ್‌ಗಳಲ್ಲಿ ಬರೆಯಿರಿ, ಇದು ನನಗೆ ಬಹಳ ಮುಖ್ಯವಾಗಿದೆ. ಈಗ, ಪ್ರಾರಂಭಿಸೋಣ ...

  ವೆಬ್‌ಸೈಟ್‌ಗಾಗಿ ಸ್ಪಂದಿಸುವ ಮೆನುವನ್ನು ಹೇಗೆ ಮಾಡುವುದು

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

  ಮೂಲಭೂತವಾಗಿ ಇದು html + css ಆಗಿರುತ್ತದೆ, ಆದರೆ ಕ್ಲಿಕ್ ಅನ್ನು ಪ್ರಕ್ರಿಯೆಗೊಳಿಸಲು ನಿಮಗೆ ಚಿಕ್ಕದಾದ ಸ್ಕ್ರಿಪ್ಟ್ ಅಗತ್ಯವಿರುತ್ತದೆ. ಆದ್ದರಿಂದ…

  ರೆಸ್ಪಾನ್ಸಿವ್ ಸಮತಲ ಮೆನು

  html ನೊಂದಿಗೆ ಪ್ರಾರಂಭಿಸೋಣ. ಮೊದಲಿಗೆ, jquery ಲೈಬ್ರರಿಯನ್ನು ಸೇರಿಸೋಣ. ನೀವು ಬಹುಶಃ ಇದನ್ನು ಬಹಳ ಸಮಯದಿಂದ ಬಳಸುತ್ತಿರುವಿರಿ, ಆದ್ದರಿಂದ ನೀವು ಅದನ್ನು ಎರಡನೇ ಬಾರಿಗೆ ಸಂಪರ್ಕಿಸುವುದಿಲ್ಲ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ:

  ಈಗ ಗುರುತುಗಳು. ನಿಯಮಿತ ಕ್ರಮವಿಲ್ಲದ ಪಟ್ಟಿ, ಮತ್ತು ಮೆನು ಐಕಾನ್ ಹೊಂದಿರುವ ಸಣ್ಣ ಡಿವಿ. ಇದು ಕಡಿಮೆ ರೆಸಲ್ಯೂಶನ್‌ಗಳಲ್ಲಿ ಮಾತ್ರ ಗೋಚರಿಸುತ್ತದೆ.

  

• ಡೌನ್‌ಲೋಡ್ ಬೆಲೆ
• ಸಂಪರ್ಕಗಳು
• ವಿಮರ್ಶೆಗಳು

ನೀವು ನೋಡುವಂತೆ, ಇದು ಸಂಕೀರ್ಣವಾಗಿಲ್ಲ, ಅಗತ್ಯವಿರುವಂತೆ ನೀವೇ ಅದನ್ನು ಸುಧಾರಿಸಬಹುದು ಎಂದು ನಾನು ಭಾವಿಸುತ್ತೇನೆ.
ಈಗ ನಾವು ಶೈಲಿಗಳನ್ನು ಸೇರಿಸೋಣ:

#ಮೆನು (ಹಿನ್ನೆಲೆ: #2ba9c0; ಅಗಲ: 100%; ಪ್ಯಾಡಿಂಗ್: 10px 0; ಪಠ್ಯ-ಹೊಂದಾಣಿಕೆ: ಕೇಂದ್ರ; ) #ಮೆನು ಎ (ಬಣ್ಣ: #fff; ಪಠ್ಯ-ಅಲಂಕಾರ: ಯಾವುದೂ ಇಲ್ಲ; ಪ್ಯಾಡಿಂಗ್: 12px 12px; ) #ಮೆನು ಎ: ಹೋವರ್ (ಅಡಿಗೆ-ಕೆಳಗೆ: 4px ಘನ #fff; ಹಿನ್ನೆಲೆ: #078ecb; ) .itemsMenu li (ಡಿಸ್ಪ್ಲೇ:ಇನ್ಲೈನ್; ಪ್ಯಾಡಿಂಗ್-ರೈಟ್: 35px; ಅಗಲ:100%; ಅಂಚು: 0 ಸ್ವಯಂ; ) .itemsMenu li img( ಲಂಬವಾಗಿ ಜೋಡಿಸು : ಮಧ್ಯಮ; ಅಂಚು-ಬಲ: 10px; .iconMenu (ಬಣ್ಣ: #fff; ಕರ್ಸರ್: ಪಾಯಿಂಟರ್; ಪ್ರದರ್ಶನ: ಯಾವುದೂ ಇಲ್ಲ; ) .ಪ್ರದರ್ಶನಗಳು (ಪ್ರದರ್ಶನ: ನಿರ್ಬಂಧಿಸು a( padding-bottom: 13px; ) #menu a:hover ( border-bottom: none; ) .iconMenu ( display:block; ) .itemsMenu ( display:none; ) .itemsMenu li ( display:block; padding:10px 0 ;))

ಈಗ, ನೀವು ಬ್ರೌಸರ್ ವಿಂಡೋವನ್ನು ಕಡಿಮೆ ಮಾಡಿದಾಗ, ನೀವು ಈ ಕೆಳಗಿನ ಚಿತ್ರವನ್ನು ನೋಡುತ್ತೀರಿ:

ಪ್ರತಿ ಸಾಲನ್ನು ವಿವರಿಸಲು ನಾನು ನಿಜವಾಗಿಯೂ ಇಷ್ಟಪಡುವುದಿಲ್ಲ, ಏಕೆಂದರೆ ಬ್ಲಾಗ್ ವಿನ್ಯಾಸದ ಬಗ್ಗೆ ಅಲ್ಲ. ನಾನು ವಿವರಿಸಲು ಪ್ರಯತ್ನಿಸೋಣ.

ಮೊದಲಿಗೆ, ನಾವು ಡಿಸ್‌ಪ್ಲೇ:ಇನ್‌ಲೈನ್ ಪ್ರಾಪರ್ಟಿಯನ್ನು ಲಿ ಅಂಶಗಳಿಗೆ ಹೊಂದಿಸಿ ಅವುಗಳನ್ನು ಪರಸ್ಪರ ಪಕ್ಕದಲ್ಲಿ ಅಡ್ಡಲಾಗಿ ಕಾಣುವಂತೆ ಮಾಡುತ್ತೇವೆ. ನಾನು ಫ್ಲೋಟ್:ಲೆಫ್ಟ್ ಅನ್ನು ಬಳಸಬಹುದಿತ್ತು, ಆದರೆ ನಾನು ಇದನ್ನು ಈ ರೀತಿ ಮಾಡಲು ನಿರ್ಧರಿಸಿದೆ. ಮತ್ತು ಪ್ರದರ್ಶನದೊಂದಿಗೆ ಮೆನು ಐಕಾನ್ ಅನ್ನು ಮರೆಮಾಡಿ: ಯಾವುದೂ ಆಸ್ತಿ ಇಲ್ಲ. ಪರದೆಯ ರೆಸಲ್ಯೂಶನ್ 600 ಪಿಕ್ಸೆಲ್‌ಗಳಿಗಿಂತ ಕಡಿಮೆ ಇದ್ದಾಗ, ಲಿ ಅಂಶಗಳಿಂದ ಇನ್‌ಲೈನ್ ಅನ್ನು ತೆಗೆದುಹಾಕಿ, ಅವುಗಳನ್ನು ಮರೆಮಾಡಿ ಮತ್ತು ಐಕಾನ್ ಅನ್ನು ತೋರಿಸಿ. ಸಂಕ್ಷಿಪ್ತವಾಗಿ - ಹೌದು.

ಈಗ ನಮಗೆ ಸರಳ ಸ್ಕ್ರಿಪ್ಟ್ ಅಗತ್ಯವಿದೆ ಅದು ಮೆನು ಐಕಾನ್ ಮೇಲೆ ಕ್ಲಿಕ್ ಅನ್ನು ಪ್ರಕ್ರಿಯೆಗೊಳಿಸುತ್ತದೆ ಮತ್ತು ಅದರ ಅಂಶಗಳನ್ನು ತೋರಿಸುತ್ತದೆ:

$(function() ( $(".iconMenu").click(function() ( if($(".itemsMenu").is(":visible")) ( $(".itemsMenu").removeClass(" ಶೋಐಟಮ್ಸ್"); ) ಬೇರೆ ($(".ಐಟಂಮೆನು").addClass("showitems"); ) ));));

ಹೀಗೆ. ನಾನು ಅದನ್ನು ಪ್ರತ್ಯೇಕ ಫೈಲ್‌ನಲ್ಲಿ ಇರಿಸಿದೆ ಮತ್ತು ಮುಚ್ಚುವ ದೇಹದ ಟ್ಯಾಗ್‌ಗೆ ಮೊದಲು ಸೇರಿಸಿದೆ.



ಅಷ್ಟೇ. ಈ ರೀತಿಯಾಗಿ ನೀವು ನಿಮ್ಮ ಲ್ಯಾಂಡಿಂಗ್ ಪುಟಕ್ಕಾಗಿ ಸರಳ ಹೊಂದಾಣಿಕೆಯ ಮೆನುವನ್ನು ತ್ವರಿತವಾಗಿ ರಚಿಸಬಹುದು.

ಸಹಜವಾಗಿ, ಅನಾನುಕೂಲತೆಗಳಿವೆ. ಇಂಡೆಂಟ್‌ಗಳನ್ನು ಪಿಕ್ಸೆಲ್‌ಗಳಲ್ಲಿ ನಿರ್ದಿಷ್ಟಪಡಿಸಲಾಗಿದೆ, ಆದರೆ ನೀವು ಎಲ್ಲಾ ದೂರಗಳನ್ನು ಶೇಕಡಾವಾರು ಪ್ರಮಾಣದಲ್ಲಿ ಹೊಂದಿಸಬಹುದು. ಇದು ಕೇವಲ ಅಗತ್ಯವಿರಲಿಲ್ಲ. ಇದು ಪೂರ್ಣ ಪ್ರಮಾಣದ ಸೈಟ್ ಆಗಿದ್ದರೆ, ನಾನು svg ಅಥವಾ ಫಾಂಟ್ ಐಕಾನ್‌ಗಳನ್ನು ಬಳಸುತ್ತೇನೆ, png ಅಲ್ಲ, ಮತ್ತು ನಾನು ಇಂಡೆಂಟ್‌ಗಳನ್ನು ಶೇಕಡಾವಾರು ಎಂದು ಮರು ಲೆಕ್ಕಾಚಾರ ಮಾಡುತ್ತೇನೆ. ಮತ್ತು ಆದ್ದರಿಂದ, ಇದು ಸ್ವಲ್ಪ ಪೂರ್ವಸಿದ್ಧತೆಯಿಲ್ಲ :) ಎಲ್ಲವೂ ಸ್ಪಷ್ಟವಾಗಿದೆ ಎಂದು ನಾನು ಭಾವಿಸುತ್ತೇನೆ? ವಿದಾಯ.

ನಾವು ಸ್ಪಂದಿಸುವ ವಿನ್ಯಾಸದೊಂದಿಗೆ ಕೆಲಸ ಮಾಡಲು ಪ್ರಾರಂಭಿಸಿದಾಗ, ಕಡಿಮೆ ರೆಸಲ್ಯೂಶನ್ ಪರದೆಗಳಿಗಾಗಿ ನಮ್ಮ ನ್ಯಾವಿಗೇಷನ್ ಮೆನುವನ್ನು ಬದಲಾಯಿಸುವುದನ್ನು ಹೇಗೆ ಉತ್ತಮವಾಗಿ ನಿರ್ವಹಿಸುವುದು ಎಂಬುದರ ಕುರಿತು ನಾವು ವಿಭಿನ್ನ ತಂತ್ರಗಳನ್ನು ನೋಡುತ್ತೇವೆ. ಸಾಧ್ಯತೆಗಳು ಅಂತ್ಯವಿಲ್ಲದಂತೆ ತೋರುತ್ತದೆ. ಆದ್ದರಿಂದ, ಅವುಗಳ ಅನುಕೂಲಗಳು ಮತ್ತು ಅನಾನುಕೂಲಗಳೊಂದಿಗೆ ನಾಲ್ಕು ಮುಖ್ಯ ವಿಧಾನಗಳನ್ನು ನಾನು ನಿಮಗೆ ತೋರಿಸುತ್ತೇನೆ. ಅವುಗಳಲ್ಲಿ ಮೂರು ಕೇವಲ CSS ಮತ್ತು ಒಂದು ಸಣ್ಣ ಪ್ರಮಾಣದ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸಿ ತಯಾರಿಸಲಾಗುತ್ತದೆ.

ಪರಿಚಯ ಈ ಲೇಖನದಲ್ಲಿ ಪ್ರಸ್ತುತಪಡಿಸಲಾದ ಕೋಡ್‌ನಲ್ಲಿ, ಸ್ಟೈಲ್ ಕೋಡ್ ಅನ್ನು ಸುಲಭವಾಗಿ ಓದಲು ಮತ್ತು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ನಾನು ಬ್ರೌಸರ್ ಪೂರ್ವಪ್ರತ್ಯಯಗಳನ್ನು ಬಳಸುವುದಿಲ್ಲ. ಹೆಚ್ಚು ಸಂಕೀರ್ಣ ಉದಾಹರಣೆಗಳು SCSS ಅನ್ನು ಬಳಸುತ್ತವೆ. ಪ್ರತಿಯೊಂದು ಉದಾಹರಣೆಗಳನ್ನು ಕೋಡ್‌ಪೆನ್‌ನಲ್ಲಿ ಹೋಸ್ಟ್ ಮಾಡಲಾಗಿದೆ, ಅಲ್ಲಿ ನೀವು ಕಂಪೈಲ್ ಮಾಡಿದ CSS ಅನ್ನು ನೋಡಬಹುದು.

ಈ ಲೇಖನದಲ್ಲಿನ ಎಲ್ಲಾ ವಿಧಾನಗಳು ಸರಳ HTML ಕೋಡ್ ಅನ್ನು ಬಳಸುತ್ತವೆ, ಅದನ್ನು ನಾನು "ಮೂಲ ಮೆನು" ಎಂದು ಕರೆಯುತ್ತೇನೆ. ನಿರ್ದಿಷ್ಟ ಪ್ರಕಾರವನ್ನು ಸೂಚಿಸಲು ಪಾತ್ರ ಗುಣಲಕ್ಷಣವನ್ನು ಬಳಸಲಾಗುತ್ತದೆ: ಸಮತಲ ಮೆನು (ಪೂರ್ಣ-ಅಡ್ಡ), ಡ್ರಾಪ್-ಡೌನ್ ಪಟ್ಟಿ (ಆಯ್ಕೆ), ಡ್ರಾಪ್-ಡೌನ್ ಮೆನು (ಕಸ್ಟಮ್-ಡ್ರಾಪ್‌ಡೌನ್) ಮತ್ತು ಕ್ಯಾನ್ವಾಸ್.

• ಸ್ಟ್ರೀಮ್
• ಲ್ಯಾಬ್
• ಯೋಜನೆಗಳು
• ಬಗ್ಗೆ
• ಸಂಪರ್ಕಿಸಿ

ಸ್ಟೈಲಿಂಗ್‌ಗಾಗಿ, ನಾನು ಎಲ್ಲಾ ಆಯ್ಕೆಗಳಿಗೆ ಒಂದೇ ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಯನ್ನು ಬಳಸುತ್ತೇನೆ:

@ಮಾಧ್ಯಮ ಪರದೆ ಮತ್ತು (ಗರಿಷ್ಠ-ಅಗಲ: 44ಎಮ್) ( )

1. ಸಮತಲ ಮೆನು ಇದು ಸರಳವಾದ ವಿಧಾನವಾಗಿದೆ ಏಕೆಂದರೆ ನೀವು ಐಟಂಗಳ ಪಟ್ಟಿಯನ್ನು ಸಂಪೂರ್ಣ ಪುಟದ ಅಗಲವನ್ನು ಮಾತ್ರ ಮಾಡಬೇಕಾಗಿದೆ:
• ಸ್ಟ್ರೀಮ್
• ಲ್ಯಾಬ್
• ಯೋಜನೆಗಳು
• ಬಗ್ಗೆ
• ಸಂಪರ್ಕಿಸಿ

@ಮಾಧ್ಯಮ ಪರದೆ ಮತ್ತು (ಗರಿಷ್ಠ-ಅಗಲ: 44ಎಮ್) (ನಾವ್ (ಉಲ್ > ಲಿ (ಅಗಲ: 100%; ) )





ಅನುಕೂಲಗಳು
• ಯಾವುದೇ JavaScript ಅಗತ್ಯವಿಲ್ಲ
• ಹೆಚ್ಚುವರಿ ಮಾರ್ಕ್ಅಪ್ ಇಲ್ಲ
• ಸರಳ ಶೈಲಿಯ ಕೋಡ್
ನ್ಯೂನತೆಗಳು
• ಹೆಚ್ಚು ಸ್ಕ್ರೀನ್ ಸ್ಪೇಸ್ ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ
ಕೋಡ್‌ಪೆನ್ ವೆಬ್‌ಸೈಟ್‌ನಲ್ಲಿ ಸಮತಲ ಮೆನುವಿನ ಉದಾಹರಣೆಯನ್ನು ಕಾಣಬಹುದು. ಈ ವಿಧಾನವು ಮೂಲ ಮೆನುವನ್ನು ಮರೆಮಾಡುತ್ತದೆ ಮತ್ತು ಬದಲಿಗೆ ಡ್ರಾಪ್‌ಡೌನ್ ಪಟ್ಟಿಯನ್ನು ತೋರಿಸುತ್ತದೆ.

ಈ ಪರಿಣಾಮವನ್ನು ಸಾಧಿಸಲು, ನಾವು ಮೂಲಭೂತ ಮಾರ್ಕ್ಅಪ್ಗೆ ಡ್ರಾಪ್-ಡೌನ್ ಪಟ್ಟಿಯನ್ನು ಸೇರಿಸಬೇಕಾಗಿದೆ. ಇದು ಕೆಲಸ ಮಾಡಲು ನಾವು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕೋಡ್ ಅನ್ನು ಸೇರಿಸಬೇಕು ಅದು ಆನ್‌ಚೇಂಜ್ ಈವೆಂಟ್ ಸಂಭವಿಸಿದಾಗ window.location .href ನ ಮೌಲ್ಯವನ್ನು ಬದಲಾಯಿಸುತ್ತದೆ
ಸಂಪರ್ಕದ ಕುರಿತು ಸ್ಟ್ರೀಮ್ ಲ್ಯಾಬ್ ಯೋಜನೆಗಳು
ದೊಡ್ಡ ಪರದೆಯ ಮೇಲೆ ಪಟ್ಟಿಯನ್ನು ಮರೆಮಾಡುವುದು:
nav (> ಆಯ್ಕೆಮಾಡಿ (ಪ್ರದರ್ಶನ: ಯಾವುದೂ ಇಲ್ಲ;) )
ಸಣ್ಣ ಪರದೆಗಳಲ್ಲಿ, ನಾವು ಮುಖ್ಯ ಮೆನುವನ್ನು ಮರೆಮಾಡುತ್ತೇವೆ ಮತ್ತು ಡ್ರಾಪ್-ಡೌನ್ ಪಟ್ಟಿಯನ್ನು ತೋರಿಸುತ್ತೇವೆ. ಇದು ಮೆನು ಎಂದು ಬಳಕೆದಾರರಿಗೆ ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಸಹಾಯ ಮಾಡಲು - ನಾವು "ಮೆನು" ಪಠ್ಯದೊಂದಿಗೆ ಹುಸಿ-ಎಲಿಮೆಂಟ್ ಅನ್ನು ಸೇರಿಸುತ್ತೇವೆ
@ಮಾಧ್ಯಮ ಪರದೆ ಮತ್ತು (ಗರಿಷ್ಠ-ಅಗಲ: 44em) ( nav (ಉಲ್ (ಪ್ರದರ್ಶನ: ಯಾವುದೂ ಇಲ್ಲ; ) ಆಯ್ಕೆಮಾಡಿ (ಪ್ರದರ್ಶನ: ಬ್ಲಾಕ್; ಅಗಲ: 100%; ) &: ನಂತರ (ಸ್ಥಾನ: ಸಂಪೂರ್ಣ; ವಿಷಯ: "ಮೆನು"; ಬಲ: 0 ಕೆಳಗೆ: -1em;
ಹೆಚ್ಚುವರಿ ವಿನ್ಯಾಸದೊಂದಿಗೆ, ಕಡಿಮೆ ರೆಸಲ್ಯೂಶನ್ ಹೊಂದಿರುವ ಪರದೆಯ ಮೇಲೆ ಇದು ಹೇಗೆ ಕಾಣುತ್ತದೆ:



ಅನುಕೂಲಗಳು
• ಹೆಚ್ಚು ಜಾಗವನ್ನು ತೆಗೆದುಕೊಳ್ಳುವುದಿಲ್ಲ
• "ಸ್ಥಳೀಯ" ನಿಯಂತ್ರಣಗಳನ್ನು ಬಳಸುತ್ತದೆ
ನ್ಯೂನತೆಗಳು
• ಕೆಲಸ ಮಾಡಲು JavaScript ಅಗತ್ಯವಿದೆ
• ನಕಲಿ ವಿಷಯ ಸಂಭವಿಸುತ್ತದೆ
• ಡ್ರಾಪ್‌ಡೌನ್ ಪಟ್ಟಿಯು ಎಲ್ಲಾ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಶೈಲಿಯಲ್ಲಿ ವಿಫಲವಾಗಿದೆ
ಈ ಮೆನುವಿನ ಉದಾಹರಣೆ .3. ಕಸ್ಟಮ್ ಡ್ರಾಪ್‌ಡೌನ್ ಮೆನು ಈ ವಿಧಾನವು ಬೇಸ್ ಮೆನುವನ್ನು ಸಣ್ಣ ಪರದೆಗಳಲ್ಲಿ ಮರೆಮಾಡುತ್ತದೆ ಮತ್ತು ಬದಲಿಗೆ ಇನ್‌ಪುಟ್ ಮತ್ತು ಲೇಬಲ್ ಅನ್ನು ತೋರಿಸುತ್ತದೆ (ಚೆಕ್‌ಬಾಕ್ಸ್ ಹ್ಯಾಕ್ ಬಳಸಿ). ಬಳಕೆದಾರರು ಲೇಬಲ್ ಮೇಲೆ ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ, ಬೇಸ್ ಮೆನುವನ್ನು ಅದರ ಕೆಳಗೆ ತೋರಿಸಲಾಗುತ್ತದೆ.
ಚೆಕ್‌ಬಾಕ್ಸ್ ಹ್ಯಾಕ್ ಬಳಸುವಲ್ಲಿನ ತೊಂದರೆಗಳು ಈ ಪರಿಹಾರದ ಎರಡು ಮುಖ್ಯ ಸಮಸ್ಯೆಗಳೆಂದರೆ:
• ಇದು Safari ನ ಮೊಬೈಲ್ ಆವೃತ್ತಿಗಳಲ್ಲಿ ಕಾರ್ಯನಿರ್ವಹಿಸುವುದಿಲ್ಲ (iOS< 6.0) . Невозможно кликнуть на label в браузере под iOS < 6.0, чтобы сработал input из-за бага. Решается добавлением пустого события onclick на label
• 4.1.2 ಕ್ಕಿಂತ ಕಡಿಮೆ ಅಥವಾ ಸಮನಾದ Android OS ಆವೃತ್ತಿಯ ಮುಖ್ಯ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಇದು ಕಾರ್ಯನಿರ್ವಹಿಸುವುದಿಲ್ಲ. ಬಹಳ ಹಿಂದೆಯೇ, ವೆಬ್‌ಕಿಟ್ ಎಂಜಿನ್‌ನಲ್ಲಿ ದೋಷವಿತ್ತು ಅದು ಸೆಲೆಕ್ಟರ್‌ಗಳು + ಮತ್ತು ~ ಸಂಯೋಜನೆಯೊಂದಿಗೆ ಹುಸಿ-ವರ್ಗಗಳ ಬಳಕೆಯನ್ನು ಅನುಮತಿಸಲಿಲ್ಲ

H1 ~ p (ಬಣ್ಣ: ಕಪ್ಪು; ) h1: ಹೂವರ್ ~ p (ಬಣ್ಣ: ಕೆಂಪು; )
ಚೆಕ್‌ಬಾಕ್ಸ್ ಹ್ಯಾಕ್ ~ ಸೆಲೆಕ್ಟರ್‌ನೊಂದಿಗೆ : ಪರಿಶೀಲಿಸಿದ ಹುಸಿ-ವರ್ಗವನ್ನು ಬಳಸಿದ್ದರಿಂದ ಇದು ಯಾವುದೇ ಪರಿಣಾಮವನ್ನು ಬೀರಲಿಲ್ಲ. ಮತ್ತು WebKit 535.1 (Chrome 13) ಮತ್ತು WebKit 534.30 ನಲ್ಲಿ ದೋಷವನ್ನು ಸರಿಪಡಿಸುವವರೆಗೆ, Android 4.1.2 ಗಾಗಿ ಪ್ರಸ್ತುತ, Android OS ನೊಂದಿಗೆ ಯಾವುದೇ ಸಾಧನದಲ್ಲಿ ಹ್ಯಾಕ್ ಕೆಲಸ ಮಾಡಲಿಲ್ಲ.

4. ಕ್ಯಾನ್ವಾಸ್ ಈ ವಿಧಾನದಲ್ಲಿ, ಸಣ್ಣ ಪರದೆಗಳಲ್ಲಿ, ಮೂಲ ಮೆನುವನ್ನು ಮರೆಮಾಡಲಾಗಿದೆ ಮತ್ತು ಇನ್‌ಪುಟ್ ಮತ್ತು ಲೇಬಲ್ ಅನ್ನು ಆಯ್ಕೆ 3 ರಲ್ಲಿ ತೋರಿಸಲಾಗುತ್ತದೆ. ಬಳಕೆದಾರರು ಲೇಬಲ್ ಮೇಲೆ ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ, ಮೂಲ ಮೆನು ಎಡಕ್ಕೆ ತೇಲುತ್ತದೆ ಮತ್ತು ವಿಷಯವು ಬಲಕ್ಕೆ ಚಲಿಸುತ್ತದೆ . ಪರದೆಯನ್ನು 80% ಮೆನು ಮತ್ತು 20% ವಿಷಯವಾಗಿ ವಿಭಜಿಸಲಾಗಿದೆ (ಸಿಎಸ್ಎಸ್ನಲ್ಲಿ ಬಳಸುವ ರೆಸಲ್ಯೂಶನ್ ಮತ್ತು ಘಟಕಗಳನ್ನು ಅವಲಂಬಿಸಿ)


ದೊಡ್ಡ ಪರದೆಯ ಮೇಲೆ ನಾವು ಲೇಬಲ್ ಅನ್ನು ಮರೆಮಾಡುತ್ತೇವೆ.
ಲೇಬಲ್ (ಸ್ಥಾನ: ಸಂಪೂರ್ಣ; ಎಡ: 0; ಪ್ರದರ್ಶನ: ಯಾವುದೂ ಇಲ್ಲ; )
ಸಣ್ಣ ಪರದೆಗಳಲ್ಲಿ ನಾವು ವಿಂಡೋ ವಿಷಯದ ಹೊರಗೆ ಮೆನುವನ್ನು ಇರಿಸುತ್ತೇವೆ ಮತ್ತು ಲೇಬಲ್ ಮತ್ತು ಇನ್ಪುಟ್ ಅನ್ನು ತೋರಿಸುತ್ತೇವೆ. ಮೆನುವನ್ನು ಮರೆಮಾಡಲು ನಾವು ಅದರ ಅಗಲ ಮತ್ತು ಋಣಾತ್ಮಕ ಸ್ಥಾನ ಮೌಲ್ಯವನ್ನು ಹೊಂದಿಸುತ್ತೇವೆ. ಈ ಮೆನುವನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಬಳಕೆದಾರರಿಗೆ ಸಹಾಯ ಮಾಡಲು, ನಾವು ಲೇಬಲ್‌ನಲ್ಲಿ "≡" ಪಠ್ಯದೊಂದಿಗೆ ಹುಸಿ-ಅಂಶವನ್ನು ಸೇರಿಸುತ್ತೇವೆ (ಹುಸಿ-ಎಲಿಮೆಂಟ್‌ನ ವಿಷಯವಾಗಿ ಬಳಸಲು "\2261" ಕೋಡ್‌ನಂತೆ).

@ಮಾಧ್ಯಮ ಪರದೆ ಮತ್ತು (ಗರಿಷ್ಠ-ಅಗಲ: 44em) ($menu_width: 20em; ದೇಹ (ಓವರ್‌ಫ್ಲೋ-x: ಮರೆಮಾಡಲಾಗಿದೆ; ) nav (ಸ್ಥಾನ: ಸಂಪೂರ್ಣ; ಎಡ: -$menu_width; ಅಗಲ: $menu_width; ul > li (ಅಗಲ: 100 %; menu_width + .5em; ಅಂಚು-ಬಲ: -($menu_width + .5em) )

ಹೆಚ್ಚುವರಿ ವಿನ್ಯಾಸದೊಂದಿಗೆ, ಕಡಿಮೆ ರೆಸಲ್ಯೂಶನ್ ಹೊಂದಿರುವ ಪರದೆಯ ಮೇಲೆ ಇದು ಹೇಗೆ ಕಾಣುತ್ತದೆ:





ಅನುಕೂಲ ಹಾಗೂ ಅನಾನುಕೂಲಗಳು
• ನಾನ್-ಸೆಮ್ಯಾಂಟಿಕ್ ಕೋಡ್ (ಇನ್‌ಪುಟ್/ಲೇಬಲ್)
• ಹೆಚ್ಚುವರಿ HTML ಅಗತ್ಯವಿದೆ
• ದೇಹದ ಅಂಶದ ಸಂಪೂರ್ಣ ಸ್ಥಾನವು ಸ್ಥಿರ ಸ್ಥಾನದ ಭಾವನೆಯನ್ನು ನೀಡುತ್ತದೆ
ಇದು IE ಅಡಿಯಲ್ಲಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆಯೇ? ಬಳಸಿದ ಎಲ್ಲಾ ತಂತ್ರಗಳು ಒಂದು ಗುರಿಯನ್ನು ಹೊಂದಿವೆ: ಆಧುನಿಕ ಬ್ರೌಸರ್‌ಗಳಿಗಾಗಿ ಪ್ರತಿಕ್ರಿಯಾಶೀಲರಾಗಿರುತ್ತಾರೆ ಮೆನುವನ್ನು ರಚಿಸಲು! ಮತ್ತು ಇದು ಏಕೆಂದರೆ ಯಾವುದೇ ಮೊಬೈಲ್ ಸಾಧನಗಳಲ್ಲಿ ಯಾವುದೇ IE8 ಅಥವಾ ಕಡಿಮೆ ಇಲ್ಲ ಮತ್ತು ಆದ್ದರಿಂದ ನಾವು ಈ ಸಮಸ್ಯೆಯ ಬಗ್ಗೆ ಚಿಂತಿಸಬೇಕಾಗಿಲ್ಲ.