Jquery ਤੇ ਇਕ ਐਕਸਟੈਨਸ਼ਨ ਦੇ ਰੂਪ ਵਿਚ ਇਕ ਸਾਈਟ ਲਈ ਵਰਟੀਕਲ ਮੀਨੂ

ਇਹ ਮੇਨੂ ਸਾਈਟ ਦਾ ਅਟੁੱਟ ਹਿੱਸਾ ਮੰਨਿਆ ਜਾਂਦਾ ਹੈ. ਇੰਟਰਨੈਟ ਸਰੋਤ ਦੇ ਦਿਲਚਸਪ ਨੇਵੀਗੇਸ਼ਨ ਮਹਿਮਾਨਾਂ ਨੂੰ ਦਿਲਚਸਪੀ ਦੇਣ ਦੇ ਯੋਗ ਹੈ ਇਸਦੇ ਇਲਾਵਾ, ਕਿਸੇ ਵੀ ਮੀਨੂ ਦੀ ਇੱਕ ਮਹੱਤਵਪੂਰਣ ਜਾਇਦਾਦ ਇਸ ਦੀ ਕਾਬੂ ਹੈ ਇੱਕ ਸਧਾਰਨ ਵਰਟੀਕਲ ਮੇਨੂ ਨੂੰ ਅਸਾਨੀ ਨਾਲ HTML ਅਤੇ CSS ਦੇ ਰਾਹੀਂ ਬਣਾਇਆ ਗਿਆ ਹੈ. ਪਰ ਅਸੀਂ ਅੱਗੇ ਜਾਵਾਂਗੇ: jQuery ਨਾਲ ਇਕ ਐਕਸਟੈਨਸ਼ਨ ਮੀਨੂ ਬਣਾਉਣਾ ਸਿੱਖੋ.

ਇੱਕ ਮੇਨੂ ਬਣਾਓ- "ਏਆਰਸੀਅਨ"

ਇਕ ਐਵਾਰਡਿਅਨ ਦੇ ਰੂਪ ਵਿਚ ਇਕ ਲੰਬਿਤ ਮੇਨੂ ਕੀ ਹੈ? ਇਹ ਇੱਕ ਅਜਿਹੀ ਡਰਾੱਪ-ਡਾਊਨ ਸੂਚੀ ਹੈ ਜੋ ਸੁਨਿਸ਼ਚਿਤ ਨੈਵੀਗੇਸ਼ਨ ਬਣਾਉਂਦੀ ਹੈ ਅਤੇ ਸਾਈਟ ਨੂੰ ਇੱਕ ਅਜੀਬ ਦਿੱਖ ਦਿੰਦੀ ਹੈ. ਇਸ ਫਾਰਮ ਵਿੱਚ ਚਲਾਇਆ ਗਿਆ ਮੀਨੂੰ, ਤੁਹਾਨੂੰ ਕਈ ਉਪ-ਆਈਟਮਾਂ ਨੂੰ ਸ਼ਾਮਲ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ ਉਹਨਾਂ ਤੱਕ ਪਹੁੰਚ ਉਦੋਂ ਆਉਂਦੀ ਹੈ ਜਦੋਂ ਤੁਸੀਂ ਲੋੜੀਦੀ ਆਈਟਮ ਤੇ ਕਲਿਕ ਕਰਦੇ ਹੋ ਕੋਈ ਜਣਾ ਇਹ ਕਹੇਗਾ ਕਿ ਤੁਸੀਂ jQuery ਦੀ ਵਰਤੋਂ ਕੀਤੇ ਬਿਨਾਂ ਇਸ ਸ਼ੈਲੀ ਵਿਚ ਸਧਾਰਨ ਮੇਨੂ ਬਣਾ ਸਕਦੇ ਹੋ. ਹਾਂ, ਇਹ ਹੈ. ਪਰ ਅਜਿਹੀਆਂ ਚੀਜ਼ਾਂ ਗੋਲੀਆਂ ਜਾਂ ਸਮਾਰਟਫੋਨ ਦੇ ਮਾਲਕਾਂ ਲਈ ਬਹੁਤ ਸੁਵਿਧਾਜਨਕ ਨਹੀਂ ਹੋਣਗੀਆਂ. ਆਓ ਇੱਕ ਵਰਟੀਕਲ ਮੇਨੇਜ ਬਣਾਈਏ, ਹਰ ਕਿਸੇ ਲਈ ਆਕਰਸ਼ਕ. ਫਿਰ, ਅਜਿਹੇ ਨੇਵੀਗੇਸ਼ਨ ਦੇ ਰੰਗ ਢੰਗ ਬਦਲ ਕੇ, ਕਿਸੇ ਵੀ ਸਾਈਟ ਲਈ ਡਿਜ਼ਾਇਨ ਨੂੰ ਅਨੁਕੂਲਿਤ ਕਰਨਾ ਸੰਭਵ ਹੋਵੇਗਾ.

HTML ਕੋਡ

