Resolved Two Row Horizontal Menu Centering... [Archive]

...

View Full Version : Resolved Two Row Horizontal Menu Centering...

Badman3k

03-12-2009, 12:38 PM

I've been working on a horizontal menu system with two rows, the top for the main cats and then the 2nd under it with pages within the cat.

So far I've got the CSS and HTML to work relatively well, with the hovering and etc. See the below code (which is a full testing page):

<html>
<head>
<title>Menu Tester</title>
</head>
<body>
<div id='menu'>
<ul>
<li><a href="/dashboard.html" title="Home"><img src="/images/buttons/home.png" alt="Home" /> Home</a> <span class="navborder"> </span></li>
<li><a href="/customers/index.html" title="Customers"><img src="/images/buttons/customers.png" alt="Customers" /> Customers</a> <span class="navborder"> </span>
<ul>
<li><a href="/customers/add_customer.html" title="Add Customer">Add Customer</a></li>
<li><a href="/customers/view_customers.html" title="View Customers">View Customers</a></li>
<li><a href="/customers/add_site.html" title="Add Site">Add Site</a></li>
<li><a href="/customers/view_sites.html" title="View Sites">View Sites</a></li>
<li><a href="/customers/add_contact.html" title="Add Contact">Add Contact</a></li>
<li><a href="/customers/view_contacts.html" title="View Contacts">View Contacts</a></li>
</ul>
</li>
<li><a href="/suppliers/index.html" title="Suppliers"><img src="/images/buttons/suppliers.png" alt="Suppliers" /> Suppliers</a> <span class="navborder"> </span>
<ul>
<li><a href="/suppliers/add_supplier.html" title="Add Supplier">Add Supplier</a></li>
<li><a href="/suppliers/view_suppliers.html" title="View Suppliers">View Suppliers</a></li>
<li><a href="/suppliers/add_rep.html" title="Add Rep">Add Rep</a></li>
<li><a href="/suppliers/view_reps.html" title="View Reps">View Reps</a></li>
</ul>
</li>
<li><a href="/projects/index.html" title="Projects"><img src="/images/buttons/projects.png" alt="Projects" /> Projects</a> <span class="navborder"> </span>
<ul>
<li><a href="/projects/add_project.html" title="Add Project">Add Project</a></li>
<li><a href="/projects/view_projects.html" title="View Projects">View Projects</a></li>
<li><a href="/projects/view_costs.html" title="Review Project Costs">Review Project Costs</a></li>
<li><a href="/projects/view_engineers.html" title="Project Distribution">Project Distribution</a></li>
<li><a href="/projects/add_document.html" title="Add Document">Add Document</a></li>
<li><a href="/projects/view_documents.html" title="View Documents">View Documents</a></li>
</ul>
</li>
<li><a href="/procurement/index.html" title="Procurement"><img src="/images/buttons/procurement.png" alt="Procurement" /> Procurement</a> <span class="navborder"> </span>
<ul>
<li><a href="/procurement/add_order.html" title="Add Order">Add Order</a></li>
<li><a href="/procurement/view_orders.html" title="View Orders">View Orders</a></li>
<li><a href="/procurement/approve_orders.html" title="Approve Orders">Approve Orders</a></li>
</ul>
</li>
<li><a href="/finance/index.html" title="Finance"><img src="/images/buttons/finance.png" alt="Finance" /> Finance</a> <span class="navborder"> </span>
<ul>
<li><a href="/finance/add_invoice.html" title="Add Invoice">Add Invoice</a></li>
<li><a href="/finance/view_invoices.html" title="View Invoices">View Invoices</a></li>
<li><a href="/finance/add_billed_invoice.html" title="Add Billed Invoice">Add Billed Invoice</a></li>
<li><a href="/finance/view_billed_invoices.html" title="View Billed Invoices">View Billed Invoices</a></li>
</ul>
</li>
<li><a href="/admin/index.html" title="Admin"><img src="/images/buttons/admin.png" alt="Admin" /> Admin</a> <span class="navborder"> </span>
<ul>
<li><a href="/admin/add_user.html" title="Add User">Add User</a></li>
<li><a href="/admin/view_users.html" title="View Users">View Users</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>

Following this I assign the following CSS rules:
#menu {
position: absolute;
top: 137px;
width: 100%;
background: url(/images/bg/nav_bg.png) repeat-x;
height: 103px;
font-size: 14px;
font-weight: bold;
}

