ਵਰਟੀਕਲ CSS ਮੇਨੂ: ਇਸ ਨੂੰ ਆਪਣੇ ਆਪ ਨੂੰ ਕਰ

ਕੁਝ webmasters ਵਾਰ ਖਰਚ ਕਰਨ ਦੀ ਸ਼ੁਰੂ ਸਧਾਰਨ ਹੈ, ਜੋ ਕਿ ਤੱਤ ਮੌਜੂਦ ਤੱਕ ਦਾ ਵਿਕਾਸ ਨਾ ਕਰਨਾ ਚਾਹੁੰਦੇ. ਉਹ ਮੰਨਦੇ ਹਨ ਕਿ ਕੁਝ ਅਜਿਹਾ ਲੰਬੇ ਉਥੇ ਕੀਤਾ ਗਿਆ ਹੈ 'ਤੇ ਆਪਣੇ ਟਾਈਮ ਬਰਬਾਦ ਵਿੱਚ ਕੋਈ ਬਿੰਦੂ ਹੈ. ਅਸਲ ਵਿਚ, ਜਿਹੜੇ ਲੋਕ, ਸਿਰਫ ਅਤੇ CSS ਸਿੱਖਣ ਰਹੇ ਹੋ, ਲਈ, ਇਹ ਜ਼ਰੂਰੀ ਆਪਣੇ ਆਪ ਨੂੰ ਆਪਣੇ ਕੰਮ ਦੀ ਇੱਕ ਚੰਗੀ ਸਮਝ ਹੈ ਕਰਨ ਦੀ ਕੁਝ ਦੀ ਇੱਕ ਬਹੁਤ ਸਾਰਾ ਬਣਾਉਣ ਲਈ ਹੁੰਦਾ ਹੈ. ਇਹ ਮੇਨੂ ਲਾਗੂ ਹੁੰਦਾ ਹੈ. ਲੰਬਕਾਰੀ CSS ਮੇਨੂ ਬਣਾਓ. ਇਹ ਸਿਰਫ ਅਤੇ CSS ਦੇ ਆਧਾਰ 'ਤੇ ਕੀਤਾ ਜਾਵੇਗਾ, JavaScript ਅਤੇ ਜੇਕਉਐਰੀ ਦੀ ਵਰਤ ਦੇ ਬਗੈਰ. ਹਰ ਮੇਨੂ ਲਿੰਕ ਹੈ, ਜੋ ਕਿ ਸਾਈਟ ਦੇ ਸਫ਼ੇ ਕਰਨ ਲਈ ਅਗਵਾਈ ਦੀ ਇੱਕ ਸੂਚੀ ਹੈ.

ਬੁਨਿਆਦੀ ਕਦਮ

ਇੱਕ ਸਧਾਰਨ ਬਣਾਉਣ ਲਈ ਲੰਬਕਾਰੀ ਮੇਨੂ CSS, ਤੁਹਾਨੂੰ ਹੇਠ ਕਦਮ ਦੀ ਲੋੜ ਹੈ:

1. ਪਹਿਲੀ, ਲਿੰਕ (ਕੋਡ ਨੂੰ HTML ਵਰਤ ਕੇ), ਜਿਸ ਦੇ ਮੇਨੂ ਹੋ ਜਾਵੇਗਾ ਦੀ ਇੱਕ ਸੂਚੀ ਦਾ ਪਤਾ. ਨੂੰ ਇੱਕ ਨਾਮ ਦਿਓ, ਉਦਾਹਰਨ ਲਈ, ਹੇਠ ਲਿਖੇ ਅਨੁਸਾਰ ਹਨ:

1. ਮੁੱਖ.
2. ਸਾਡਾ ਇਤਿਹਾਸ.
3. ਗਾਈਡ.
4. ਸਰਵਿਸਿਜ਼.
5. ਸੰਪਰਕ.

2. ਫਿਰ ਲਿੰਕ ਢੰਗ ਦੇ ਤੌਰ ਤੇ ਤੁਹਾਨੂੰ CSS ਦੀ ਮਦਦ ਨਾਲ ਚਾਹੁੰਦੇ ਹੋ.

ਸਾਨੂੰ ਲਿਖਣ ਦੀ HTML ਕੋਡ, my_Vmenu.html ਫਾਇਲ ਵਿੱਚ ਰੱਖਣ ਅਤੇ ਇਸ ਨੂੰ ਬਰਾਊਜ਼ਰ ਵਿੱਚ ਦਿਖਾਈ ਦੇਵੇਗਾ ਕਿਸ ਨੂੰ ਵੇਖਣ:

