Dropdown test

Developer
Scott Mandell
Size
3,325 Kb
Views
8,096
  1. Dropdown test Previews
  2. Dropdown test HTML Codes
  3. Dropdown test CSS Codes
  4. Dropdown test JS Codes

How do I make an dropdown test?

What is a dropdown test? How do you make a dropdown test? This script and codes were developed by Scott Mandell on 22 October 2022, Saturday.

Dropdown test Previews
IQ Test

Dropdown test - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>dropdown test</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="dropdown"> <button onclick="myFunction()" class="dropbtn">Dropdown</button> <div id="myDropdown" class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> <button onclick="myFunction()" class="dropbtn">Dropdown</button> <div id="myDropdown" class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> <button onclick="myFunction()" class="dropbtn">Dropdown</button> <div id="myDropdown" class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div>
</div>
<div class="menu"> <!-- Top level menu --> <ul> <!-- Top level menu item --> <li> <!-- Top level menu item text --> <span>Undergraduate</span> <!-- 2nd level menu --> <ul> <li> <a href="http://comminfo.rutgers.edu/communication-major/communication-major.html">Communication Major</a> </li> <li> <a href="http://comminfo.rutgers.edu/information-technology-and-informatics-major/information-technology-and-informatics-major.html">Information Technology & Informatics Major</a> </li> <li><a href="http://comminfo.rutgers.edu/journalism-and-media-studies-major/journalism-and-media-studies-major.html">Journalism and Media Studies Major</a> </li> <li><a href="http://comminfo.rutgers.edu/digital-communication-information-and-media-minor/digital-communication-information-and-media-minor.html">Digital Communication, Information, and Media Minor</a> </li> <li><a href="httphttp://comminfo.rutgers.edu/gender-and-media-minor/index.html">Gender and Media Minor</a> </li> <li><a href="http://comminfo.rutgers.edu/component/cur,189/option,com_courses/sch,04/task,listing/tagname,interdisciplinary/">Introductory and Interdisciplinary Courses</a> </li> </ul> </li> <!-- Top level menu item --> <li> <!-- Top level menu item text --> <span>Graduate</span> <!-- 2nd level menu --> <ul> <li> <a href="http://comminfo.rutgers.edu/master-of-communication-and-information-studies/mcis-home.html">Master of Communication and Information Studies</a> </li> <li><a href="http://comminfo.rutgers.edu/mi/master-of-information.html">Master of Information</a> </li> <li><a href="http://comminfo.rutgers.edu/phd-program/phd-program.html">PhD Program</a> </li> </ul> </li> <!-- Top level menu item --> <li> <!-- Top level menu item text --> <span><a href="http://wp.comminfo.rutgers.edu/profdev/">Professional Devlopment</a> </span> <!-- 2nd level menu --> </li> <li> <!-- Top level menu item text --> <span>Research</span> <!-- 2nd level menu --> <ul> <li><a href="http://comminfo.rutgers.edu/research/research.html">Research at SC&I</a> </li> <li><a href="http://comminfo.rutgers.edu/research/centers-and-institutes.html">Centers and Institutes</a> </li> <li><a href="http://comminfo.rutgers.edu/phd-program/accomplishments.html">Graduate Student Research</a> </li> <li><a href="http://sms.rutgers.edu/">Social Media and Society Faculty Cluster</a> </li> </ul> </li> <li> <!-- Top level menu item text --> <span>News & Events</span> <!-- 2nd level menu --> <ul> <li><a href="http://comminfo.rutgers.edu/news/index.html">Recent & Past News</a> </li> <li><a href="http://comminfo.rutgers.edu/events/index_2.html">Event Calendar</a> </li> <li><a href="http://comminfo.rutgers.edu/update/sci-update.html">SC&I Update</a> </li> <li><a href="http://comminfo.rutgers.edu/public-communication/sci-magazine.html">SC&I Magazine</a> </li> <li><a href="http://comminfo.rutgers.edu/public-communication/news.html">For the Media</a> </li> </ul> </li> <li> <!-- Top level menu item text --> <span>About SC&I</span> <!-- 2nd level menu --> <ul> <li><a href="http://comminfo.rutgers.edu/about-sc-i/about-sc-i.html">About SC&I</a> </li> <li><a href="http://comminfo.rutgers.edu/about-sc-i/contact-sc-i.html">Contact SC&I</a> </li> <li><a href="http://comminfo.rutgers.edu/about-sc-i/visit-sc-i.html">Visit SC&I</a> </li> <li><a href="http://comminfo.rutgers.edu/about-sc-i/employment-opportunities-at-sc-i_2.html">Employment Opportunities at SC&I</a> </li> <li><a href="http://comminfo.rutgers.edu/communication/communication-department.html">Communication Department</a> </li> <li><a href="http://comminfo.rutgers.edu/journalism-and-media-studies/journalism-and-media-studies-department.html">Journalism and Media Studies Department</a> </li> <li><a href="http://comminfo.rutgers.edu/library-and-information-science/library-and-information-science-department.html">Library and Information Science Department</a> </li> <li><a href="http://comminfo.rutgers.edu/current-students/current-students-home.html">Office of Student Services</a> </li> </ul> </li> <li> <!-- Top level menu item text --> <span>Directory</span> <!-- 2nd level menu --> <ul> <li><a href="http://comminfo.rutgers.edu/directory/default.html">All Faculty and Staff</a> </li> <li><a href="http://comminfo.rutgers.edu/directory/communication-department-all-faculty-and-assistants.html">Department of Communication</a> </li> <li><a href="http://comminfo.rutgers.edu/directory/journalism-and-media-studies-department-all-faculty-and-assistants.html">Department of Journalism and Media Studies</a> </li> <li><a href="http://comminfo.rutgers.edu/directory/library-and-information-science-department-all-faculty-and-assistants.html">Department of Library and Information Science</a> </li> <li><a href="http://comminfo.rutgers.edu/directory/dean-s-office-and-it-staff.html">Dean's Office and IT Staff</a> </li> <li><a href="http://comminfo.rutgers.edu/directory/research-support.html">Research Support Staff</a> </li> <li><a href="http://comminfo.rutgers.edu/directory/doctoral-students.html">Doctoral Students</a> </li> </ul> </li> </ul>
</div> <script src="js/index.js"></script>
</body>
</html>

Dropdown test - Script Codes CSS Codes

/* Dropdown Button */
.dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer;
}
/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus { background-color: #3e8e41;
}
/* The container 
 - needed to position the dropdown content */
.dropdown { position: relative; display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
/* Links inside the dropdown */
.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 menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

Dropdown test - Script Codes JS Codes

/* 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 menu 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'); } } }
}
Dropdown test - Script Codes
Dropdown test - Script Codes
Home Page Home
Developer Scott Mandell
Username s-mandell
Uploaded October 22, 2022
Rating 3
Size 3,325 Kb
Views 8,096
Do you need developer help for Dropdown test?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Scott Mandell (s-mandell) Script Codes
Name
Hello World
Final project
Webdesign Final
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!