PDA

View Full Version : Help with CSS flyout menus..



x3ro
Dec 11th, 2008, 03:02 AM
I've been working on this page, and even got a ton of help here on CodingForums to get my layout fixed up for IE6, which is much appreciated..

The next project I'm trying to tackle is a multi-level vertical flyout menu...

If you look at this link:

http://www.phoenixcis.net/~x3ro/subthump/index.html

You'll see the tons of options on the left.

I've been searching css menus left and right, and just can't wrap my head around them. I even found a tutorial on one, and followed it to the T, and still a no go.

Anyone have a lot of experience with these that could help me out???

masterofollies
Dec 11th, 2008, 04:55 AM
Here you go,

Is this what you are looking for?

http://www.tanfa.co.uk/css/examples/menu/vs3.asp
(Look at the Stage 1, Stage 2, etc)

The tutorial for it is here
http://www.seoconsultants.com/css/menus/tutorial/

Excavator
Dec 11th, 2008, 07:29 AM
Hello again x3ro,
I hate to sound like a broken record but have you tried running this latest version through the validator?

Major Payne
Dec 11th, 2008, 08:54 AM
Menus - Multi-Level - Fly line (http://www.cssplay.co.uk/menus/)
[/URL]

[URL="http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fwww.phoenixcis.net%2F~x3ro%2Fsubthump%2Findex.html"]One CSS Error (http://www.cssplay.co.uk/menus/tutorial.html)
7 HTML Errors (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.phoenixcis.net%2F~x3ro%2Fsubthump%2Findex.html) Just missing tags.

Nice clean page. And no tables used for layout. Like it.

x3ro
Dec 11th, 2008, 01:45 PM
Thank you all.

masterofollies - thanks for the links. I'll check them out when I get home from work and can play with them..

Excavator - I didn't validate it yet :( I knew I should have!

That missing <li> could be the whole reason the flyouts weren't working!

Major Payne - Thanks. I ran it through validator as soon as I saw Excavator's post. He was a big help in getting my layout problems I was having fixed. The CSS error is just a missing css file that the HTML is calling for. It was for the popout menu CSS, but since I'm having problems, I never created the popout.css.. hahah..

I did have a look at a ton of those menus on CSS Play, and those were what I was trying to use, but couldn't get working. I could just be because of the missing HTML tags though.

x3ro
Dec 12th, 2008, 02:30 AM
Here we go guys... Here's the latest!

http://www.phoenixcis.net/~x3ro/subthump/index.html

Validated CSS and (x)HTML, no errors ;)

I re-studied nested lists, and figured out what I did wrong. I notched it down to the original list without the sub menus, and then added some sub menus to the Chevy/GMC..

Then I followed the CSS menu tutorial and got it working :) I'm so happy!

Only thing I see goofy now is that in IE7, whenever I pop out the Chevy/GMC menu, if I go straight down to the Dodge menu, it moves to the right a little bit until I hover off of it and onto another piece of menu. Why's this happening?

Don't have IE6 around to test in. Will test at work first thing in the morning.

abduraooft
Dec 12th, 2008, 09:56 AM
Only thing I see goofy now is that in IE7, whenever I pop out the Chevy/GMC menu, if I go straight down to the Dodge menu, it moves to the right a little bit until I hover off of it and onto another piece of menu. Why's this happening?

Just have a try by

div#ddblueblockmenu ul ul,
div#ddblueblockmenu ul li:hover ul ul{
/*display: none;*/
visibility:hidden;
}

div#ddblueblockmenu ul li:hover ul,
div#ddblueblockmenu ul ul li:hover ul {
/*display: block;*/
visibility:visible;
}

x3ro
Dec 12th, 2008, 05:09 PM
Just have a try by

div#ddblueblockmenu ul ul,
div#ddblueblockmenu ul li:hover ul ul{
/*display: none;*/
visibility:hidden;
}

div#ddblueblockmenu ul li:hover ul,
div#ddblueblockmenu ul ul li:hover ul {
/*display: block;*/
visibility:visible;
}

Thanks,

I'll try that when I get home from work.

The other problem now is that the menu is not working at all in IE6 on Win XP SP2...

Is there another way other than calling a *.htc file to make this menu work on IE6??

BoldUlysses
Dec 12th, 2008, 05:31 PM
Yes, but you'll still need some JS to make the :hover pseudo class work on anything but an anchor tag in IE6.

The suckerfish dropdown tutorial (http://www.alistapart.com/articles/dropdowns) has some Javascript that's a little more low-profile than that in an *.htc file.

abduraooft
Dec 12th, 2008, 05:36 PM
Is there another way other than calling a *.htc file to make this menu work on IE6?? Yes, and I prefer this way. (first take a backup)
1)Remove all your conditional comments
2)Add a script like

