CSS Dropdowns In Hindi

CSS

CSS Dropdown In Hindi – Is Tutorial Me Hamne CSS Dropdowns Ko With Example Explain Kiya Hai, Is Tutorial Me Ham Dekhenge Ki Dropdown Hota Kya Hai, Kese Banate Hai Etc.

Yadi Aapne  HTML Full Course  And CSS Full Course And Python Full Course And PHP Full Course Nhi Read Kiya Hai To Aap Vah Bhi Read Kar Sakte Hai |

CSS Dropdowns In Hindi

Kisi Jab Kisi Element Par Click Ya Mouse Over Kiya Jata Hai To Us Element Ke Niche Ki Taraf Ek Box Ya Kuchh Content Show Hota Hai Jise Dropdown Kaha Jata Hai |

Basic Dropdown In CSS In Hindi

Ab Ek Simple Basic Sa Dropdown Banate Hai |

Example :

<!DOCTYPE html>
<html>
<head>
<style>

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

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

<h2>Master Programing CSS Dropdown</h2>

<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
  <p>Hey, Wekcome!</p>
  </div>
</div>

</body>
</html>

Output :

To Output Me Hamne Dekha Ki Jab Bhi Ham Element Par Mouse Over Karte Hai To Dropdown Box Show Hone Lagta Hai |

Dropdown Menu In CSS In Hindi

CSS Dropdown Ka Use Menu List Banane Ke Liye Bhi Kiya Jata Hai, Jab Bhi User Menu Par Jata Hai To Use Sare Items Ki List Dropdown Me Show Ho Jati Hai |

Example :

<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
  background-color: red;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: grey;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

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

.dropdown-content a:hover {background-color: green}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: hotpink;
}
</style>
</head>
<body>

<h2>Master Programing - Dropdown Menu</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>

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

</body>
</html>

Output :

Jab Bhi Button Par Mouse Over Karte Hai To Hame Menu Ki Puri List Show Hone Lag Jati Hai, To Is Tarah Se Ham Dropdown Menu Create Kar Skte Hai Aur Unhe CSS Style Ki Help Se Aur Jyada Attractive Bana Sakte Hai |

Dropdown Image In CSS In Hindi

Ham Dropdown Box Ke Anadar Kisi Image Ko Bhi Show Kara Skte Hai , Aapne Bahut Si Websites Me Dekha Hoga Ki Jab Ham Kisi Image Ke Upr Mouse Le Kar Jate Hai To Vah Image Big Size Me Dikhane Lag Jati Hai, Aisa Karne Ke Liye Dropdown Ka Hi Use Kiya Jata Hai |

Example : Ham Is Example Me Image Pexel Website Se Online Use Kar Rahe Hai Aap Apni Local Image Ka Path src Me Set Kar Skte Hai |

<!DOCTYPE html>
<html>
<head>
<style>
.dropdown {
  position: relative;
  display: inline-block;
}

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

.dropdown:hover .dropdown-content {
  display: block;
}

.description {
  padding: 15px;
  text-align: center;
}
</style>
</head>
<body>

<h2>Master Programing - Dropdown Image</h2>

<p>Move the mouse over the image below to open the dropdown content.</p>

<div class="dropdown">
  <img src="https://images.pexels.com/photos/210186/pexels-photo-210186.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=100" alt="nature" >
  <div class="dropdown-content">
  <img src="https://images.pexels.com/photos/210186/pexels-photo-210186.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=200" alt="nature" width="300" height="200">
  <div class="description">Beautiful Nature</div>
  </div>
</div>

</body>
</html>

Output :

Dropdown Navbar In CSS In Hindi

Dropdown Navbar Lagabhag Har Ek Website Me Use Kiya Jata Hai, Kyoki Ham Janate Hai Ki Navbar Website Ko Categorized Karta Hai, But Kisi Particular Category Ki Bhi Bahut Sari Sub Category Ho Skti Hai Isliye Ham Us Category Me Dropdown Box Add Karke Un Sub Category Ko Bhi Show Kara Sakte Hai, Jisse User Asani Se Website Se Chije Sikh Paye |

Example :

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: blue;
}

li {
  float: left;
}

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

li a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

li.dropdown {
  display: inline-block;
}

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

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1;}

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

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">Dropdown</a>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>
</ul>

<h2>CSS Dropdown Tutorial</h2>
</body>
</html>

Output :

To Is Parkar Ham Dropdown Navbar Bana Sakte Hai |

Agar Apko CSS Dropdown Se Related Koi Doubt Ho To Comment Section Me Puchh Sakte Ho |

Leave a Reply

Your email address will not be published. Required fields are marked *