Navbar or Navigation Bar is a very important part of a website that serves to help visitors or website visitors explore the contents of a website easily.
- Home
- DropdownMenu
The above code can be placed in the body, more precisely in the tag here.
Read also : Create a simple web view using HTML
If we open the html code above in a browser, it still looks like a list without any sweetness. hehehe.
So we need CSS to add the sweet side to make it look more attractive, you could say HTML without CSS is like making a house but not yet painted it still looks ahem ahem.
ul {
list-style-type: none;
margins: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px 16px;
text-decoration: none;
}
.active {
background-color: #FF0B7B;
}
You can put the code above in the tag here, usually this tag is placed above the tag.
Here’s the css code for a transparent dropdown view
.dropbutton {
background-color: black;
color: white;
padding: 16px;
font-size: 16px;
borders: none;
cursors: pointers;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: fixed;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
opacity: 0.7;
}
.dropdown-content a {
color: black;
padding: 16px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #d8d8d8}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #f9f9f9;
}
Making the display transparent in some parts of our website is actually not too difficult because we can give the opacity code to the element that we want to turn transparent.
That’s some information from me that I hope can be useful for friends. Thank you
