How to Make a Menu Bar with HTML and CSS

I'm busy. I'm working on 3 projects:

Big text adventure game in Python
Simple operating system in C#
Website in HTML, CSS, and JavaScript

As two people are working on a web dev course (not mentioning their usernames for productivity), I'm working on those projects.

But I had to release something. So I made a tutorial on how to make a menu bar with HTML and CSS.

Making the menuBar `<p>`

Make a new HTML, CSS, JS repl

Inside the body, type somethig similar to the following:

<p class="menuBar"> Home | Page 1 | Page 2 | Page 3 </p>

If you click run, you should see this:

Add links to other webpages as neccasery. (remind me if there's a right way to spell that.)

That is the beginning. From here, to create the menu bar, we will mostly use the stylesheet (style.css if you are editing a css file or in between the style tags if you're going old-school).

Getting ready to edit the stylesheet

To start, add this code into the stylesheet:

.menuBar {
    
}

. will indicate that you are editing a class.

menuBar is the class name.

The brackets ({}) is where you put the stuff to style.

Centering the text

First, you need to center the text so it looks better. You can do that with the stylesheet.

Add this to the stylesheet:

.menuBar {
	text-align: center;
}

When you open the page in a new tab, you should see this.

That is the first step.

Adding a font

Some fonts you need to import. This part will be an example for importing Roboto.

If you want to use Roboto, put this in your head:

<link href="https://fonts.googleapis.com/css2?family=Roboto:[email protected];400&display=swap" rel="stylesheet">

Then, to use the font, put this in the .menuBar of the stylesheet:

font-family: 'Roboto';

The 'Roboto' is how you can get the font.

We can go further. If you want a version with a certian thickness, add something like this, replacing 50 with your desired font weight:

font-weight: 50;

When you open the page in a new tab, it should display the following:

Your current menu bar now looks a little more stylish.

Adding color

Making color in CSS is simple. Add this (replacing the colors with colors of your choice) to your stylesheet:

color: rgb(0, 0, 255);
background-color: rgb(255, 0, 0);

Let's break that down.

color, in this case, is the font color.

background-color is the background color.

When webpage is opened in a new tab, it should look like this:

Adding space

We should add some space in between everything. Put this into the menuBar of the stylesheet, putting as many px as you need:

padding: 16px;

That will add some space. Of course, the background color is shown in that extra space.

When webpage is opened up in a new tab, it should show this:

Borders

Now, we're getting to the interesting part.

To add a border, use border. Example:

border: 4px solid rgb(0, 0, 0);

This will create a black rectangular border around the current menu bar.

To make a rounded border, use border-radius Example:

border-radius: 30px;

When opened in a new tab, it will display the following:

Congratulations! You have made a decent menu bar!

Remind me of typos and stuff.

@JosephSanthosh i dont know a lot of js :(

but ill share what i do know

Comments

Comments are lines of code not ran. They enhance readability by a lot.

Example:

// Single line comment. Anything after the // on that line is not run
/*
Multiline comment.
they are really cool.
They end with:
*/
console./* they can also be used on the same line */log("Hello world");

Variables

Variables start with the keyword var, then the name, an equal sign, and the value.

var variable = 5;

Making functions

Functions are like little snippets of cod that can be called with parenthesis.

Here is a simple example:

function saySomething() {
    console.log("Hello world");
}

You also have parameters. Parameters are basically local variables inside the function in the parenthesis.