#menu ul {
padding: 0;
margin: 0;
margin-left: -1px;
list-style-type: none;
border: 0;
position: relative;
top: 0;
left: 0;
color: #FFFFFF;
height: 50px; /* Height of the menu */
}

#menu ul li {
float: left;
padding: 0;
margin: 0;
display: block;
float: left;
}

#menu ul li a {
border: 0;
text-decoration: none;
display: block;
height: 35px; /* Height of the menu */
padding: 0 12px;
padding-top: 15px;
}

#menu ul li span.navborder {
background: url(/images/bg/navitem_border_bg.png) no-repeat;
position: absolute;
top: 0;
padding: 0;
margin: 0;
width: 1px;
height: 100%;
}

#menu ul li a:hover {
border: 0;
display: block;
background: url(/images/bg/navitem_arrow_bg.png) no-repeat bottom center;
}

#menu ul li:hover {
background: url(/images/bg/navitem_hover_bg.png) repeat-x;
}

#menu ul li ul {
display: block;
visibility: hidden;
position: absolute;
left: 0;
top: 50px;
height: 50px;
margin: 0;
color: #142e45;
}

#menu li:hover ul {
visibility: visible;
z-index: 100;
}

#menu li:hover ul li {
background: none;
}

#menu li:hover ul li a:hover{
background: none;
}

This shows the menu in two rows, with the second ULs hidden until it's parent LI is hovered over.

My problem is with the end LIs of the top menu, as their ULs are not 'long' enough to reach them thus trying to click one the subpages is impossible. What I would really like to do is have the second ul 'centered' about the center of it's parent LI. However, if this is not possible, making the second UL wider so that I can actually click on the subpages.

I hope that this is clear, but if not let me know and I'll try again.

Many thanks in advance,

BoldUlysses

03-12-2009, 01:36 PM

First we need to add a DOCTYPE (http://www.alistapart.com/articles/doctype/). No chance of your page behaving properly cross-browser if we don't have that:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>Menu Tester</title>

<style type="text/css">

* {
border:0;
padding:0;
margin:0;
}

#menu {
position: absolute;
top: 137px;
width: 100%;
background: url(/images/bg/nav_bg.png) repeat-x;
height: 103px;
font-size: 14px;
font-weight: bold;
}

#menu ul {
margin-left: -1px;
list-style-type: none;
position: relative;
top: 0;
left: 0;
color: #FFFFFF;
height: 50px; /* Height of the menu */
}

#menu ul li {
float: left;
}

#menu ul li a {
text-decoration: none;
display: block;
height: 35px; /* Height of the menu */
padding: 0 12px;
padding-top: 15px;
}

#menu ul li span.navborder {
background: url(/images/bg/navitem_border_bg.png) no-repeat;
position: absolute;
top: 0;
width: 1px;
height: 100%;
}

#menu ul li a:hover {
display: block;
background: url(/images/bg/navitem_arrow_bg.png) no-repeat bottom center;
}

#menu ul li:hover {
background: url(/images/bg/navitem_hover_bg.png) repeat-x;
}

#menu ul li ul {
display: none;
position: absolute;
left: 0;
top: 50px;
height: 50px;
color: #142e45;
background:#0f0; /* diagnostic background color */
width:100%;
}

#menu li:hover ul {
display: block;
z-index: 100;
}

#menu li:hover ul li {
background: none;
}

#menu li:hover ul li a:hover{
background: none;
}

</style>

</head>

<body>