ਇਸ ਲਈ, ਸਾਡੀ ਲੰਬਕਾਰੀ ਮੇਨੂ ਨੂੰ ਬਣਾਉਣ ਲਈ, ਤੁਹਾਨੂੰ ਪਹਿਲਾਂ ਐਚਐਚਐਲ ਕੋਡ ਟਾਈਪ ਕਰਨ ਦੀ ਜ਼ਰੂਰਤ ਹੈ, ਜਿਸ ਵਿੱਚ ਹੇਠ ਲਿਖੀਆਂ ਲਾਈਨਾਂ ਹੋਣਗੀਆਂ:

ਇਸ ਕੋਡ ਨੂੰ Accord_menu.html ਕਹਿੰਦੇ ਹਨ.

ਜਿਵੇਂ ਕਿ ਤੁਸੀਂ ਵੇਖ ਸਕਦੇ ਹੋ, ਅਸੀਂ ਇੱਕ ਅਣ-ਸੂਚੀਬੱਧ ਸੂਚੀ ਤਿਆਰ ਕੀਤੀ ਹੈ. ਇਸ ਵਿੱਚ 3 ਮੁੱਖ ਨੁਕਤੇ ਹਨ:

- ਫੋਟੋਆਂ;

- ਮੂਵੀਜ਼;

- ਕਿਤਾਬਾਂ.

ਹਰੇਕ ਆਈਟਮ ਵਿੱਚ ਕਈ ਉਪ-ਆਈਟਮਾਂ ਹਨ ਜਿੱਥੇ # ਹੈ, ਤੁਹਾਨੂੰ ਲਿੰਕ ਜੋੜਨੇ ਪੈਣਗੇ ਹੁਣ ਸਟਾਇਲਾਂ ਦਾ ਵਰਣਨ ਕਰਨਾ ਮਹੱਤਵਪੂਰਣ ਹੈ. ਇਹ ਸਭ ਇਸ ਗੱਲ 'ਤੇ ਨਿਰਭਰ ਕਰਦਾ ਹੈ ਕਿ ਤੁਹਾਡਾ ਇੰਟਰਨੈਟ ਸੰਸਾਧਨ ਕਿਹੋ ਜਿਹਾ ਹੈ. ਸਾਈਟ ਲਈ ਲੰਬਕਾਰੀ ਮੀਨੂ ਨੂੰ ਇਸਦੇ ਡਿਜ਼ਾਈਨ ਵਿਚ ਸਾਂਭ ਕੇ ਰੱਖਣਾ ਚਾਹੀਦਾ ਹੈ.

CSS

ਸਟਾਈਲ ਨਾਲ, ਤੁਹਾਨੂੰ ਕੋਈ ਮੁਸ਼ਕਲ ਨਹੀਂ ਹੋਣੀ ਚਾਹੀਦੀ. ਅਸੀਂ ਸਿਰਫ ਨੋਟ ਕਰਦੇ ਹਾਂ ਕਿ ਇਸ ਉਦਾਹਰਨ ਵਿੱਚ ਇੱਕ ਗ੍ਰੈਡੀਏਂਟ ਭਰਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ. CSS ਵੇਖੋ ਕਿਵੇਂ ਹੈ:

CSS ਫਾਈਲ ਰੰਗ, ਆਕਾਰ ਨੂੰ ਨਿਸ਼ਚਿਤ ਕਰਦੀ ਹੈ, ਸੂਚੀ ਆਈਟਮਾਂ ਦੇ ਖੱਬੇ ਪਾਸੇ ਮਾਰਕਰ ਨੂੰ ਹਟਾ ਦਿੱਤਾ ਜਾਂਦਾ ਹੈ ਇਹ ਨਿਰਧਾਰਤ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਕਿ ਤੁਸੀਂ ਇਸ ਉੱਤੇ ਕਿਵੇਂ ਚੱਲਦੇ ਹੋ ਤਾਂ ਹਰੇਕ ਬਿੰਦੂ ਅਤੇ ਉਪ-ਮੇਨ ਵਿਵਹਾਰ ਕਰੇਗਾ. ਉਦਾਹਰਨ ਲਈ:

# E1fee2 ਉਪ - ਬਿੰਦੂਆਂ ਦਾ ਹਲਕਾ-ਹਰਾ ਰੰਗ ਹੈ .

# C4f0f7 ਸਬ-ਪੁਆਇੰਟ ਦਾ ਇੱਕ ਸੂਖਮ ਰੰਗ ਹੈ ਜਦੋਂ ਤੁਸੀਂ ਉਹਨਾਂ ਉੱਤੇ ਹੋਵਰ ਕਰਦੇ ਹੋ

ਡਿਸਪਲੇ ਸੰਪਤੀਆਂ ਨੂੰ ਲੋੜੀਂਦੇ ਉਦਮਾਂ ਅਤੇ ਅਕਾਰ ਨੂੰ ਅਨੁਕੂਲ ਕਰਨ ਲਈ ਰੋਕ ਦਿੱਤਾ ਗਿਆ ਹੈ. ਰੰਗ, ਆਕਾਰ, ਫੌਂਟ ਟਾਈਪ, ਸਥਾਨ - ਇਹ ਸਭ ਵੀ CSS ਫਾਈਲ ਵਿਚ ਵਰਣਨ ਕਰਦਾ ਹੈ. ਇਸਦਾ ਨਾਮ ਦੱਸੋ, ਉਦਾਹਰਣ ਲਈ, accordionmenu_my1.css

