Jassif Team Institution

CSS Horizontal Navigation Bar

ஒரு கிடைமட்ட வழிசெலுத்தல் பட்டையில், வழிசெலுத்தல் இணைப்புகள் கிடைமட்டமாக (ஒன்றுக்கு அடுத்து ஒன்றாக) அடுக்கப்பட்டுள்ளன, மேலும் பொதுவாக ஒரு வலைப்பக்கத்தின் மேல் சீரமைக்கப்படுகின்றன.

ஒரு கிடைமட்ட வழிசெலுத்தல் பட்டையின் அடிப்படைகள் வரிசைப்படுத்தப்படாத பட்டியல் (<ul>), பட்டியல் உருப்படிகளுடன் (<li>), ஒவ்வொன்றும் ஒரு இணைப்பைக் (<a>) கொண்டிருக்கும், இது Navbar Intro பக்கத்தில் காட்டப்பட்டுள்ளது.

உங்கள் வழிசெலுத்தல் பட்டைக்கான கொள்கலனாகச் செயல்படும் <ul> உறுப்பைச் சுற்றி <nav> உறுப்பைச் சேர்ப்பதும் பொதுவானது.

Horizontal Navbar Using Float

கிடைமட்ட வழிசெலுத்தல் பட்டையை உருவாக்க ஒரு வழி, <li> உறுப்புகளுக்கு float பண்பைச் சேர்ப்பதாகும்.

இங்கே நாம் ஒரு இருண்ட பின்னணி வண்ணத்துடன் ஒரு அடிப்படை கிடைமட்ட வழிசெலுத்தல் பட்டையை உருவாக்குகிறோம் மற்றும் பயனர் சுட்டியை நகர்த்தும் போது இணைப்புகளின் பின்னணி வண்ணத்தை மாற்றுகிறோம்:

Example

Float உடன் கிடைமட்ட நேவ்பார்:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333333;
}

ul li {
  float: left;
}

ul li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

ul li a:hover {
  background-color: #111111;
}

Example explained:

• overflow: hidden; - பட்டியல் உருப்படிகள் பட்டியலுக்கு வெளியே செல்வதைத் தடுக்கிறது
• background-color: #333333; - <ul> உறுப்புக்கு கருப்பு பின்னணி-வண்ணத்தைச் சேர்க்கிறது
• float: left; - <li> உறுப்புகளை ஒன்றுக்கு அடுத்து ஒன்றாக மிதக்கச் செய்கிறது
• display: block; - <a> க்கு இடைவெளி, உயரம், அகலம் மற்றும் விளிம்புகளைக் குறிப்பிட அனுமதிக்கிறது
• padding: 14px 16px; - ஒவ்வொரு <a> உறுப்புக்கும் இடையே சில இடைவெளியைச் சேர்க்கிறது
• text-decoration: none; - இணைப்புகளிலிருந்து அடிக்கோடிட்டை அகற்றுகிறது

Horizontal Navbar Using Flex

கிடைமட்ட வழிசெலுத்தல் பட்டையை உருவாக்க மிகவும் நவீன முறை, CSS flexbox ஐப் பயன்படுத்துவதாகும்.

பின்வரும் எடுத்துக்காட்டு மேலே உள்ளதைப் போலவே சமமான தோற்றத்தைக் கொண்ட கிடைமட்ட நேவ்பாரை உருவாக்குகிறது, ஆனால் flexbox உடன்:

Example

Flex உடன் கிடைமட்ட நேவ்பார்:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #333333;
  display: flex;
}

ul li a {
  display: block;
  color: white;
  padding: 14px 16px;
  text-decoration: none;
}

ul li a:hover {
  background-color: #111111;
}

இங்குள்ள தீர்வு display: flex; ஆகும். இது ஒரு flex சூழலை உருவாக்குகிறது மற்றும் இயல்பாக உருப்படிகள் இடமிருந்து வலமாக காட்டப்படும்.

மேலும் ul தொகுதிக்கு ஒரு வரியைச் சேர்ப்பதன் மூலம்: justify-content: center;, உங்களிடம் ஒரு கிடைமட்ட மைய நேவ்பார் இருக்கும்:

