In this tutorial I will walk you through creating a simple Navigation Menu Bar with HTML and CSS for your website (as shown in the image above). If you're in need of a basic navigation menu at the top of your blog just follow along with these basic steps below, to create your very own!
The Demo:
Let's first interact with the navigation menu demo above. Hover your mouse over each of the orange buttons and you will see that it turns blue. It also becomes clickable as the arrow turns into a hand. You will be able to link each of these buttons to the landing page of your choice.
Luckily this happens to be very easy to create, so I'll just get straight to the code on this tutorial. Below I have the HTML first and the CSS second, let's breakdown the basics within the code.
In the HTML:
class="NavBTN" - This is the main CSS class name which is .NavBTN.
href="URLHERE" - This is the URL link, you'll replace URLHERE with the link to the landing page of your choice.
home, page, about, contact, links - These are the names displayed of your link buttons. Simply type whatever you'd like on them. You can also have as many buttons as you want, just copy and paste a line of the HTML code below the last one.
Here is an example of one line of the HTML code for your link:
<a style="color:#ffffff;" class="NavBTN" href="URLHERE">home</a>
In the CSS:
.NavBTN - This is the main CSS class name, holding the general style and look of the button, which is orange in the above demo.
a.NavBTN:link - This is the CSS class for the buttons link.
.NavBTN:hover - This is the CSS class for the buttons hover state, which turns blue in the above demo when you place your mouse on the button.
You'll also notice that I placed comments, such as: /*Bolds text*/, after each line of code, to let you know what each line does within the CSS. This way you can manipulate the navigation bar to look the way you want.
Now let's check out the full code and leave me any comments below:
HTML:
<a style="color:#ffffff;" class="NavBTN" href="URLHERE">home</a>
<a style="color:#ffffff;" class="NavBTN" href="URLHERE">page 1</a>
<a style="color:#ffffff;" class="NavBTN" href="URLHERE">about</a>
<a style="color:#ffffff;" class="NavBTN" href="URLHERE">contact</a>
<a style="color:#ffffff;" class="NavBTN" href="URLHERE">links</a>
CSS:
<style type="text/css">
.NavBTN {
font-weight: bold; /*Bolds text*/
display:inline-block; /*Displays buttons inline*/
-webkit-border-radius: 5px; /*Rounded corners on the button*/
-moz-border-radius: 5px; /*Rounded corners on the button*/
border-radius: 5px; /*Rounded corners on the button*/
font-family: Arial; /*Font*/
color: #ffffff; /*Button text color*/
text-align:center; /*Aligns text in the buttons center*/
background: #ff6600; /*Default button background color*/
padding-top:10px; /*Top padding between text and buttons top*/
padding-bottom:10px; /*Bottom padding between text and buttons bottom*/
padding-left:10px; /*Left padding between text and buttons left side*/
padding-right:10px; /*Right padding between text and buttons right side*/
text-decoration: none; /*Removes link underline*/
margin-bottom:5px; /*Margin below the buttons*/
width:auto; /*Auto adjusts button width to fit longer text*/
min-width:100px; /*Minimum width of the button*/
text-transform: uppercase; /*Forces button text to be uppercase*/
}
a.NavBTN:link {
color:#ffffff; /*Button text color*/
}
.NavBTN:hover {
background: #006699; /*Background on mousehover*/
text-decoration: none; /*Removes link underline*/
}
</style>
No comments:
Post a Comment