ਮੇਨੂ ਸੁਧਾਰਾਂ ਲਈ jQuery ਨੂੰ ਜੋੜਨਾ

ਜਿਵੇਂ ਤੁਹਾਨੂੰ ਯਾਦ ਹੈ, ਸਾਡਾ ਉਦੇਸ਼ ਇੱਕ ਲੰਬਕਾਰੀ ਜੈਕੇਨਿਉ ਮੇਨੂ ਨੂੰ ਬਣਾਉਣਾ ਹੈ. ਜੇ ਤੁਸੀਂ ਇਸ ਤਕਨਾਲੋਜੀ ਲਈ ਨਵੇਂ ਹੋ, ਤਾਂ ਹੌਸਲਾ ਨਾ ਹਾਰੋ. Google ਰਿਪੋਜ਼ਟਰੀ ਦੀ ਵਰਤੋਂ ਕਰੋ ਅਤੇ JQuery ਸਕਰਿਪਟ ਨੂੰ ਕਨੈਕਟ ਕਰੋ. ਇਹ ਮੇਨੂ ਨੂੰ ਵਧੇਰੇ ਆਕਰਸ਼ਕ ਬਣਾ ਦੇਵੇਗਾ JQuery ਇੱਕ ਹਾਈਪਰਟੈਕਸਟ ਮਾਰਕਅੱਪ HTML ਅਤੇ ਜਾਵਾ-ਸਕਰਿਪਟ ਦੇ ਸੰਚਾਰ ਤੇ ਆਧਾਰਿਤ ਇੱਕ JavaScript ਲਾਇਬਰੇਰੀ ਹੈ. JQuery ਤੁਹਾਨੂੰ ਤੱਤਾਂ ਦੀ ਸਮਗਰੀ ਅਤੇ ਗੁਣਾਂ ਨੂੰ ਐਕਸੈਸ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦੀ ਹੈ.

ਇਸ ਲਈ, ਅਸੀਂ HTML-file ਦੇ ਮੁੱਖ ਭਾਗ ਵਿੱਚ ਜ਼ਰੂਰੀ ਸਕਰਿਪਟ ਨੂੰ ਜੋੜਦੇ ਹਾਂ ਅਤੇ 2 ਗੁਣਾਂ ਨੂੰ ਸੰਭਾਲਣ ਲਈ ਨਿਯਮ ਸੈਟ ਕਰਦੇ ਹਾਂ, ਤੱਤ ਦੇ ਜੰਪਾਂ ਨੂੰ ਛੱਡ ਕੇ. ਅਸੀਂ ਉਹ ਕੋਡ ਬਣਾਉਂਦੇ ਹਾਂ ਜੋ ਦੂਜੀ ਟੈਬ ਬੰਦ ਕਰਦਾ ਹੈ ਜਦੋਂ ਤੁਸੀਂ ਇੱਕ ਨੂੰ ਖੋਲ੍ਹਦੇ ਹੋ ਜਿਸ ਨਾਲ ਮਾਉਸ ਕਲਿਕ ਕੀਤਾ ਜਾਂਦਾ ਹੈ. ਇਹ ਕਿਵੇਂ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ:

ਸਾਰੇ ਬਦਲਾਵਾਂ ਨੂੰ ਸੁਰੱਖਿਅਤ ਕਰੋ, ਵੇਖੋ ਕਿ ਕਿਵੇਂ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਮੇਨੂ ਵੇਖਦਾ ਹੈ. ਕੰਮ ਦਾ ਸਮੁੱਚਾ ਨਤੀਜਾ ਇਹ ਹੈ: ਨਤੀਜੇ ਵਜੋਂ, ਸਾਡੇ ਕੋਲ ਇੱਕ ਆਕਰਸ਼ਕ ਮੇਨੂ ਹੋਵੇਗਾ, ਜੋ ਕਿ ਤੁਹਾਡੀਆਂ ਤਰਜੀਹਾਂ ਦੇ ਅਧਾਰ ਤੇ ਹਮੇਸ਼ਾ ਬਦਲਿਆ ਜਾ ਸਕਦਾ ਹੈ. ਅਤੇ ਜੇ ਤੁਸੀਂ ਸੀ ਐੱਸ ਐੱਸ ਦੇ ਖੇਤਰ ਵਿਚ ਨਵੇਂ ਗਿਆਨ ਪ੍ਰਾਪਤ ਕਰ ਰਹੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਆਪਣੇ ਵਿਹਾਰਕ ਹੁਨਰ ਨੂੰ ਸੁਧਾਰਨ ਲਈ, ਸਾਈਟ ਦੇ ਵਿਲੱਖਣ ਤੱਤ ਤਿਆਰ ਕਰੋਗੇ.