Today i learned how to make a upward and horizontal nav bar using css. I decided to learn this since it'll be helpful for the newspaper website i'm making soon and for common web developing. In this i'm going to explain how to create one, but if there's any improvements that you want me to make an issue on my Github page. To go see my website for yourself go to my replt!
HTML
For the HTML i started inside the body element where i created a nav element. Inside the nav is an unordered list that has 5 list items.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>replit</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<nav onclick="colorize()" ondblclick="reedem()">
<ul>
<li onclick="change()" id="first">Code</li>
<li>Games</li>
<li >Watch</li>
<li >100</li>
<li >Lensco</li>
</ul>
</nav>
<br>
<div id="output">
</div>
<script src="script.js"></script>
</body>
CSS
The basic of making the nav bar is my adding inline-block to both the li and the nav element. To make it upward i added display: flex; (If you ever want to put a nav bar horizontal just do every step but without the flex in the list element! To space the horizontal li elements apart you use padding)to the li element. Now that i fully made the upward nav bar i stylized it some more by adding a border and a hover animation that makes the bar go up with a shadow. When you hover over the list elements they change to a hex color.
html {
height: 100%;
width: 100%;
}
body {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #D3EFBD;
}
ul {
border: solid 2px black;
transition: 0.8s ease;
}
/* THis is just to create some extra detail*/
ul:hover {
margin-bottom: 50px;
box-shadow: 12px 8px black;
}
/*This is what mainly makes the nav bar */
nav,
li {
display: inline-block;
transition: 0.8 ease;
}
/* With flex we can make the bar go upward, if not it would be horizontal*/
li {
cursor: pointer;
display: flex;
Javascript
Another thing i used to sylized the bar is when you click on the nav box the background changes red, but when you double clikc it the color is purple. I used functions to cause this, with the help of the onclick and ondbclick attribute.
function colorize() {
document.body.style.background = "#D9B8C4";
}
function reedem() {
document.body.style.background = "#FF1654";
}
This code was made on replit
This code is just a way to help me use inline block, but i posted it here so others can know it too!
Top comments (0)