<div id='menu'>
<ul>
<li><a href="/dashboard.html" title="Home"><img src="/images/buttons/home.png" alt="Home" /> Home</a> <span class="navborder"> </span></li>
<li><a href="/customers/index.html" title="Customers"><img src="/images/buttons/customers.png" alt="Customers" /> Customers</a> <span class="navborder"> </span>
<ul>
<li><a href="/customers/add_customer.html" title="Add Customer">Add Customer</a></li>
<li><a href="/customers/view_customers.html" title="View Customers">View Customers</a></li>
<li><a href="/customers/add_site.html" title="Add Site">Add Site</a></li>
<li><a href="/customers/view_sites.html" title="View Sites">View Sites</a></li>
<li><a href="/customers/add_contact.html" title="Add Contact">Add Contact</a></li>
<li><a href="/customers/view_contacts.html" title="View Contacts">View Contacts</a></li>
</ul>
</li>
<li><a href="/suppliers/index.html" title="Suppliers"><img src="/images/buttons/suppliers.png" alt="Suppliers" /> Suppliers</a> <span class="navborder"> </span>
<ul>
<li><a href="/suppliers/add_supplier.html" title="Add Supplier">Add Supplier</a></li>
<li><a href="/suppliers/view_suppliers.html" title="View Suppliers">View Suppliers</a></li>
<li><a href="/suppliers/add_rep.html" title="Add Rep">Add Rep</a></li>
<li><a href="/suppliers/view_reps.html" title="View Reps">View Reps</a></li>
</ul>
</li>
<li><a href="/projects/index.html" title="Projects"><img src="/images/buttons/projects.png" alt="Projects" /> Projects</a> <span class="navborder"> </span>
<ul>
<li><a href="/projects/add_project.html" title="Add Project">Add Project</a></li>
<li><a href="/projects/view_projects.html" title="View Projects">View Projects</a></li>
<li><a href="/projects/view_costs.html" title="Review Project Costs">Review Project Costs</a></li>
<li><a href="/projects/view_engineers.html" title="Project Distribution">Project Distribution</a></li>
<li><a href="/projects/add_document.html" title="Add Document">Add Document</a></li>
<li><a href="/projects/view_documents.html" title="View Documents">View Documents</a></li>
</ul>
</li>
<li><a href="/procurement/index.html" title="Procurement"><img src="/images/buttons/procurement.png" alt="Procurement" /> Procurement</a> <span class="navborder"> </span>
<ul>
<li><a href="/procurement/add_order.html" title="Add Order">Add Order</a></li>
<li><a href="/procurement/view_orders.html" title="View Orders">View Orders</a></li>
<li><a href="/procurement/approve_orders.html" title="Approve Orders">Approve Orders</a></li>
</ul>
</li>
<li><a href="/finance/index.html" title="Finance"><img src="/images/buttons/finance.png" alt="Finance" /> Finance</a> <span class="navborder"> </span>
<ul>
<li><a href="/finance/add_invoice.html" title="Add Invoice">Add Invoice</a></li>
<li><a href="/finance/view_invoices.html" title="View Invoices">View Invoices</a></li>
<li><a href="/finance/add_billed_invoice.html" title="Add Billed Invoice">Add Billed Invoice</a></li>
<li><a href="/finance/view_billed_invoices.html" title="View Billed Invoices">View Billed Invoices</a></li>
</ul>
</li>
<li><a href="/admin/index.html" title="Admin"><img src="/images/buttons/admin.png" alt="Admin" /> Admin</a> <span class="navborder"> </span>
<ul>
<li><a href="/admin/add_user.html" title="Add User">Add User</a></li>
<li><a href="/admin/view_users.html" title="View Users">View Users</a></li>
</ul>
</li>
</ul>
</div>

</body>
</html>

Of note:

1. Added width:100% to the submenu uls in order to get them to stretch full width. Centering them about their parent li would most likely cause the submenu items to wrap to the next line on the rightmost lis, and that would not be good. So from a functionality standpoint, if you're against just having the submenus drop straight down, justifying them left is probably your best bet.
2. Added a quick and dirty reset to the top of your CSS in order to get rid of all the padding:0 and margin:0 you had on many declarations.
3. I changed the functional mechanism of your submenus from visibility to display. Visibility has some cross-browser compatibility issues.

Hope that helps!

Badman3k

03-12-2009, 01:47 PM

Matt,

Smashing!

I know what you're referring to when it comes to the overflow. I think if I want this functionality I'll need to have a JS function to do this that will ensure that the overflow doesn't occur, but at least the css works so if JS were to be disabledf the menu still works.

I can't believe I didn't think to put the width: 100% in myself! Funny how we sometimes overlook the simple things.

I'm curious about the compatibility issues you refer to; I've not come across these issues, however I am currently only testing in FF and IE7, as I can ensure that my users only have these browsers. I will be looking to ensure that they work on all browsers for future proofing the system, so thanks for the heads-up.

Thanks for the help mate, really appreciate it.

BoldUlysses

03-12-2009, 02:16 PM

Badman3k

03-12-2009, 02:26 PM

I'm testing it in IE7 currently and it functions correctly :confused:(only a small issue with the css and a logo image that's 'too-big').

Doesn't surprise me much that it's broken in IE6 - most things are. Since I can ensure that the users are IE7 or above, it's safe to say that I won't have to rebuild the css with many, many hacks.

Still, thanks again for the help.