ਇਹ ਸਾਡੀ ਮੇਨੂ ਦੇ ਆਧਾਰ '(ਫਿਰਦੀ) ਹੈ. # 1, # 2, ਆਦਿ ਹਵਾਲਾ ਨਾਲ ਤਬਦੀਲ ਕੀਤਾ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ. ਵੇਖੋ ਇਸ ਨੂੰ ਇੱਕ ਬਰਾਊਜ਼ਰ ਵਿੱਚ ਦਿਸਦਾ ਹੈ. ਤਸਵੀਰ ਤੁਹਾਨੂੰ ਪਸੰਦ ਨਾ ਕਰੇਗਾ. ਹੁਣ ਸਾਨੂੰ, ਸ਼ੈਲੀ ਦੇ ਤੱਤ ਦਾ ਵਰਣਨ ਕਰਨ ਲਈ ਇੱਕ ਪੂਰਾ ਲੰਬਕਾਰੀ CSS ਮੇਨੂ ਬਣਾਉਣ ਲਈ ਸ਼ੁਰੂ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ.

ਵੇਰਵਾ ਸਟਾਈਲ

ਇੱਕ ਫਾਇਲ my_Vmenu.css ਹੈ, ਜੋ ਕਿ ਸਭ ਕੁਝ ਤੁਹਾਡੇ ਸਾਈਟ ਦੇ ਅਜਿਹੇ ਇੱਕ ਮਹੱਤਵਪੂਰਨ ਤੱਤ ਦੀ ਦਿੱਖ ਵਿੱਚ ਸੁਧਾਰ ਕਰਨ ਲਈ ਬਦਲਣਾ ਚਾਹੁੰਦੇ ਹੋ ਬਣਾਓ. ਇੱਥੇ ਕੋਡ ਹੈ, ਜੋ ਕਿ ਦੀ ਪਛਾਣ ਲੰਬਕਾਰੀ CSS ਮੇਨੂ ਨੂੰ ਪੁਨਰ ਹੈ. ਇਹ ਅਤੇ ਨਵ ਫਾਇਲ ਲਿਖਣ, ਅਤੇ ਫਿਰ ਸਾਨੂੰ ਇੱਕ ਦੇ ਨੇੜੇ ਮੁੱਖ ਲਾਈਨ ਹੈ, ਜੋ ਕਿ ਦਿੱਤੇ ਗਏ ਹਨ ਦੇ ਅਰਥ ਨਜ਼ਰ ਲੈ ਹੋਵੋਗੇ.

ਵਿਸਥਾਰ ਜਾਣਕਾਰੀ ਲਈ ਵਰਤਿਆ ਸਟਾਇਲਸ਼ੀਟ

ਹੁਣ ਸਾਡੇ CSS ਲੰਬਕਾਰੀ ਮੇਨੂ ਦੇ ਵੇਰਵੇ 'ਤੇ ਵਿਚਾਰ:

ਸੂਚੀ ਵਿੱਚ-ਸ਼ੈਲੀ-ਕਿਸਮ ਨਿਸ਼ਾਨ ਦੀ ਸੂਚੀ ਨੂੰ ਹਟਾਉਣ ਲਈ ਸਹਾਇਕ ਹੈ. ਹਾਸ਼ੀਏ ਅਤੇ ਚਿਣਨ ਲਈ "0" ਦੀ ਚੋਣ ਕੀਤੀ ਸੂਚੀ ਵਿੱਚ ਵਾਧੂ ਚਿਣਨ ਨੂੰ ਹਟਾਉਣ. HTML ਕੋਡ ਤੱਕ ਵੇਖਿਆ ਜਾ ਸਕਦਾ ਹੈ ਦੇ ਰੂਪ ਵਿੱਚ, ਸਾਡੇ ਮੇਨੂ ਇੱਕ ਸੂਚੀ ਹੈ, ਅਤੇ ਸਟਾਈਲ CSS ਵਰਤ ਪਰਿਭਾਸ਼ਿਤ ਕੀਤੇ ਗਏ ਹਨ.

ਉਲ # my_Vmenu - ਸਾਰੀ ਸੂਚੀ ਦੇ ਸਮੁੱਚੇ ਸ਼ੈਲੀ.

ਉਲ # my_Vmenu li ਨੂੰ ਇੱਕ - ਟੈਗ li ਵਿਚਕਾਰ ਸ਼ੈਲੀ ਲਿੰਕ.

ਉਲ # my_Vmenu li ਨੂੰ ਇੱਕ: ਹੋਵਰ - ਇੱਕ ਵਾਰ ਜਦ ਇਕ ਲੋਕ ਵੱਧ ਆਵੇ ਤੇ ਮੇਨੂ ਇਕਾਈ ਦੇ ਵਿਚਾਰ ਅਧੀਨ ਕਿਸਮ ਦਾ ਵੇਰਵਾ.

ਉਲ # my_Vmenu li ਇੱਕ ਗਿਠ - ਪਾਠ ਜਾਣਕਾਰੀ (ਸਿਰਲੇਖ ਮੇਨੂ).

ਯਾਦ ਰੱਖੋ ਕਿ my_Vmenu.css my_Vmenu.html ਫਾਇਲ ਅਤੇ ਉਸੇ ਡਾਇਰੈਕਟਰੀ ਵਿੱਚ ਰੱਖਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ. ਪਰ, ਉਹ ਵੱਖ-ਵੱਖ ਫੋਲਡਰ ਵਿੱਚ ਸਥਿਤ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ, ਪਰ ਫਿਰ ਇਸ ਨੂੰ my_Vmenu.css ਨੂੰ my_Vmenu.html ਫਾਇਲ ਮਾਰਗ ਵਿੱਚ ਰਜਿਸਟਰ ਕਰਨ ਲਈ ਮਹੱਤਵਪੂਰਨ ਹੈ. ਧਿਆਨ ਰੱਖੋ, ਕਿਉਕਿ, ਇਸ ਸਮੱਸਿਆ ਨੂੰ ਿਾਲੇ ਅਕਸਰ.

