How to replicate this navigation bar

Get Started
1

I have being trying to teach myself how to build a web site and am very slowly plodding along.

I want to build a navigation bar that is similar to this http://www.text-link-ads.com/r/agencies (the three headers “Advertisers”, “Publishers” and “Agencies” bar) Instead of spending months trying to work it out myself I was hoping some kind soul may try and help me

I want to replicate the a colour line running underneath the tab and especially the fact that it changes to the same colour as each tab that you click on.

I also want all of my tabs to be small like the Agencies tab except I want the tab for the page you are on to be larger than the others, I also want it to change for each tab you click on so that the tab you are on at any one time is always the largest.

Also is this possible just using images, css and html as I have no concept of anything more advanced like javascript etc. Please let me know if this is possible and how I would do it.

Thanks in advance

2

I will have a look and let you know okay

3

If you have a link to your page I can have a look :slight_smile:

4

Sorry I haven’t got the site set up anywhere yet I was just concentrating on trying to get something developed before I started to find out how I get a site hosted etc. I wouldn’t even know where to start just yet so I can’t even just set it up quickly for you to have a look at. I could post up all my code to show where I am up to for the site with the new nav bar rather than the example one we have been using.

I have got it working with the line underneath as per your suggestion but I am still looking for the way to do the one pixel border like the atttachments on the previous post. I tried to find examples on the web and have found the sliding doors technique on A List Apart http://www.alistapart.com/articles/slidingdoors/ which I am going to work through. Do you think this will help me achieve what I want to do or do you know if there are any other tutorials that I could follow that would give me a similar sort of navigation bar that I can then adapt it.

Any thoughts and help much appreciated.

5

This is not as difficult as it look. You could accomplish that in different ways. You could use a different header image for every page or a different bottom border color. I made something quick. See if that can work for you:


html, body {
	margin: 0; padding: 0;	
}

.header {
	width: 100%; height: 100px; border-bottom: 10px solid;	
}

.header .menu {
	width: 800px; margin: 0 auto; position: relative;
			
}

.header .menu ul {
	list-style-type: none;					  
}

.header .menu li {
	
	margin-top: 40px; float: left; margin-right: 10px;
}

.header .menu li a {
	width: 100px; height: 60px; line-height: 60px; float: left; display: block; text-decoration: none; font-weight: bold;
}

.header .menu li a.advertisers {
	background: #0080E2; text-align:center; color: #FFF; 	
}

.header .menu li a.publishers {
	 background: #7EB83F; text-align:center; color: #FFF; 
}

.header .menu li a.agengies {
	background: #E3A44A; text-align:center; color: #FFF;	
}

.blue {
	border-bottom-color: #0080E2;
}

.green {
	border-bottom-color: #7EB83F;
}

.orange {
	border-bottom-color:#E3A44A
}

Page1


<div class="header blue">
<div class="menu">
<ul>
<li><a href="#" class="advertisers"><span>Advertisers</span></a></li>
<li><a href="test2" class="publishers"><span>Publishers</span></a></li>
<li><a href="#" class="agengies"><span>About Us</span></a></li>
</ul>
</div>

Page2


<div class="header green">
<div class="menu">
<ul>
<li><a href="#" class="advertisers"><span>Advertisers</span></a></li>
<li><a href="test2" class="publishers"><span>Publishers</span></a></li>
<li><a href="#" class="agengies"><span>About Us</span></a></li>
</ul>
</div>

Page3


<div class="header orange">
<div class="menu">
<ul>
<li><a href="#" class="advertisers"><span>Advertisers</span></a></li>
<li><a href="test2" class="publishers"><span>Publishers</span></a></li>
<li><a href="#" class="agengies"><span>About Us</span></a></li>
</ul>
</div>

This is just basic.You could background images instead of a color for the buttons

6

I can’t see your attacment as yet since it’s pending approval! One question though. Is there a big color difference between the normal and hover state?
If so you could add an extra class, i.e.


.header .menu li a:hover,
.header .menu li a:focus,
.header .memu li a.current{
    background-position: 0 -51px;   
}

Then when you for example on the advertisers page the link would look like


<li><a href="advertisers.html" class="advertisers  current"><span>Advertisers</span></a></li>

You could also add the thin line you mentioned before to the hover state of every image and use the same technique

7

Wow. That is great just what I hoped for. I have got it working and I am trying to deconstuct it to work out what does what, there are a few sections I don’t understand what they do or what they are for. I am going to work on it over the next few days and try to build it into my concept.

Would it be easy to use images for the tabs as I wanted to use rounded corners and few other bits to go with another thing I have on the site.

Anyway I’ll come back with a few questions if that is ok once I have got completely stuck.

