Today I'll be sharing the code need to create a navigation bar, using HTML and CSS. Over the next couple of blogs in this series I hope to share some of the techniques that I use to build a basic website from scratch. You'll want to have a software like atom, sublime or my favorite visual code studio to follow along and build your own website.
Each blog I'll be going through one phase of a website as I teach myself how to build the website of my dreams. That being the case, this tutorial series is more me writing down notes than it is me being an excellent teacher, though I'll try my best not to disappoint.
Also, you may notice some text spaced out weird, I just wanted to make sure it didn't post as an error for html or css on Steemit, so I did that. You'll need to tighten up things or write the code yourself to follow along
The basic structure of a navigation bar is a simple unordered list in html
use basic < ul > and < li > tags along with < a href = " index.html" > Home< / a >
The code will look like this
< ul >
< li > < a href = "index.html" > Home< /a> < /li>
< li > < a href = "about.html" > About< /a> < /li>
< li > < a href = "events.html" > Events< /a> < /li>
< li > < a href = "contact.html" > Contact< /a> < /li>
< / ul>
The Next Portion of code need is all CSS based.
If you like, you may choose to wrap the < ul > tag in a div with a specific class, to give that class certain css stylings that are different from the < ul > or< li > tages.
You'll make 5 CSS elements: ul, li, li a, li a: hover, and a.
For the ul CSS element, we want to first make sure that all of the list elements are in a horizontal line with 0 margin and padding(space).
list s tyle - type : none;
margin: 0;
padding: 0;
Next we'll want to change the background color of the ordered list items(I called them elements before).
background - color : black;
To get the bar to extend across the full width of the page we'll want to enter the following values to the ul element.
overflow : hidden;
width: 100%;
Next we'll move on to the list items themselves (li tags).
First we'll want to make the items stick/"float" to the top left of our page in a line.
display: inline;
float: left;
Last for li, we'll want to add come color for the background and set a border color...if you want.
background-color: black;
border-right: 1px solid gold;
text-align: center;
background-color: gold;
color: white;
Last we'll be styling the a tag element
First we'll add a new color and some space around our text.
color: grey;
display: block;
padding: 8px;
For the last step we'll get rid of that nasty looking underline.
text-decoration: none;
..and that's it! If you were following along you should have a navigation bar which changes colors when you hover over different page titles.
I realize that this may not be the best tutorial, but hopefully by the end of this series I'll start to find my mojo and this will be easy as heck to understand. :)
Thanks for tuning in.