<script type="text/javascript">
startList = function() {

// code for IE
if(!document.body.currentStyle) return;
var subs = document.getElementsByName('submenu');
for(var i=0; i<subs.length; i++) {
var li = subs[i].parentNode;
if(li && li.lastChild.style) {
li.onmouseover = function() {
this.lastChild.style.visibility = 'visible';
}
li.onmouseout = function() {
this.lastChild.style.visibility= 'hidden';
}
}
}
}
window.onload=startList;
</script> inside your head instead
3)Add a name to your anchors having a sub menu like

<li><a href="#" name="submenu">Chevy/GMC</a>
<ul>
<li><a href="#">Corvette</a></li>
<li><a href="#" name="submenu">Silverado/Sierra</a>
<ul>
<li><a href="#">Crew Cab</a></li>
<li><a href="#">Extended Cab</a></li>
<li><a href="#">Regular Cab</a></li>
</ul>
</li>
</ul>
</li>
4)Add the highlighted in to your layout.css

#ddblueblockmenu li {
position: relative;

}
* html #ddblueblockmenu li ,* html #ddblueblockmenu li a{
height:1%;
}

Let me know if this doesn't work (after uploading the changes)

d1wm
Dec 13th, 2008, 12:52 AM
Hi guys. Great discussion. Would anyone be interesting in doing some custom flyout menus for some of my sites? Hope all is well. Cheers and happy holidays - Derek

x3ro
Dec 13th, 2008, 02:04 AM
Yes, and I prefer this way. (first take a backup)
1)Remove all your conditional comments
2)Add a script like

<script type="text/javascript">
startList = function() {

// code for IE
if(!document.body.currentStyle) return;
var subs = document.getElementsByName('submenu');
for(var i=0; i<subs.length; i++) {
var li = subs[i].parentNode;
if(li && li.lastChild.style) {
li.onmouseover = function() {
this.lastChild.style.visibility = 'visible';
}
li.onmouseout = function() {
this.lastChild.style.visibility= 'hidden';
}
}
}
}
window.onload=startList;
</script> inside your head instead
3)Add a name to your anchors having a sub menu like

<li><a href="#" name="submenu">Chevy/GMC</a>
<ul>
<li><a href="#">Corvette</a></li>
<li><a href="#" name="submenu">Silverado/Sierra</a>
<ul>
<li><a href="#">Crew Cab</a></li>
<li><a href="#">Extended Cab</a></li>
<li><a href="#">Regular Cab</a></li>
</ul>
</li>
</ul>
</li>
4)Add the highlighted in to your layout.css

#ddblueblockmenu li {
position: relative;

}
* html #ddblueblockmenu li ,* html #ddblueblockmenu li a{
height:1%;
}

Let me know if this doesn't work (after uploading the changes)

Howdy,

I re-uploaded the pages with the changes you showed me:

http://www.phoenixcis.net/~x3ro/subthump/index.html

I don't have IE6 at home to test, does anyone here that could check it for me?

I ran the HTML back through the validator and got a bunch of errors related to the script.

abduraooft
Dec 13th, 2008, 04:47 AM
I re-uploaded the pages with the changes you showed me:

http://www.phoenixcis.net/~x3ro/subthump/index.html

I don't have IE6 at home to test, does anyone here that could check it for me? You could use IE Tester (http://www.my-debugbar.com/wiki/IETester/HomePage)!

btw, when we toggle the visibility of the elements in the script

li.onmouseover = function() {
this.lastChild.style.visibility = 'visible';
}
li.onmouseout = function() {
this.lastChild.style.visibility= 'hidden';
}
the corresponding CSS should also be based on visibility, as suggested in my first post.

x3ro
Dec 13th, 2008, 05:24 AM
You could use IE Tester (http://www.my-debugbar.com/wiki/IETester/HomePage)!

btw, when we toggle the visibility of the elements in the script

li.onmouseover = function() {
this.lastChild.style.visibility = 'visible';
}
li.onmouseout = function() {
this.lastChild.style.visibility= 'hidden';
}
the corresponding CSS should also be based on visibility, as suggested in my first post.

Ahhh. I see now. Tried it, and it works, only problem now is there's gaps between the lists (using IETester to view it).. For example, Chevy/GMC (gap) Dodge (gap) etc..etc..

x3ro
Dec 14th, 2008, 03:22 PM
Any help on getting the gaps out of the menu on IE6?