Navigation Bar
I am new at HTML programming and would like to know how to build a Navigation bar on the side of my webpage. I have always worked directly with the HTML tags and want to Know the tag that would create a link to words on the same page. Please help!
Basically, a nav side bar is just a list of <a> anchors in a <div> separated by <br> line breaks:
Last edited by jedaisoul; 02-21-2013 at 08:01 AM .
thank you so much that helps a lot!
Originally Posted by
jedaisoul
Basically, a nav side bar is just a list of <a> anchors in a <div> separated by <br> line breaks:
<div class="left-bar">
<a href="p1.html">First option</a><br>
<a href="p2.html">Second option</a>
</div>
Some people prefer to embed the anchors in an unordered list (with the bullets suppressed), A fuller example:
<!DOCTYPE html>
<head>
<title>example</title>
<style>
body {
width: 800px;
margin: 0 auto;
}
#left-bar {
width:120px;
float:left;
}
#body-text {
width:680px;
float:right;
}
.no-marker {
list-style-type:none;
}
</style>
</head>
<body>
<div id="left-bar">
<ul class="no-marker">
<li><a href="p1.html">First option</a></li>
<li><a href="p2.html">Second option</a></li>
</ul>
</div>
<div id="body-text">
<p>
Main body text goes here...
</p>
</div>
</body>
</html>
Oh, and to link to an item on the same page, just link to the ID. E.g. Instead of:
href="p1.html"
use:
href="#body-text"
Great, thanks!
I know this has been already been answered, but here's how I was taught in one of my college class a while back on navigation.
HTML Code:
<div id="nav" >
<ul>
<li> <a href="content.php" > Edit CMS Content</a> </li>
<li> <a href="picture.php" > Edit Picture(s)</a> </li>
<li> <a href="new_user.php" > Add New User</a> </li>
<li> <a href="logout.php" > Logout</a> </li>
</ul>
</div> Here's my css styling for the navigation menu that I put in a separate file:
Code:
#nav {
float: left;
width: 300px;
height: 230px;
-moz-border-radius: 15px;
border-radius: 15px;
background-color: rgb(156, 233, 194);
padding: 0px;
margin: 0px;
}
#nav ul {
list-style: none;
list-style-position: outside;
list-style-image: none;
padding: 0px;
margin: 0px;
}
#nav ul li {
padding: 0px;
margin: 10px 0px 0px 24px;
}
#nav ul li a {
float: left;
display: block;
width: 240px;
height: 50px;
background-color: rgb(8, 147, 202);
border-bottom: 1px solid #fff;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.4em;
line-height: 50px;
color: #041036;
font-weight: bold;
text-decoration: none;
padding: 0px 0px 0px 10px;
margin: 0px;
}
#nav ul li a:hover {
color: #fff;
background-color: rgb(169, 24, 53);
}
I think of it as staircase that is going a person is going down, by this I mean the following:
Thread Information
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)
Tags for this Thread
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
Forum Rules
Reply With Quote
Originally Posted by jedaisoul
Bookmarks