Once again thanks ever so much

8

Thanks ever so much Donboe for spending a bit of time putting something together. I’ll have a look at it tonight and see if I can grasp it and work through it.

It really does amaze me how supportive people are on here, I have seen numerous examples of people being prepared to spend their own time to help others and I think it is great.

Thanks again Donboe I’ll report back with how I get on later (once the kids are in bed):slight_smile:

9

I just can’t seem to make that work, I have given it a go this morning but have had problems with just getting the image to show. I’ll give it another go on my lunch but if you get the time would it be possible to post up the full code. Thanks ever so much

10

Lets use the site that you took as an example to show what I mean:


html, body {
    margin: 0; padding: 0;  
}
 
.header {
    width: 100%; height: 100px; border-bottom: 10px solid;  
}
 
.header .menu {
    width: 800px; margin: 0 auto; position: relative;
            
}
 
.header .menu ul {
    list-style-type: none;            
}
 
.header .menu li {
    
    margin-top: 40px; float: left; margin-right: 10px;
}
 
.header .menu li a {
    height: 51px; margin: 49px 10px 0 0; float: left; display: block; text-indent: -9999px;
}

.header .menu li a.advertisers {
   width: 139px; background: url(nav-advertisers.gif) 0 0 no-repeat;    
}


.header .menu li a.publishers {
   width: 139px; background: url(nav-publishers.gif) 0 0 no-repeat;    
}

.header .menu li a.agengies {
   width: 139px; background: url(nav-agengies.gif) 0 0 no-repeat;    
}

.header .menu li a:hover,
.header .menu li a:focus,
.header .memu li a.current{
    background-position: 0 -51px;   
}

Menu on page advertisers:


<li><a href="advertisers.html" class="advertisers current"><span>Advertisers</span></a></li>
<li><a href="publishers.html" class="publishers"><span>Publishers</span></a></li>
<li><a href="agengies.html" class="agengies"><span>Agengies</span></a></li>

Menu on page publishers:


<li><a href="advertisers.html" class="advertisers"><span>Advertisers</span></a></li>
<li><a href="publishers.html" class="publishers current"><span>Publishers</span></a></li>
<li><a href="agengies.html" class="agengies"><span>Agengies</span></a></li>

Menu on page agengies:


<li><a href="advertisers.html" class="advertisers"><span>Advertisers</span></a></li>
<li><a href="publishers.html" class="publishers"><span>Publishers</span></a></li>
<li><a href="agengies.html" class="agengies current"><span>Agengies</span></a></li>

Just try this and see if it’s working

11

Not completely. the :active state is bit of a confusing one. the new class current is doing the trick here:

.header .memu li a.current{

When on the page advertisers the link has two classes advertisers and current:


<li><a href="advertisers.html" class="advertisers current"><span>Advertisers</span></a></li>

The current class as declared in the css makes the button stay in position 0 -51, i.o.w the :hover is over written

12

Thanks again for the help. It is just what I was looking for and I’ve been playing about with it trying to get it just how I want it. I love the hover technique and will definately be using that in my site.

There is one last bit I could do with some help on, I have 8 tabs running across using four colours but the border line underneath merges into the two tabs of the same colour not differentiating which tab is at the front. I have knocked up an example of what I mean "Example Nav Bar (Before). I want a thin line to define each tab when it is selected see “Example Nav Bar” attachment for what I am trying to achieve. Any suggestions of how I can acheive this would be really appreciated.

Just in case I haven’t said it enough Thanks ever so much for your help it is really helping me learn

13

Do you know how I can get my attachments approved or is there another way to show the images?

I think I understand what the above does (it shows the active tab as always in the hover state - is that right?). I tried it though and can’t get it to work so I am not sure what I am doing wrong.

I don’t intend having much of a colour difference between the hover and non hover state though just something subtle so I could still do with the 1px line to stop it merging. Would the other way you have suggested work or is there a different way? Sorry I am getting a bit lost now

14

I have tried to get it to work but I am a bit unsure what it all should be doing now so I think I may have gone wrong somewhere.

If I decided not to involve any changes when hovering how would I do it? Sorry if I am trying your patience here.

15

Like I said i used colors as background but you can use images instead. If for example you would use the images on the exmple site:

Your CSS need to change to:


.header .menu li a {
    height: 51px; margin: 49px 10px 0 0; float: left; display: block; text-indent: -9999px;
}
 
.header .menu li a.advertisers {
   width: 139px; background: url(nav-advertisers.gif) 0 0 no-repeat;    
}
 

.header .menu li a:hover{
	background-position: 0 -51px;	
}

The same ofcource for the other menu items. Let me know if you have questions.