W3.CSS Dropdowns







googletag.cmd.push(function() { googletag.display('div-gpt-ad-1422003450156-2'); });



W3.CSS Dropdowns



❮ Previous
Next ❯





Link 1
Link 2
Link 3



W3.CSS Dropdown Classes


W3.CSS provides the following dropdown classes:



















Class Defines
w3-dropdown-hover A hoverable dropdown element
w3-dropdown-content The dropdown part to be displayed
w3-dropdown-click A clickable dropdown element


Dropdown Elements



The w3-dropdown-hover class defines a hoverable dropdown
element.



The w3-dropdown-content class defines the dropdown content to be
displayed.



Example



<div class="w3-dropdown-hover">
  <button class="w3-button">Hover Over Me!</button>
  <div class="w3-dropdown-content w3-bar-block w3-border">
    <a href="#" class="w3-bar-item w3-button">Link 1</a>
    <a href="#" class="w3-bar-item w3-button">Link 2</a>
    <a href="#" class="w3-bar-item w3-button">Link 3</a>
  </div>
</div>


Try it Yourself »




Both the hoverable element and the dropdown content element can be any HTML element.


In the example above the hover element was a <button>, and the dropdown
content a <div>.


In the next example the hover element is a <p>, and the
dropdown content is a <span>:



Example



<p class="w3-dropdown-hover">Hover over me!
 
<span class="w3-dropdown-content w3-green">Hello World!</span>
</p>


Try it Yourself »









googletag.cmd.push(function() { googletag.display('div-gpt-ad-1493883843099-0'); });





Menu Dropdowns


The w3-dropdown-hover class is perfect for creating navigation
bars with dropdown menues:




Home
Link 1



Link 1
Link 2
Link 3





Example



<div class="w3-bar w3-light-grey">
  <a href="#" class="w3-bar-item
w3-button">Home</a>
  <a href="#" class="w3-bar-item w3-button">Link
1</a>
  <div class="w3-dropdown-hover">
    <button
class="w3-button">Dropdown</button>
    <div
class="w3-dropdown-content w3-bar-block w3-card-4">
     
<a href="#" class="w3-bar-item w3-button">Link 1</a>
      <a href="#"
class="w3-bar-item w3-button">Link
2</a>
      <a href="#" class="w3-bar-item
w3-button">Link 3</a>
   
</div>
  </div>
</div>

Try It Yourself »


Note: You will learn more about Navigation Bars later in this tutorial.




Clickable Dropdowns


The w3-dropdown-click class creates a clickable dropdown
element.


With this class, the dropdown is opened by JavaScript:





Link 1
Link 2
Link 3




Example



<div class="w3-dropdown-click">
  <button onclick="myFunction()" class="w3-button w3-black">Click Me!</button>
  <div id="Demo" class="w3-dropdown-content
w3-bar-block w3-border">
    <a href="#" class="w3-bar-item w3-button">Link 1</a>
    <a href="#" class="w3-bar-item w3-button">Link 2</a>
    <a href="#" class="w3-bar-item w3-button">Link 3</a>
  </div>
</div>

<script>
function myFunction() {
   
var x = document.getElementById("Demo");
    if (x.className.indexOf("w3-show")
== -1) { 
        x.className += " w3-show";
   
} else {
        x.className = x.className.replace(" w3-show", "");
    }
}
</script>


Try it Yourself »





Image Dropdowns



Move the mouse over the image:




Monterosso


Norway




Example



<div class="w3-dropdown-hover">
 
<img src="img_snowtops.jpg" alt="Norway" style="width:20%">
  <div
class="w3-dropdown-content" style="width:300px">
    <img src="img_snowtops.jpg"
alt="Norway" style="width:100%">
  </div>
</div>


Try it Yourself »





Card Dropdowns



Move the mouse over one of the cities below:



London

London

London is the capital city of England.


It is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.






Tokyo

Tokyo

Tokyo is the capital city of Japan.


13 million inhabitants.








Example



<div class="w3-dropdown-hover">London
  <div class="w3-dropdown-content
w3-card-4" style="width:250px">
    <img src="img_london.jpg"
alt="London" style="width:100%">
    <div
class="w3-container">
      <p>London is the
capital city of England.</p>
      <p>It is the
most populous city in the UK.</p>
    </div>
  </div>
</div>


Try it Yourself »




Animated Dropdown


Use any of the w3-animate-classes to fade, zoom or slide in the dropdown content:





