...

View Full Version : help needed with Css styling a horizontal menu



FunkyORACLE
10-28-2008, 02:49 PM
Hi

I'm trying to build a menu with html/css. This menu will be dynamic based on a user that is logged in so the menu could change and display a different list but as a starter I've done just the very basic html and some css.

The HTML

<html>
<head>
<link rel="stylesheet" href="menu.css" type="text/css" media="screen" />
<!--<script type="text/javascript" src="jquery.js"></script> -->
<!-- <script type="text/javascript">
// Your code goes here
</script> -->
</head>
<body>
<div id"wrapper">
<ul>
<li>Data</li>
<ul>
<li>Manual Entry</li>
<li>Month End Returns</li>
<li>Surveys</li>
</ul>
<li>Reports</li>
<li>Admin</li>
</ul>
</div>
</body>
</html>

the css

ul li{
float: left;
list-style: none;
border:1px solid #888
}
ul li ul li {
list-style: none;
float:none;
}
I want the second li to be displayed in is own block and not have the "Data" li's border extend to disply the second li.

Hope this makes sense if not I'll try and expand on it.

Thanks in advanced

FunkyORACLE
10-28-2008, 02:51 PM
Forgot to mention that it needs to be IE5 + compatiable. I tried it in firefox + IE7 and it displays exactly the same.

bazz
10-28-2008, 03:02 PM
I don't think you'll get it to be backwards compatible as far as ie5. we're lucky to have it back as far as ie6 and even then, it needs JS.

You could probably do it with JS alone but, then, people with JS disabled will not be able to get around your site.

As far as fixing the border issue, are you 'speaking' of the Reports and Admin "li's"?

Then use a class like this




<ul>
<li class='data'>Data</li>
<ul>
<li>Manual Entry</li>
<li>Month End Returns</li>
<li>Surveys</li>
</ul>
<li>Reports</li>
<li>Admin</li>
</ul>



Now that you have differentiated between the default li and the data li, you can then style them separately.




ul li {
float: left;
list-style: none;
border:1px solid #888
}

ul li.data {
float: left;
list-style: none;
border:2px solid #444
}

ul li ul li {
list-style: none;
float:none;
}


I hope that gets you started. Take a look also at the htmlcss forum for the last few days. There are three other poeple who have been asking similar questions so the answers are sitting there for you - wihtout a delayed reply.

bazz

FunkyORACLE
10-28-2008, 03:17 PM
I realise that it would be hard to make it up to ie5 as I dont think ie6 recognises hover selectors etc.
I was hoping to use jQuery and mouseovers to show/hide my sub-menu's but to get the general layout.

Sorry about the confusing when I said second li's it should have been the second ul's
which is "Manual Entry","Month End Returns","Surveys"

What I want is for my top lever menu to have is "Data","Reports","Admin" then when a user hovers over the "Data" li it would then show/hide the sub-menu "Manual Entry","Month End Returns","Surveys" which should be directly under "Data".


Thanks for the quick response.

Samhain13
10-28-2008, 04:05 PM
I'd just like to point out that this might give you validation problems (and maybe some rendering issues across browsers):


<ul>
<li>Data</li>
<ul>
<li>Manual Entry</li>
<li>Month End Returns</li>
<li>Surveys</li>
</ul>
<li>Reports</li>
<li>Admin</li>
</ul>

The inner UL should be a child of an LI, like:

<ul>
<li>Something</li>
<li>
<ul>
<li>another thing</li>
</ul>
</li>
<li>Something Else</li>
</ul>

If you want that inner UL to have a title or something of the sort, you can always make use a P or a DIV inside the parent LI like so:

<li>
<p>Something about the list below:</p>
<ul>
<li>another thing</li>
</ul>
</li>

:)

bazz
10-28-2008, 05:07 PM
I'd just like to point out that this might give you validation problems (and maybe some rendering issues across browsers):


<ul>
<li>Data</li>
<ul>
<li>Manual Entry</li>
<li>Month End Returns</li>
<li>Surveys</li>
</ul>
<li>Reports</li>
<li>Admin</li>
</ul>



good catch Sahmain. :thumbsup:

OK FunckyOracle, if you want the flyout lists to be style differently from the parent li's then assign a class to the child ul



<ul>
<li>Data
<ul class='second_level'>
<li>Manual Entry</li>
<li>Month End Returns</li>
<li>Surveys</li>
</ul>
</li>
<li>Reports</li>
<li>Admin</li>
</ul>

bazz

