Jump to content
  • Advertisement
Sign in to follow this  
plywood

[web] CSS nav list for a game website

This topic is 3026 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

Hi I'm trying to build a simple website to host my Java game. I have a decent amount of Java/OOP development experience but am very weak when it comes to anything web-related.

I know that the modern standard is to make horizontal navigation menus using unordered lists (ul tags) combined with CSS. I've read several tutorials but none of them seem to be working for me. I'm using FF 3.6 over Windows XP (not that the OS really makes a difference, or so I think).

I'm trying to create a horizontal menu that has drop-down submenus. Both the menu tabs as well as individual items on each of their submenu are links that bring you to a different page.

Here is my HTML:

<ul id="tabs">
<li>Menu Tab #1</li>
<ul>
<li>Submenu Item #1</li>
<li>Submenu Item #2</li>
</ul>

<li>Menu Tab #2</li>
<ul>
<li>Submenu Item #1</li>
<li>Submenu Item #2</li>
</ul>
</ul>



Here is my CSS:

ul#tabs
{
margin: 0;
padding: 0;
list-style: none;
width: 150px;
}

ul#tabs li
{
position: relative;
list-style-type: none;
display: inline;
}

li ul
{
position: absolute;
left: 149px;
top: 0;
display: none;
}



Despite specifying my lists to be "inline" and to have no list-style, what I'm getting is just an indented set of links, but they are still vertical, like lists are set to do by default.

My menu tabs ("ul#tabs") are in line with the left border of the page, underneath one another, and each of their submenus are simply indented underneath each respective menu tab, like you would normally get when you put a list inside of another list.

Can anybody see anything wrong with my CSS? My HTML? Thanks!

Share this post


Link to post
Share on other sites
Advertisement
You have an error in your html. You close your "Menu Tab #1" li element before you open the "submenu" ul element.

It should be:

<ul id="tabs">
<li>Menu Tab #1
<ul>
<li>Submenu Item #1</li>
<li>Submenu Item #2</li>
</ul>
</li>

<li>Menu Tab #2
<ul>
<li>Submenu Item #1</li>
<li>Submenu Item #2</li>
</ul>
</li>
</ul>


If you're using this html to test those tutorials, that error will definitely mess up the css.

Share this post


Link to post
Share on other sites
Here's a very basic version of what I think you're trying to achieve.

The html:

<ul id="tabs">
<li><a href="#">Menu Tab #1</a>
<ul>
<li><a href="#">Submenu Item #1</a></li>
<li><a href="#">Submenu Item #2</a></li>
</ul>
</li>
<li><a href="#">Menu Tab #2</a>
<ul>
<li><a href="#">Submenu Item #1</a></li>
<li><a href="#">Submenu Item #2</a></li>
</ul>
</li>
</ul>



The css:

#tabs,
#tabs li,
#tabs ul {
margin: 0;
padding: 0;
list-style: none;
}

#tabs {
position: relative;
}

#tabs li {
text-decoration: none;
float: left;
padding-right: 10px;
}

#tabs li.hover,
#tabs li:hover {
position: relative;
}

#tabs ul li {
float: none;
}

#tabs ul {
position: absolute;
top: 100%;
left: 0;
white-space:nowrap;
z-index: 1000;
display: none;
}

#tabs li:hover ul,
#tabs li.hover ul {
display:block;
}

#tabs li a {
text-decoration: none;
}



Hope that helps!

Edit:
This should probably be moved to the "Web Development" forum.

Share this post


Link to post
Share on other sites
Quote:
Original post by boogyman19946
I don't think html will suffice for a menu like the one you want. I think you'll need a more dynamic scripting language like javascript.
javascript is not neccesary for a menu like the one of the OP is after, HTML/CSS is perfectly sufficient and recommended for accessibility reasons. See for example Suckerfish Dropdowns (sample menu).



Moving you to Web Development.

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

GameDev.net is your game development community. Create an account for your GameDev Portfolio and participate in the largest developer community in the games industry.

Sign me up!