CSS Navigation Bars

எளிதில் பயன்படுத்தக்கூடிய வழிசெலுத்தல் எந்த வலைத்தளத்திற்கும் முக்கியமானது!

CSS வழிசெலுத்தல் பட்டைகள் வலை வடிவமைப்பின் முக்கியமான கூறுகளாகும். வழிசெலுத்தல் பட்டைகள் பயனர்கள் ஒரு வலைத்தளத்தின் வெவ்வேறு பிரிவுகளுக்கு எளிதாக செல்வதற்கு உதவுகின்றன.

வழிசெலுத்தல் பட்டைகள் பொதுவாக HTML பட்டியல் உறுப்புகளுடன் (<ul> மற்றும் <li>) கட்டமைக்கப்படுகின்றன, பின்னர் சிறந்த தோற்றத்திற்கு CSS மூலம் பாணியிடப்படுகின்றன.

வழிசெலுத்தல் பட்டைகள் பொதுவாக வலைப்பக்கத்தின் மேல் அல்லது பக்கத்தில் அமைந்துள்ளன.

Navigation Bar Examples

ஒரு செங்குத்து நேவ்பார்:

ஒரு கிடைமட்ட நேவ்பார்:

Navigation Bar = List of Links

ஒரு வழிசெலுத்தல் பட்டைக்கு அடிப்படையாக நிலையான HTML தேவைப்படுகிறது.

ஒரு வழிசெலுத்தல் பட்டை அடிப்படையில் இணைப்புகளின் பட்டியலாகும், எனவே <ul> மற்றும் <li> உறுப்புகளைப் பயன்படுத்துவது சரியானது:

Example

<ul>
  <li><a href="default.asp">Home</a></li>
  <li><a href="news.asp">News</a></li>
  <li><a href="contact.asp">Contact</a></li>
  <li><a href="about.asp">About</a></li>
</ul>

Remove Bullets and Spacing

இப்போது <ul> உறுப்பிலிருந்து புல்லட்டுகள், விளிம்புகள் மற்றும் இடைவெளிகளை அகற்றுவோம்:

Example

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

Example explained:

list-style-type: none; அமைக்கவும் - பட்டியலிலிருந்து புல்லட்டு புள்ளிகளை அகற்றுகிறது
margin: 0; அமைக்கவும் - இயல்புநிலை உலாவி விளிம்புகளை மீட்டமைக்கிறது
padding: 0; அமைக்கவும் - இயல்புநிலை உலாவி இடைவெளிகளை மீட்டமைக்கிறது

📝 குறிப்பு:

மேலே உள்ள எடுத்துக்காட்டில் உள்ள HTML மற்றும் CSS குறியீடு செங்குத்து மற்றும் கிடைமட்ட வழிசெலுத்தல் பட்டைகளுக்குப் பயன்படுத்தப்படும் அடிப்படைக் குறியீடாகும், இது அடுத்த அத்தியாயங்களில் நீங்கள் மேலும் அறிந்து கொள்வீர்கள்.

Exercise

❓ வழிசெலுத்தல் பட்டைகள் பொதுவாக எந்த HTML உறுப்புகளுடன் கட்டமைக்கப்படுகின்றன?

✗ தவறு!

✓ சரி! வழிசெலுத்தல் பட்டைகள் பொதுவாக HTML பட்டியல் உறுப்புகளுடன் (<ul> மற்றும் <li>) கட்டமைக்கப்படுகின்றன

✗ தவறு!

✗ தவறு!