FunkyORACLE
10-28-2008, 06:17 PM
well spotted Sahmain. I've now updated my code.

Bazz I've did what you suggested but I'm still seeing the inner UL as part of "Data"

This is my amended HTML

<html>
<head>
<link rel="stylesheet" href="menu.css" type="text/css" media="screen" />
<!--<script type="text/javascript" src="jquery.js"></script> -->
<!-- <script type="text/javascript">
// Your code goes here
</script> -->
</head>
<body>
<div >
<ul id="nav">
<li>Data
<ul id="nav_second_level">
<li>Manual Entry</li>
<li>Month End Returns</li>
<li>Surveys</li>
</ul></li>
<li>Reports</li>
<li>Admin</li>
</ul>
</div>
</body>
</html>

and my css file


#nav li{
float: left;
list-style: none;
border:1px solid #888
}
#nav_second_level li{
list-style: none;
float:none;
background-color: #00CCFF;
}
#nav ul li.data {
float: left;
list-style: none;
border:2px solid #444
}

I've attached a pic what I want is to have the inner ul directly under data for not to look like it is inside the same table cell.

Thanks again and thanks for helping a newbie.

FunkyORACLE
10-29-2008, 01:38 PM
bump it up...

Samhain13
10-29-2008, 02:27 PM
Try adding this to your CSS:


#nav_second_level {
margin-left : 0px ;
padding-left : 0px ;
}

That should take care of the default left margin/padding that browsers put on lists. You can adjust the values as you see fit.

If that doesn't work, try changing "#nav_second_level" to "#nav li.data ul".

FunkyORACLE
10-29-2008, 05:12 PM
Thank you thank you thank you Sahmain. The navigation bar is coming a long nicely. However, How can I make the length of my outter ul's independed of the inner ul's? I've attached a pic of what I have now. I hat the out ul's to stay the same legth as they originally were before the submenu appeared.

Thanks agin for your help.

This is my HTML:

<html>
<head>
<link rel="stylesheet" href="menu.css" type="text/css" media="screen" />
<!--<script type="text/javascript" src="jquery.js"></script> -->
<script type="text/javascript">
// Your code goes here
function ShowSubmenu(){
subMenuObj = document.getElementById('nav_second_level');
subMenuObj.style.left ='0px';
subMenuObj.style.display = 'block';
subMenuObj.style.bottom='0px';
}
function HideSubmenu(){
subMenuObj = document.getElementById('nav_second_level');
subMenuObj.style.left ='-10000px';
subMenuObj.style.display = 'none';
}
</script>
</head>
<body>
<ul id="nav">
<li onmouseover="ShowSubmenu();" onMouseOut="HideSubmenu();">Data
<ul id="nav_second_level">
<li>Manual Entry</li>
<li>Month End Returns</li>
<li>Surveys</li>
</ul></li>
<li>Reports</li>
<li>Admin</li>
</ul>
</body>
</html>

My CSS:

#nav li{
float: left;
list-style: none;
border:1px solid #888
margin-left : 0px ;
padding-left : 0px;
margin-left: 0px;
}
#nav_second_level {
margin-left : 0px ;
padding-left : 0px ;
}
#nav_second_level li{
list-style: none;
float:none;
background-color: #00CCFF;
margin-left : 0px ;
padding-left : 0px ;
}

jerry62704
10-29-2008, 05:27 PM
By default a div fits the content. You can specify widths to change that. If your outter div is 100&#37; and your inner div is 50% of that (or with absolute numbers), then the outter is bigger than the inner.

FunkyORACLE
10-29-2008, 05:32 PM
Sorry these are UL's I have removed the DIV now. Jerry I think the inner will be bigger than the outer. How could I get this type of effect?

I need my sub-menu to "float" above my page content as well instead of shiftting my page.

jerry62704
10-29-2008, 05:46 PM
Just an idea. Go to http://www.cssplay.co.uk/ and take one of the free menus he has there instead of reinventing the wheel. If you go to my site, (see link below) you will see exactly what you are after. I happened to chose the grahpical menu, but he has tons of choices available.

There are some things I don't care for, but not enough that I bother to change them. Just leave his tag line in the code and it's yours.

Samhain13
10-29-2008, 05:50 PM
One method I know of (and often use) is to make the inner UL "position: absolute". That way, the dimensions of that UL will be independent of its parent's dimensions (and vice-versa). If you give #nav_second_level "position: absolute", give it a width like, 300px and not give it a left and a top definition; it will stay right at the bottom of "data".

