How to Create a Nav Bar | HTML & CSS Tutorial | Source Code

A navigation bar is one of the main components of a website. It's one of the first sections that the user sees when he or she lands on a website and it links to the other main parts.

To create a list you use the ul tag, that stands for “unordered list”; it will be the parent container for the “list items” li. The ul tag will go inside the nav tag which I left out in this tutorial.

Tutorial.
Source Code - HTML.
copy
CSS Code.

With CSS you can transform boring HTML unordered list menus into good-looking navigation menus.

copy

ul{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}

li{
float:left
}


a:link, a:visited{
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:4px;
text-transform:uppercase;
text-decoration:none;
}

a:hover, a:active{
background-color:#7A991A;
}


Related Post(s)

» The HTML pattern attribute - regular expressions on input fields

» How to Create a Nav Bar | HTML & CSS Tutorial | Source Code

» Learning Basic HTML

collections_bookmark Category :: Html
date_range Published :: 1 year ago At: 12:23 PM
event_note Detailed Date :: May 19th, 2020
person Writer :: Code
  • RECENT POSTS
4 months ago

A JavaScript library for formatting and manipulating numbers - Numeral.js

Check out this lightweight JavaScript library used for formatting and manipulating numbers.


5 months ago

All Countries Drop Down List | HTML Select Country Name

This simple country dropdown list is freely available for you to copy and use in your project forms.


5 months ago

HTML Entities Code Alphabet Discovery Using JavaScript

In this post I will show how writing just a few lines in JavaScript will allow you to render, browse and discover the alphabetical letters using a set of HTML entity codes.


5 months ago

YTS YIFY MOVIES API - PROJECT PREVIEW

Download YTS YIFY movies using this simple project I created using their API.


6 months ago

Display Random Advice On Your Website or Web App Using Advice Slip JSON API

Here is a short project to display the use of APIs. I decided to work with an advice API because it seemed like a fun one that I haven't worked on before.


7 months ago

How do I get a YouTube video thumbnail from YouTube using PHP

Have you ever been on youtube and admired a thumbnail of a video?


9 months ago

How to recreate Facebook's console warning

When I was inspecting some code on Facebook. I came across this interesting feature. A simple styled console warning message from Facebook to its dear users(products).


1 year ago

How To Create A Stacked Gallery Using HTML And CSS Source Code

In this post I provide you with the source code for the youtube tutorial I made on how to create a Stacked image gallery Using HTML and CSS.


Subscribe
  • ADVERTISEMENT

YOU MAY LIKE THESE POSTS

share