PDA

View Full Version : horizontal nav bar x2



Cliffo
Apr 2nd, 2010, 10:44 PM
I recently learned css thanks to the great advice of people on this board, and i am almost done with my very first theme! I am trying to code in the nav bar, but i am having a lot of trouble figuring this one out.

There is a top nav bar made up of 6 images. What i want is when i click on one of the images, a list will drop horizontally on the bar below it, check out the link it should be easy to visualize. I am not sure how to do this exactly, can someone give me an idea of what to do here? Here is some of the related code atm;


<div id="navtop">
<a class="n1" href="/index.php"></a>
<a class="n2" href="/index.php?site=forum"></a>
<div class="n3"></div>
<div class="n4"></div>
<div class="n5"></div>
<div class="n6"></div>
</div>
<div id="navbottom"></div>


div#navtop {
width: 960px;
height: 42px;
}
a.n1 {
width:160px;
height:inherit;
background-image:url(images/nav_top_01.gif);
float:left;
}
a.n2 {
width:160px;
height:inherit;
background-image:url(images/nav_top_02.gif);
float:left;
}
div#navtop .n3 {
width:160px;
height:inherit;
background-image:url(images/nav_top_03.gif);
float:left;
}
div#navtop .n4 {
width:160px;
height:inherit;
background-image:url(images/nav_top_04.gif);
float:left;
}
div#navtop .n5 {
width:160px;
height:inherit;
background-image:url(images/nav_top_05.gif);
float:left;
}
div#navtop .n6 {
width:160px;
height:inherit;
background-image:url(images/nav_top_06.gif);
float:left;
}
div#navbottom {
width: 960px;
height: 34px;
background-image:url(images/nav_bottom.gif);
}

I am not sure what to do next, to be honest i got lucky figuring out the a.n1 and a.n2 class lol. Should i be doing something similar making ul.n and li.n classes? How can i get them to display side by side? I have never really used proper lists before.

Here is the test site i am making this theme on http://test.cgshost.com, the background is currently yellow because i am trying to figure out why my main content box has a break at the top so just disregard that.., do you like the theme so far =) it is my first!

VIPStephan
Apr 2nd, 2010, 11:01 PM
You should always mark up a navigation as a list of links because basically that’s what it is. Before you start styling with CSS always look at the page without CSS and ponder if what you see makes sense to you. If it does then you can apply styling to enhance the look.

Now, I’m not completely sure what you want. Do you want the text list that’s dropping down be vertical or horizontal? And what is this text supposed to be?

Cliffo
Apr 2nd, 2010, 11:17 PM
There is a top nav bar made up of 6 images. What i want is when i click on one of the images, a list will drop horizontally on the bar below it, check out the link it should be easy to visualize. Any help or a link to a guide that will help (all that i read didn't hit this from what i gathered) that would be awesome!

VIPStephan
Apr 3rd, 2010, 01:25 AM
Ah I see. By the way: Using any search engine for “horizontal drop down navigation” will being you many tutorials including http://www.cssnewbie.com/horizontal-dropdown-menus/

Cliffo
Apr 3rd, 2010, 01:50 AM
lol like i didnt think of that, there is no guide i can find showing how to do a menu how i am wanting.

I'm sure I will figure it out..., or more likely just scrap it.

Cliffo
Apr 3rd, 2010, 04:10 AM
I tried just doing a drop down list, but the lists are pushing images aside rather than going over them, how can i fix that?

here is my current code;


div#navi {
width: 960px;
height: 50px;
}
ul.navi {
margin:-2px 0px -2px -40px;
}
ul.navi, ul.navi li {
float: left;
list-style:none;
}
ul.navi li ul {
display: none;
}
ul.navi li:hover ul {
display:block;
}


<div id="navi">
<ul class="navi">
<li><a href="/index.php"><img src="/themes/CGS_FutureWeb_Blue/images/nav_top_01.gif" /></a>
<ul>
<li>News</li>
<li>Archives</li>
<li>Articles</li>
<li>Calendar</li>
<li>FAQ</li>
<li>Search</li>
</ul>
</li>
<li><a href="/index.php?site=forum"><img src="/themes/CGS_FutureWeb_Blue/images/nav_top_02.gif" /></a></li>
<li><a href="/index.php?site=squads"><img src="/themes/CGS_FutureWeb_Blue/images/nav_top_03.gif" /></a>
<ul>
<li>About Us</li>
<li>Squads</li>
<li>Members</li>
<li>Matches</li>
<li>History</li>
<li>Awards</li>
</ul>
</li>
<li><img src="/themes/CGS_FutureWeb_Blue/images/nav_top_04.gif" />
<ul>
<li>Forums</li>
<li>Guestbook</li>
<li>Registered Users</li>
<li>Online Users</li>
<li>Polls</li>
<li>Servers</li>
</ul>
</li>
<li><img src="/themes/CGS_FutureWeb_Blue/images/nav_top_05.gif" />
<ul>
<li>Downloads</li>
<li>Tutorials</li>
<li>Movies</li>
<li>Photos</li>
<li>Weblinks</li>
<li>Demos</li>
</ul>
</li>
<li><img src="/themes/CGS_FutureWeb_Blue/images/nav_top_06.gif" />
<ul>
<li>Sponsors</li>
<li>Partners</li>
<li>Newsletter</li>
<li>Contact Us</li>
<li>Fight Us</li>
<li>Join Us</li>
<li>Link Us</li>
<li>Imprint</li>
</ul>
</li>
</ul>
</div>

Cliffo
Apr 3rd, 2010, 05:43 AM
Haha i scraped the original 2 bar plan, and in the process of making an "easier" navbar i accidentally created the first lol. If you want to see what i was trying to do it is up at the http://test.cgshost.com, i am almost done, i just am trying to make it show the sub menu when they click the top instead of hover.

You can set to resolved...