So you'll get something like this:


#nav_second_level {
margin-left : 0px ;
padding-left : 0px ;
position : absolute ;
width : 300px ;
}

If that UL appears too close to the word "Data" above it, you can add "margin-top: 10px ;" to separate that UL a bit.

Again, do not use top and left. Just adjust your margin-top and margin-left as necessary.

:)

FunkyORACLE
10-29-2008, 06:17 PM
Thanks Sahmain but the inner ul does not display under the "Data" Li.

My HTML

<html>
<head>
<link rel="stylesheet" href="menu.css" type="text/css" media="screen" />
<!--<script type="text/javascript" src="jquery.js"></script> -->
<script type="text/javascript">
// Your code goes here
function ShowSubmenu(){
subMenuObj = document.getElementById('nav_second_level');
//subMenuObj.style.left ='0px';
subMenuObj.style.display = 'block';
//subMenuObj.style.bottom='0px';
}
function HideSubmenu(){
subMenuObj = document.getElementById('nav_second_level');
//subMenuObj.style.left ='-10000px';
subMenuObj.style.display = 'none';
}
</script>
</head>
<body>
<ul id="nav">
<li onmouseover="ShowSubmenu();" onMouseOut="HideSubmenu();">Data
<ul id="nav_second_level">
<li>Manual Entry</li>
<li>Month End Returns</li>
<li>Surveys</li>
</ul>
</li>
<li>Reports</li>
<li>Admin</li>
</ul>
<br />
<p> just some text</p>
</body>
</html>

My CSS
[CODE]#nav li{
float: left;
list-style: none;
border:1px solid #888
margin-left : 0px ;
padding-left : 0px;
margin-left: 0px;
}
#nav_second_level {
margin-left : 0px ;
padding-left : 0px ;
position : absolute ;
width : 300px ;
}
#nav_second_level li{
list-style: none;
float:none;
background-color: #00CCFF;
margin-left : 0px ;
padding-left : 0px ;
}[[/ICODE]

I'll need to do some reading up on the "Absolute" property.

FunkyORACLE
10-29-2008, 06:19 PM
Sorry I have tried to attach a pic again but for 6 times now everytime I click "Manage attachments" I get the dreaded Miscor performed an illegal action and it shuts IE down.

Samhain13
10-29-2008, 06:31 PM
Yeah, a screenshot would have been good. But where does the UL go, exactly? Maybe we can work with just a description for now.

FunkyORACLE
10-29-2008, 06:47 PM
Yeah, a screenshot would have been good. But where does the UL go, exactly? Maybe we can work with just a description for now.
The pic finally uploaded I wanted the inner UL ("nav_second_level") to be under the "Data" like we had it before you sugested the position:"Absolute" etc.

Samhain13
10-29-2008, 06:58 PM
Right. Let's see what we can do about that... (will edit this post).

-- edit: --


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
#nav li {
float: left;
list-style: none;
border:1px solid #888 ;
margin-left : 0px ;
padding-left : 0px;
margin-left: 0px;
}

#nav_second_level {
margin-left : 0px ;
padding-left : 0px ;
position : absolute ;
}

#nav_second_level li{
list-style: none;
float:none;
background-color: #00CCFF;
margin-left : 0px ;
padding-left : 0px ;
}
</style>

<script type="text/javascript">
function ShowSubmenu(){
subMenuObj = document.getElementById('nav_second_level');
subMenuObj.style.display = 'block';
}
function HideSubmenu(){
subMenuObj = document.getElementById('nav_second_level');
subMenuObj.style.display = 'none';
}
</script>
</head>
<body>
<ul id="nav">
<li onmouseover="ShowSubmenu();" onMouseOut="HideSubmenu();">Data
<ul id="nav_second_level">
<li>Manual Entry</li>
<li>Month End Returns</li>
<li>Surveys</li>
</ul>
</li>
<li>Reports</li>
<li>Admin</li>
</ul>
</body>
</html>

I took the code from one of your previous posts. Added a DocType and removed a couple of lines from the JavaScript-- specifically those that define style.left and style.bottom.

FunkyORACLE
10-29-2008, 08:03 PM
Some IETester screen shots. I'm hoping to have it work like IE8 and FF3 all the versions show/hide the inner ul as expected. Any ideas why their is such a difference?
P.S I think I know why my IE kept crashing because I had IEtester open at the same time.

bazz
10-29-2008, 08:22 PM
This should get you started with FF and safari and ie6 because it now includes the necessary js for ie6.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mr Tourism™</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="pragma" content="no-cache" />

