Jassif Team Institution

CSS Dropdowns

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

ஒரு CSS டிராப்டவுன் ஒரு தூண்டுதல் உறுப்பைக் கொண்டுள்ளது (<div>, <button>, <p>, <a>, முதலியன).

தூண்டுதல் உறுப்பு கிளிக் செய்யப்படும் போது அல்லது சுட்டியை நகர்த்தும் போது, டிராப்டவுன் உள்ளடக்கம் காட்டப்படும்.

டிராப்டவுன் உள்ளடக்கம் ஒரு கொள்கலன் உறுப்பாகும் (எ.கா. <div>) இது மறைக்கப்பட்ட உள்ளடக்கத்தை வைத்திருக்கும் (உரை, இணைப்புகள், படங்கள் போன்றவை).

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

CSS Dropdown Box with Text

இங்கே, பயனர் ஒரு <div> உறுப்பின் மேல் சுட்டியை நகர்த்தும் போது தோன்றும் சில உரையுடன் ஒரு டிராப்டவுன் பெட்டியை உருவாக்குகிறோம்.

Example

<style>
.dropdown {
  position: relative;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 130px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
}

.dropdown:hover .dropdown-content {
  display: block;
}
</style>

<div class="dropdown">Mouse over me!
  <div class="dropdown-content">Hello World!</div>
</div>

Example Explained

• .dropdown வகுப்பு position:relative ஐப் பயன்படுத்துகிறது, இது டிராப்டவுன் உள்ளடக்கத்தை தூண்டுதல் உறுப்புக்கு கீழே வைக்க விரும்பும்போது தேவைப்படுகிறது (டிராப்டவுன் உள்ளடக்கம் position:absolute ஐப் பயன்படுத்தும்).
• .dropdown-content வகுப்பு டிராப்டவுன் உள்ளடக்கத்தை வைத்திருக்கிறது. இது இயல்பாக மறைக்கப்பட்டுள்ளது, மேலும் சுட்டியை நகர்த்தும் போது காட்டப்படும்.
• min-width பண்பு 130px ஆக அமைக்கப்பட்டுள்ளது. இதை மாற்ற தயங்காதீர்கள்! டிராப்டவுன் உள்ளடக்கத்தின் அகலம் தூண்டுதல் உறுப்பைப் போலவே இருக்க வேண்டும் என்றால், width ஐ 100% ஆக அமைக்கவும் மற்றும் சிறிய திரைகளில் சுருள்பட்டியை இயக்க overflow:auto சேர்க்கவும்.
• ஒரு எல்லையைப் பயன்படுத்துவதற்குப் பதிலாக, டிராப்டவுன் உள்ளடக்கம் "அட்டை" போல் தோற்றமளிக்க box-shadow பண்பைப் பயன்படுத்துகிறோம்.
• பயனர் <div class="dropdown"> உறுப்பின் மேல் சுட்டியை நகர்த்தும் போது டிராப்டவுன் உள்ளடக்கத்தைக் காட்ட :hover தேர்வான் பயன்படுத்தப்படுகிறது.

CSS Dropdown Menu

பயனர் ஒரு பட்டியலிலிருந்து ஒரு விருப்பத்தைத் தேர்ந்தெடுக்க அனுமதிக்கும் ஒரு டிராப்டவுன் மெனுவை உருவாக்கவும்:

இந்த எடுத்துக்காட்டு முந்தையதைப் போன்றது, டிராப்டவுன் பெட்டிக்குள் ஒரு பொத்தான் மற்றும் இணைப்புகளைச் சேர்த்து டிராப்டவுன் பொத்தானுக்கு பொருந்துமாறு பாணியிடுவதைத் தவிர:

Example

<style>
.dropdown {
  position: relative;
}

/* Style the dropdown button */
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

/* Dropdown content */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 200px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

/* Links inside dropdown content */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
  background-color: #f1f1f1
}

/* Show the dropdown content on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Change background color of dropdown button on hover */
.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}
</style>

<div class="dropdown">
  <button class="dropbtn">Dropdown Menu</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

CSS Right-aligned Dropdown

டிராப்டவுன் மெனு இடமிருந்து வலமாக செல்ல விரும்பினால், இடமிருந்து வலமாக செல்வதற்குப் பதிலாக, right: 0; சேர்க்கவும்:

Example

.dropdown-content {
  right: 0;
}

CSS Dropdown Image

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

Example

படத்தின் மேல் சுட்டியை நகர்த்தவும்:

Cinque Terre

Cinque Terre
Beautiful coastal villages in Italy

CSS Dropdown Navbar

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

Example

Exercise