Jump to content

Do you really need <ul> to make a nav bar? (Opinion & Question)


DarkxPunk

Recommended Posts

Hey everyone, So I have a comment to make and I would love feed back about my comment. Now I have been building websites for about 4 years now. I still know almost nothing and I have allot to learn, but I am trying my best to get there. Through my travels I have noticed many 'common practices' when attempting to code certain things, in this example a nav bar. Allot of the times these 'common practices' are over done and add extra code when not needed, or as far as I can tell. Here is my example: 'Common Practice' Nav Bar

<div id="nav"><ul><li><a href="#>Home</a></li><li><a href="#>About</a></li><li><a href="#>Contact</a></li><ul></div>

My Simple Nav Bar

<div id="nav"><a href="#>Home</a><a href="#>Home</a><a href="#>Home</a></div>

As you can see I saved allot of extra (almost useless) typing. I still gotta style it all the same in CSS, actually my simple nav requires less styling because I don't gotta remove default styling from the ul and li. 'Common Practice' Nav Bar CSS

ul,li {margin: 0;border: 0;padding: 0;list-style: none;}li {float: left;}li a {color: #eeeeee;}

My Simple Nav Bar CSS

#nav a {float: left;color: #eeeeee;}

By now I think you see my point. Now there are many instances where you need something to wrap the links, but why use ul + li when we have the beauty of divs? Thanks for reading this, hope this made your lives easier. Also please rip me apart if I am totally wrong, I WANNA LEARN :D.

Link to comment
Share on other sites

For a single row of menu links, yes! that will work fine, the reason the ul li are used is when more than a single row but sublevel menu are required, and because of the way ul li are structured as in each sublevel is a child of the the previous level is why the ul li element are perfect for using for menus.

Link to comment
Share on other sites

I actually was looking at a site with a drop down menu and I thought to myself maybe this is why. I am not convinced though it is the most efficient way. I challenge myself to make it simpler :D Will get back to you with my results.

Link to comment
Share on other sites

Seriously you will have to end up with same structure layout as unordered list for sublevel to show, to highlight parent categories of sublevels, if required, highlight different colours for each sublevels, this is all achievable with the unordered list elements and how its structured.

Link to comment
Share on other sites

Slightly off topic but I always use ordered lists <ol> for navigation, I think it's more semantic and navigation bars tend to have an order to them (you don't often see the homepage link in the middle of a nav bar). It also makes sense to you the new <nav> tag.

Link to comment
Share on other sites

<nav> tag is still new html5 i suppose i think some of these html5 tags add no value to websites other than making the code more readable e.g <nav>, <article>, <header>. i think they all just act like normal div tags

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...