ਸ਼ੈਲੀ ਨੂੰ HTML ਫਾਇਲ-ਵਿੱਚ ਸਿਰ ਟੈਗ ਵਿਚਕਾਰ ਜੁੜਿਆ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ. menu_1.png ਅਤੇ menu_2.png - ਇਸ ਨੂੰ ਆਮ ਰਾਜ ਅਤੇ ਹੋਵਰ ਵਿਚ ਤਸਵੀਰ ਮੇਨੂ ਇਕਾਈ ਲਈ ਤਸਵੀਰ ਹੈ.

ਇਹ ਚਿੱਤਰ ਲਈ ਇੱਕ ਵੱਖਰਾ ਫੋਲਡਰ ਵਿੱਚ ਚਿੱਤਰ ਨੂੰ ਸੰਭਾਲਣ ਦਾ ਨਾਮ ਇਸ ਨੂੰ my_images ਹੈ, ਪਰ ਫਿਰ CSS ਕੋਡ ਨੂੰ ਅਡਜੱਸਟ ਕਰਨ ਲਈ ਬਿਹਤਰ ਹੈ. ਲਿਖੋ, ਜਿੱਥੇ ਇਹ ਚਿੱਤਰ ਦਿਖਾਏ ਗਏ ਹਨ, ਉਹ ਇਸ ਡਾਇਰੈਕਟਰੀ ਵਿੱਚ ਹਨ: URL (my_images / menu_1.png) ਅਤੇ URL (my_images / menu_2.png).

CSS ਕੋਡ ਵਿੱਚ ਦੱਸਿਆ ਗਿਆ ਹੈ ਹੋਣ ਦੇ ਬਾਕੀ ਵਿੱਚ, ਆਸਾਨੀ ਨਾਲ ਸਮਝਣ ਲਈ. ਉਹ ਸਾਡੇ ਮੇਨੂ ਦੀ ਦਿੱਖ ਨੂੰ ਪ੍ਰਭਾਸ਼ਿਤ. ਇਹ ਹੈ, ਜੋ ਕਿ ਚੌੜਾਈ ਅਤੇ ਇਕਾਈ ਦੀ ਉਚਾਈ ਆਮ ਸੂਬੇ ਵਿਚ ਉਸੇ ਇਕਾਈ ਲਈ ਨਿਰਧਾਰਤ ਧਿਆਨ ਕਰਨ ਲਈ ਆਸਾਨ ਹੈ, ਅਤੇ ਜਦ ਤੁਹਾਨੂੰ ਵੱਧ ਮਾਊਸ ਦਾ ਸਬੰਧ ਹੈ. Font ਦਾ ਆਕਾਰ 18px, ਚਿਣਨ ਦੀ ਜਗ੍ਹਾ ਨਾਮ ਦੇ ਵੱਖ-ਵੱਖ ਪਾਸੇ ਤੱਕ ਹਾਸ਼ੀਏ ਤਹਿ ਕਰਦੀ ਹੈ. ਡਿਸਪਲੇਅ ਤੁਹਾਨੂੰ ਚੌੜਾਈ ਅਤੇ ਚਿਣਨ ਸੈੱਟ ਕਰਨ ਲਈ ਡਿਸਪਲੇਅ ਯੂਨਿਟ ਸੈੱਟ ਕਰਨ ਦਿੰਦਾ ਹੈ.

ਸਾਡੇ ਲੰਬਕਾਰੀ ਮੇਨੂ

ਤੁਹਾਨੂੰ ਦੇਖ ਸਕਦੇ ਹੋ ਕਿ, ਲੰਬਕਾਰੀ CSS ਮੇਨੂ ਨੂੰ ਆਸਾਨੀ ਨਾਲ ਤਿਆਰ ਕਰਨ ਲਈ. ਗਿਆਨ ਦੇ ਡਾਟਾ ਦੇ ਆਧਾਰ 'ਤੇ ਤੁਹਾਨੂੰ ਇਸ ਨੂੰ ਸੁੰਦਰ ਅਤੇ ਆਪਣੇ ਵੈੱਬ ਸਾਈਟ ਨੂੰ ਸੈਲਾਨੀ ਨੂੰ ਆਕਰਸ਼ਕ ਬਣਾਉਣ ਦੇ ਯੋਗ ਹੋ ਜਾਵੇਗਾ! ਆਪਣੀ ਸਾਈਟ ਦਾ ਸਾਥ ਦੇਣ ਲਈ ਆਪਣੇ ਕਲਪਨਾ, ਅਤੇ ਫਿਰ ਇੱਕ ਅੰਦਾਜ਼ ਮੇਨੂ ਨੂੰ ਵਰਤੋ.