Example

Flex உடன் கிடைமட்ட மைய நேவ்பார்:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #333333;
  display: flex;
  justify-content: center;
}

Active State

இங்கே, பயனர் எந்தப் பக்கம்/பிரிவில் உள்ளார் என்பதைப் பயனருக்குத் தெரிவிக்க தற்போதைய பக்கத்திற்கு ஒத்த இணைப்பை முன்னிலைப்படுத்த "active" வகுப்பைச் சேர்க்கிறோம்:

Example

ul li a.active {
  background-color: #04AA6D;
}

Gray Horizontal Navbar

இங்கே ஒரு மெல்லிய, சாம்பல் எல்லையுடன் கூடிய சாம்பல் கிடைமட்ட வழிசெலுத்தல் பட்டைக்கான எடுத்துக்காட்டு:

Example

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  border: 1px solid #e7e7e7;
  background-color: #f3f3f3;
}

Right-align One Link

பட்டியல் உருப்படிகளை வலப்பக்கமாக மிதக்கச் செய்வதன் மூலம் ஒன்று அல்லது அதற்கு மேற்பட்ட இணைப்புகளை வலது சீரமைக்கலாம் (float: right;):

Example

<ul>
  <li><a href="#home" class="active">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li style="float:right"><a href="#about">About</a></li>
</ul>

Border Dividers

இணைப்பு பிரிப்பான்களை உருவாக்க, <li> உறுப்புகளுக்கு border-right பண்பைச் சேர்க்கவும் (கடைசியைத் தவிர அனைத்து <li> க்கும்):

Example

/* அனைத்து பட்டியல் உருப்படிகளுக்கும் ஒரு வெளிர் சாம்பல் வலது எல்லையைச் சேர்க்கவும், கடைசியைத் தவிர */
ul li {
  float: left;
  border-right: 1px solid #bbbbbb;
}

ul li:last-child {
  border-right: none;
}

Fixed Navigation Bar

position பண்பை top அல்லது bottom உடன் பயன்படுத்தி, வழிசெலுத்தல் பட்டையை ஒரு பக்கத்தின் மேல் அல்லது கீழ் நிலையானதாக இருக்கச் செய்யலாம்:

Fixed Top

ul {
  position: fixed;
  top: 0;
  width: 100%;
}

Fixed Bottom

ul {
  position: fixed;
  bottom: 0;
  width: 100%;
}

Sticky Navigation Bar

ஒட்டும் நேவ்பாரை உருவாக்க <ul> க்கு position: sticky; சேர்க்கவும்.

position: sticky; உடன் கூடிய ஒரு உறுப்பு, சுருள்பட்டி நிலையைப் பொறுத்து ஒரு தொடர்புடைய மற்றும் நிலையான நிலைக்கு இடையில் மாறுகிறது.

ஒட்டும் உறுப்பு ஒரு குறிப்பிட்ட சுருள்பட்டி நிலை அடையும் வரை தொடர்புடைய நிலையில் வைக்கப்படுகிறது - பின்னர் அது அந்த இடத்தில் "ஒட்டும்" (position: fixed போன்றது).

Example

ul {
  position: sticky;
  top: 0;
}

Dropdown Menu in Navigation Bar

இங்கே நாம் பட்டி இணைப்புகளில் ஒன்றுக்கு ஒரு டிராப்டவுன் மெனுவை உருவாக்குகிறோம்:

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

Responsive Navbar

Example

பதிலளிக்கும் மேல் வழிசெலுத்தலை உருவாக்க CSS media queries ஐ எவ்வாறு பயன்படுத்துவது:

Responsive Navbar

Jassif Team Spaces பற்றி எப்போதாவது கேள்விப்பட்டிருக்கிறீர்களா? இங்கே நீங்கள் புதிதாக உங்கள் வலைத்தளத்தை உருவாக்கலாம் அல்லது ஒரு வார்ப்புருவைப் பயன்படுத்தலாம்.

Exercise