Rowsdower!

03-12-2009, 02:30 PM

No problem. :)

I'm surprised your site works in IE7; I thought IE restricted the use of :hover to link tags, and you have it on your list elements. Hmm. In any case, your site is broken in IE6, but this may not matter to you.

I've been trying to find some documentation on the cross-browser issues with visibility, and I'm not turning up anything. I seem to remember having some problems with it from that standpoint a while back, though. I think it might have had to do with the functionality of the JavaScript hack you have to use to get :hover to work on non-link elements in IE6. In your case, though, it looks like you could go either way.

That's what I always heard, but just FYI with a valid doctype (in my case I've only ever tried XHTML strict) I have had success in making IE7 use the hover attribute on the <li> items as well -- even on pages with validation errors. I have no idea if this works for IE6 and lower but for IE7 I can attest to that working...for whatever that's worth. :D

Luigino

08-19-2009, 07:07 AM

Hello everyone,

I'm trying to make something similar from this code inspiration on two row menus with the only difference to center both menus.... I figured using padding-left: 13.75em; on the first row menu ruins a bit everything... here the test code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Menu Tester</title>
<style type="text/css">
* {
border:0;
padding:0;
margin:0;
}
body
{
font-size: 0.75em;
color: #333;
}
#container
{
width: 75em;
margin-top: 1.0em;
margin-bottom: 1.0em;
margin-left: auto;
margin-right: auto;
padding: 1.0em 1.0em 1.0em 1.0em;
text-align: center;
}
#inside
{
margin: 0;
padding: 0.5em 0 0.5em 0;
background: #92b6ff;
text-align: center;
border: 0.2em dotted green;
}
#navcontainer
{
background: #92b6ff;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: 0.5em;
border: 0.2em dotted black;
height: 3.75em;
color: #333333;
width: 100%;
}
#menu
{
font: bold 1.083em verdana, arial, sans-serif;
margin-left: auto;
margin-right: auto;
position: relative;
width: 100%;
height: 3.75em;
border: 0.2em dotted darkblue;
}
#menu ul
{
/*margin-left: -0.083em;*/
margin: auto auto;
padding-left: auto;
padding-right: auto;
padding-left: 13.75em;
list-style-type: none;
/*position: relative;*/
border: 0.2em dotted magenta;
height: 1.75em;
}
#menu ul li
{
float: left;
padding-left: 0.167em;
border: 0.2em dotted brown;
}
#menu ul li a
{
text-decoration: none;
padding-left: 0.167em;
padding-right: 0.167em;
display: block;
height: 1.5em;
border: 0.2em dotted orange;
}
#menu ul li a:hover
{
display: block;
color: #ffa10d;
background: #fff;
border-bottom: 0.167em solid #025f8b;
}
#menu ul li ul
{
display: none;
position: absolute;
/*margin: auto auto;*/
/*left: 0em;*/
/*top: 1.75em;*/
height: 1.75em;
color: #333333;
background: #92b6ff; /* diagnostic background color */
border: 0.1em dotted red;
width: 100%;
}
#menu li:hover ul
{
display: block;
z-index: 100;
}
#menu li:hover ul li
{
background: none;
}
#menu li:hover ul li a:hover
{
color: #ffa10d;
background: #fff;
}
</style>
</head>
<body>
<div id="container">
<div id="inside"> 
<div id="navcontainer">
<div id="menu">
<ul>
<li><a href="" id="current">Home</a></li>
<li><a href="">Conoscere</a>
<ul>
<li><a href="">Cittadina</a></li>
<li><a href="">Statistiche</a></li>
<li><a href="">Sport</a></li>
<li><a href="">Associazioni</a></li>
<li><a href="">Informazioni Utili</a></li>
<li><a href="">Locali Pubblici</a></li>
<li><a href="">Galleria</a></li>
</ul>
</li>
<li><a href="">Servizi</a></li>
<li><a href="">Documenti</a>
<ul>
<li><a href="">Delibere di Consiglio</a></li>
<li><a href="">Delibere di Giunta</a></li>
<li><a href="">Regolamenti</a></li>
<li><a href="">Altri documenti</a></li>
</ul>
</li>
<li><a href="">Prg Online</a></li>
<li><a href="">Links</a></li>
<li><a href="">Contatti</a></li>
</ul>
<div>
</div>
</div>
</div>
</body>
</html>

if you have a suggest, it's appreciated... :-)

Thanks a lot
Ciao,
Luigi