Link 1
Link 2
Link 3




Example



<div class="w3-dropdown-click">
  <button onclick="myFunction()"
class="w3-button">Click Me</button>
  <div id="Demo"
class="w3-dropdown-content w3-bar-block w3-animate-zoom">
    <a href="#"
class="w3-bar-item w3-button">Link
1</a>
    <a href="#" class="w3-bar-item w3-button">Link 2</a>
    <a href="#"
class="w3-bar-item w3-button">Link 3</a>
  </div>
</div>


Try it Yourself »




Right-aligned Dropdown


Use the w3-right class to float the dropdown to the right. Use CSS
to position the dropdown content (right:0 will make the dropdown menu go from
right to left instead of left to right):






Link 1
Link 2
Link 3





Example



<div class="w3-dropdown-hover w3-right">
  <button class="w3-button">Dropdown</button>
  <div class="w3-dropdown-content
w3-bar-block w3-border" style="right:0">
    <a href="#" class="w3-bar-item w3-button">Link 1</a>
    <a href="#" class="w3-bar-item w3-button">Link 2</a>
    <a href="#" class="w3-bar-item w3-button">Link 3</a>
  </div>
</div>


Try it Yourself »






❮ Previous
Next ❯


/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
var x = document.getElementById("myDropdown");
if (x.classList) {
x.classList.toggle("w3-show");
} else {
// Fallback for IE9 and earlier
if (x.className.indexOf("w3-show") == -1)
x.className = x.className + " w3-show";
else
x.className = x.className.replace("w3-show", "");
}
}

function myFunction2() {
var x = document.getElementById("myDropdown2");
if (x.classList) {
x.classList.toggle("w3-show");
} else {
// Fallback for IE9 and earlier
if (x.className.indexOf("w3-show") == -1)
x.className = x.className + " w3-show";
else
x.className = x.className.replace("w3-show", "");
}
}

-

Popular posts from this blog

Colors HSL

googletag.cmd.push(function() { googletag.display('div-gpt-ad-1422003450156-2'); }); Colors HSL ❮ Previous Next ❯ HSL Calculator   rgb(255, 0, 0) #ff0000 H: S: L: HSL Colors HSL color values are supported in IE9+, Firefox, Chrome, Safari, and in Opera 10+. HSL stands for hue, saturation, and lightness. HSL color values are specified with: hsl( hue , saturation , lightness ) . Hue Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, 240 is blue. Saturation Saturation is a percentage value; 0% means a shade of gray and 100% is the full color. Lightness Lightness is also a percentage; 0% is black, 100% is white. function submitOnEnter(e) { keyboardKey = e.which || e.keyCode; if (keyboardKey == 13) { setFullColor(); } } function clickHue(hue) { var h = document.getElementById("hue01"); h.v...
Read more

W3.CSS Downloads

<!-- main_leaderboard, all: [728,90][970,90][320,50][468,60] --> W3.CSS Downloads ❮ Previous Next ❯ Download W3.CSS Download W3.CSS from this link: https://www.w3schools.com/w3css/4/w3.css W3.CSS is Free W3.CSS is free to use. No license is necessary. How To use W3.CSS To use W3.CSS, just add a link to "w3.css" in your web pages: Example <!DOCTYPE html> <html> <title>My Web</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> Try It Yourself » Or download w3.css and run it from your own web site: Example <!DOCTYPE html> <html> <title>My Web</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="w3.css"> If you put w3....
Read more

W3.CSS Tables

<!-- main_leaderboard, all: [728,90][970,90][320,50][468,60] --> W3.CSS Tables ❮ Previous Next ❯ First Name Last Name Points Jill Smith 50 Eve Jackson 94 Adam Johnson 67 Bo Nilsson 50 Mike Ross 35 W3.CSS Table Classes W3.CSS provides the following classes for tables: Class Defines w3-table Container for an HTML table w3-striped Striped table w3-border Bordered table w3-bordered Bordered lines w3-centered Centered table content w3-hoverable Hoverable table w3-table-all All properties set Basic Table The w3-table class is used to display a basic table: First Name Last Name Points Jill Smith 50 Eve Jackson 94 Adam Johnson 67 Example <table class="w3-table"> <tr>   <th>First Name</th>   <th>Last Name</th>   <th>Points</th> </tr> <tr>   <td>Jill</td>   <td>Smith</td>   <td>50</...
Read more