Im not really gonna explain to much just really write and follow the code
Well a navigation bar is made up of 4 tags
The <nav> tag shows where the navigation bar starts. The <ul> tag is a
un-ordered list tag and holds the <li><a> tags in them. The <li> tag shows the properties of the nav bar and whats being listed in it. The <a> tag is for when you click on the items in the <li> tags... it brings you to a link.
here's how a navbar would work
Im gonna use a # to indicate a blank page and use index.html for the home page
now the styling for this is gonna be simple... so in your .css file or style tags add this
and im sorry its a simple nav bar but i don't have time to make a good one
Heres the Whole Code
-DistanceDesigns
Well a navigation bar is made up of 4 tags
Code:
<nav> <ul> <li> <a>The <nav> tag shows where the navigation bar starts. The <ul> tag is a
un-ordered list tag and holds the <li><a> tags in them. The <li> tag shows the properties of the nav bar and whats being listed in it. The <a> tag is for when you click on the items in the <li> tags... it brings you to a link.
here's how a navbar would work
Im gonna use a # to indicate a blank page and use index.html for the home page
Code:
<!-- Tutorial By DistanceDesigns -->
<body>
<nav id='navbar'>
<ul>
<li class='active'><a href='index.html'><span>Home</span></a></li>
<li><a href='#'><span>About</span></a></li>
<li class='last'><a href='#'><span>Forums</span></a></li>
</ul>
</nav>
</body>now the styling for this is gonna be simple... so in your .css file or style tags add this
Code:
#navbar {
padding: 8px 0;
word-spacing: 30px;
background: black;
}
#navbar ul {
padding: 0;
text-align: center;
}
#navbar li {
display: inline;
padding: 0;
}
#navbar a {
text-decoration: none;
padding: 0;
}
#navbar a:hover {
text-decoration: underline;
text-size: 10px;
}
#navbar a:link, a:active, a:visited {
color: #07B0EE;
}and im sorry its a simple nav bar but i don't have time to make a good one
Heres the Whole Code
Code:
<!-- Tutorial By DistanceDesigns -->
<body>
<nav id='navbar'>
<ul>
<li class='active'><a href='index.html'><span>Home</span></a></li>
<li><a href='#'><span>About</span></a></li>
<li class='last'><a href='#'><span>Forums</span></a></li>
</ul>
</nav>
</body>
<style>
#navbar {
padding: 8px 0;
word-spacing: 30px;
background: black;
}
#navbar ul {
padding: 0;
text-align: center;
}
#navbar li {
display: inline;
padding: 0;
}
#navbar a {
text-decoration: none;
padding: 0;
}
#navbar a:hover {
text-decoration: underline;
text-size: 10px;
text-color: white;
}
#navbar a:link, a:active, a:visited {
color: #07B0EE;
}
</style>-DistanceDesigns