<link rel="stylesheet" href="http://www.example.net/controlpanel2.css" type="text/css" media="screen" />
<script type='text/javascript'>
sfHover = function() {
var sfEls = document.getElementById("taskbar_menu").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>

<style type='text/css'>

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


html,body {
padding :0
margin : 0;
font-size : 1em;
}


#Homemenu, ul#taskbar_menu { /* all lists */
width : 100%;
list-style-type : none;
background-color : #000;
/*background : url(/images/navbar.gif);*/
background : url('/images/taskbar_background.gif');
text-align : justify;
margin : 0;
float : right;
line-height : 30px;
}

#taskbar_menu a:link, #taskbar_menu a:visited, #taskbar_menu a:active, #taskbar_menu a:hover {
font-family: "Arial", verdana, sans-serif;
color : #000;
text-decoration : none;
display : block;
list-style-type : none;
background-color: inherit;/*7a0029;*/
border : 1px solid #000040;
border-top : 0;
border-bottom : 0;
font-size : 0.75em;
text-align : center;
font-weight : bold;

}


#taskbar_menu a:hover {
background: url(/images/HomeMenuHover.gif);
border-right : 1px solid #fff;
}


#taskbar_menu li { /* all list items */
float : left;
width: 10em; /* width needed or else Opera goes nuts */
margin-top : 0;
}



#taskbar_menu li img {
height : 31px;
width : 88px;
border: 0;
}



#taskbar_menu li ul { /* second-level lists */
position: absolute;
background-color: #000040;/*#bbbfdd;*/
color : #bbbfdd;
width: 10em;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
border-bottom : none;
padding : 0;
list-style-type : none;
}

#taskbar_menu li ul a:link, #taskbar_menu li ul a:visited, #taskbar_menu li ul a:active, #taskbar_menu li ul a:hover {
color : #bbbfdd;
background-color : #000040;/*#EED780;#d9b846;*/
}

#taskbar_menu li ul a:hover {
color : #000040;
background : none;
background-color : #bbbfdd;
border :0;
}

#taskbar_menu li ul ul { /* third-and-above-level lists */
margin: -1em 0 0 10em;
}

#taskbar_menu li:hover ul ul, #taskbar_menu li:hover ul ul ul, #taskbar_menu li.sfhover ul ul, #taskbar_menu li.sfhover ul ul ul {
left: -999em;
}

#taskbar_menu li:hover ul, #taskbar_menu li li:hover ul, #taskbar_menu li li li:hover ul, #taskbar_menu li.sfhover ul, #taskbar_menu li li.sfhover ul, #taskbar_menu li li li.sfhover ul { /* lists nested under hovered list items */
left : auto;
margin-top : 0px;
margin-left : 0px;
line-height : 18px;

}

#content {
clear: left;
color: #ccc;
}

</style>

</head>
<body>



<div id="Homemenu">
<ul id="taskbar_menu">
<li><a href='#'>Data</a>
<ul>
<li><a href='#'>record1</a></li>
<li><a href='#'>record2</a></li>
<li><a href='#'>record3</a></li>
</ul>
</li>
<li><a href='#'>Reports</a>
<ul>
<li><a href='#'>item1</a></li>
<li><a href='#'>item2</a></li>

<li><a href='#'>item3</a></li>
<li><a href='#'>item4</a></li>
<li><a href='#'>item5</a></li>
</ul>
</li>
<li><a href='#'>Admin</a>
<ul>

<li><a href='#' target='main'>stuff1</a></li>
<li><a href='#' target='main'>stuff2</a></li>
<li><a href='#' target='main'>stuff3</a></li>

<li></li>
</ul>
</li>
</ul>
</div>





I have edited this a few times sionce I first posted it. make sure you have the latest one, which I uploaded at about 1835 GMT today


bazz

FunkyORACLE
10-29-2008, 08:33 PM
Hi Bazz thanks for your reply but it does not seem to be formating the list.

bazz
10-29-2008, 08:57 PM
try it now. By the timing shown in the forum, it's likely you didn't get the newest version. It works in safari, FF and ie6. I am just about to upload it to my server to test it in browsershots.org.

bazz

FunkyORACLE
10-29-2008, 09:38 PM
It seems to work with IE7,FF3 and when I test it in IETester (IE5.5,6,7,8) all seem to work.

FunkyORACLE
10-30-2008, 10:06 AM
Bazz is my testing correct? can you also confirm whether it works in other browsers?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum