Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
HTML Navigation Bar Tutorial
#1
Im not really gonna explain to much just really write and follow the code

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 :p

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
#2
And again very solid basics, like your first tutorial.
Check out MusicHub - a place to listen
#3
Always good to know, thank you sir.


Forum Jump:


Users browsing this thread: 1 Guest(s)


Powered by © 2002-2020 MyBB Group.
Theme by CreWix. Fixed by Tomik. Customized for Aeowulf.