Difference between revisions of "Test"
Line 1: | Line 1: | ||
− | {{Dropdown | + | <html> |
+ | <head> | ||
+ | <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
+ | <style> | ||
+ | .dropbtn { | ||
+ | background-color: #3498DB; | ||
+ | color: white; | ||
+ | padding: 16px; | ||
+ | font-size: 16px; | ||
+ | border: none; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | |||
+ | .dropbtn:hover, .dropbtn:focus { | ||
+ | background-color: #2980B9; | ||
+ | } | ||
+ | |||
+ | .dropdown { | ||
+ | position: relative; | ||
+ | display: inline-block; | ||
+ | } | ||
+ | |||
+ | .dropdown-content { | ||
+ | display: none; | ||
+ | position: absolute; | ||
+ | background-color: #f1f1f1; | ||
+ | min-width: 160px; | ||
+ | overflow: auto; | ||
+ | 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 a:hover {background-color: #ddd;} | ||
+ | |||
+ | .show {display: block;} | ||
+ | </style> | ||
+ | </head> | ||
+ | <body> | ||
+ | |||
+ | <h2>Clickable Dropdown</h2> | ||
+ | <p>Click on the button to open the dropdown menu.</p> | ||
+ | |||
+ | <div class="dropdown"> | ||
+ | <button onclick="myFunction()" class="dropbtn">Dropdown</button> | ||
+ | <div id="myDropdown" class="dropdown-content"> | ||
+ | <a href="#home">Home</a> | ||
+ | <a href="#about">About</a> | ||
+ | <a href="#contact">Contact</a> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <script> | ||
+ | /* When the user clicks on the button, | ||
+ | toggle between hiding and showing the dropdown content */ | ||
+ | function myFunction() { | ||
+ | document.getElementById("myDropdown").classList.toggle("show"); | ||
+ | } | ||
+ | |||
+ | // Close the dropdown if the user clicks outside of it | ||
+ | window.onclick = function(event) { | ||
+ | if (!event.target.matches('.dropbtn')) { | ||
+ | var dropdowns = document.getElementsByClassName("dropdown-content"); | ||
+ | var i; | ||
+ | for (i = 0; i < dropdowns.length; i++) { | ||
+ | var openDropdown = dropdowns[i]; | ||
+ | if (openDropdown.classList.contains('show')) { | ||
+ | openDropdown.classList.remove('show'); | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | </script> | ||
+ | |||
+ | </body> | ||
+ | </html> | ||
+ | |||
---- | ---- |
Revision as of 18:59, 29 March 2020
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .dropbtn {
background-color: #3498DB; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
.dropdown {
position: relative; display: inline-block;
}
.dropdown-content {
display: none; position: absolute; background-color: #f1f1f1; min-width: 160px; overflow: auto; 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 a:hover {background-color: #ddd;}
.show {display: block;} </style> </head> <body>
Contents
Clickable Dropdown
Click on the button to open the dropdown menu.
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<a href="#home">Home</a> <a href="#about">About</a> <a href="#contact">Contact</a>
<script> /* When the user clicks on the button, toggle between hiding and showing the dropdown content */ function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) { var dropdowns = document.getElementsByClassName("dropdown-content"); var i; for (i = 0; i < dropdowns.length; i++) { var openDropdown = dropdowns[i]; if (openDropdown.classList.contains('show')) { openDropdown.classList.remove('show'); } } }
} </script>
</body> </html>
Test
Test
{{{nicknames}}} | ![]() |
Who are the Test?
Test Archetypes
{{{archetype1name}}}
{{{archetype1text}}}
{{{archetype2name}}}
{{{archetype2text}}}
{{{archetype3name}}}
{{{archetype3text}}}
{{{archetype4name}}}
{{{archetype4text}}}
{{{archetype5name}}}
{{{archetype5text}}}
Disciplines
Bane
• Fneep
•• Fneep
••• Fneep
•••• Fneep
••••• Fneep
This is a huge big test thingy!
Cost: None or 1 Vitae.
••••• Fneep
There are no articles in this category.
- Mummy the Resurrection 5th Edition (Puglord)
- Alternate Mage System PDF
- Alternate Mage System
- Alternate Mage: The Ascension PDF
- Hunter H5 alternative Creeds and Edges
Comments
Test Formatting
Very much
Good stuff
- Test
Test Formatting
Very much
Good stuff
* Test
The URL or file path given does not exist.
Enable comment auto-refresher
ElmerG