Cara menggunakan vanilla javascript w3schools

Learn how to create a dropup menu with CSS.

Dropup

A dropup menu is a toggleable menu that allows the user to choose one value from a predefined list:

Try it Yourself »

Create A Hoverable Dropup

Create a dropup menu that appears when the user moves the mouse over an element.

Step 1) Add HTML:

Example

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

Example Explained

Use any element to open the dropup menu, e.g. a <button>, <a> or <p> element.

Use a container element (like <div>) to create the dropup menu and add the dropup links inside it.

Wrap a <div> element around the button and the <div> to position the dropup menu correctly with CSS.

Step 2) Add CSS:

Example

/* Dropup Button */
.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

/* The container <div> - needed to position the dropup content */
.dropup {
  position: relative;
  display: inline-block;
}

/* Dropup content (Hidden by Default) */
.dropup-content {
  display: none;
  position: absolute;
  bottom: 50px;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

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

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

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

/* Change the background color of the dropup button when the dropup content is shown */
.dropup:hover .dropbtn {
  background-color: #2980B9;
}

Try it Yourself »

Example Explained

We have styled the dropup button with a background-color, padding, etc.

The .dropup class uses position:relative, which is needed when we want the dropup content to be placed on top of the dropup button (using position:absolute).

The .dropup-content class holds the actual dropup menu. It is hidden by default, and will be displayed on hover (see below). Note the min-width is set to 160px. Feel free to change this. Tip: If you want the width of the dropup content to be as wide as the dropup button, set the width to 100% (and overflow:auto to enable scroll on small screens).

Instead of using a border, we have used the box-shadow property to make the dropup menu look like a "card". We also use z-index to place the dropup in front of other elements.

The :hover selector is used to show the dropup menu when the user moves the mouse over the dropup button.

JSON

JSON stands for JavaScript Object Notation

JSON is a text format for storing and transporting data

JSON is "self-describing" and easy to understand

JSON Example

This example is a JSON string:

'{"name":"John", "age":30, "car":null}'

It defines an object with 3 properties:

• name
• age
• car

Each property has a value.

If you parse the JSON string with a JavaScript program, you can access the data as an object:

let personName = obj.name;
let personAge = obj.age;

What is JSON?

• JSON stands for JavaScript Object Notation
• JSON is a lightweight data-interchange format
• JSON is plain text written in JavaScript object notation
• JSON is used to send data between computers
• JSON is language independent *

*
The JSON syntax is derived from JavaScript object notation, but the JSON format is text only.

Code for reading and generating JSON exists in many programming languages.

The JSON format was originally specified by Douglas Crockford.

Why Use JSON?

The JSON format is syntactically similar to the code for creating JavaScript objects. Because of this, a JavaScript program can easily convert JSON data into JavaScript objects.

Since the format is text only, JSON data can easily be sent between computers, and used by any programming language.

JavaScript has a built in function for converting JSON strings into JavaScript objects:

JSON.parse()

JavaScript also has a built in function for converting an object into a JSON string:

JSON.stringify()

You can receive pure text from a server and use it as a JavaScript object.

You can send a JavaScript object to a server in pure text format.

You can work with data as JavaScript objects, with no complicated parsing and translations.

Storing Data

When storing data, the data has to be a certain format, and regardless of where you choose to store it, text is always one of the legal formats.

JSON makes it possible to store JavaScript objects as text.