Jump to content

CSS Flyout menus


Recommended Posts

I'm having problems with a css based flyout menu. It works fine in FireFox but not IE 7 or IE 6. The menu simply does not appear.Here's the css:http://www.flatballphoto.co.uk/bjportfolio/style2.csshttp://www.flatballphoto.co.uk/bjportfolio/style2_ie.cssAnd here's the code:

<!-- START MENU -->	<div id="menu">	  <ul>		<li><a class="projects" href="#proj"> </a>		<!--[if lte IE 6]>		  <table><tr><td>		<![endif]-->		  <ul>			<li><a href="#">Project 1</a></li>			<li><a href="#">Project 2</a></li>			<li><a href="#">Project 3</a></li>			<li><a href="#">Project 4</a></li>		  </ul>		<!--[if lte IE 6]></td></tr></table><![endif]-->		</li>		<li><a class="portfolio" href="#port"> </a>		<!--[if lte IE 6]>		  <table><tr><td>		<![endif]-->		  <ul>			<li><a href="#">Project 1</a></li>			<li><a href="#">Project 2</a></li>			<li><a href="#">Project 3</a></li>			<li><a href="#">Project 4</a></li>		  </ul>		<!--[if lte IE 6]></td></tr></table><![endif]-->		</li>		<li><a class="cv" href="#cv"> </a></li>		<li><a class="contact" href="#cont"> </a></li>	  </ul>	</div>	<!-- END MENU -->

And here's the website:http://www.flatballphoto.co.uk/bjportfolio/index2.phpI based my code on this tutorial: http://www.cssplay.co.uk/menus/example_flyout.htmlCould anyone point out where i'm going wrong? I've looked at a thousand different flyout menus and i just can't see what i'm doing differently. I've tried all sorts of different techniques but non of them make the IE family happy. Everything seems to be in place and FF renders it excellently. So what do i need to do to make IE behave?

Link to post
Share on other sites

Hi!add this JavaScript tou your site:

<script type="text/javascript">	<!--		sfHover = function() {			var sfEls = document.getElementById("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>

And then extend your css with this:

#menu li.sfhover {...}

This is from "Son of Suckerfish Dropdowns", and I don't know if it will work good with that you use. But I recommend a swtich to "suckerfish" as it eliminates the need of "empty anchors/links" and a switch shouldn't be too difficult (eaven if there's a differense between "flyouts" and "dropdowns", but it seams that both have the same base).Hope that helped.Edit: Discovered that Suckerfish has an example with a "flýout"

Link to post
Share on other sites

Hi Sunshine,It is impossible to be just CSS if you want the menu to work in Internet Explorer - period. Internet Explorer 6 and below do not support the :hover pseudoclass on anything other than a link.Also, the Son of Suckerfish menus are not supported in Internet Explorer 5 on the Mac. If this is not a concern to you, don't bother. Most people would say screw it because MSIE 5 on the Mac has been discontinued, but I work in a school district and many of the computers (especially Mac OS 9) are stuck with it.I was also having problems in internet explorer with submenus and getting them to display one tier at a time, but I wrote my own JavaScript to fix it.If you still have trouble, let us know. There is a lot of talent here.DustinP.S.A clean menu can function properly with just this code:<ul id="something"><li><a href="">asdasd</a><ul><li><a href="">asda</a></li></ul></li></ul>In my opinion, cluttering of HTML is not recommended. (I.E. the table solution that was implemented for IE.)

Link to post
Share on other sites
It is impossible to be just CSS if you want the menu to work in Internet Explorer - period.
I beg to differ. Review the drop down and fly out menus at cssplay.co.uk and run them through a validator, even. They work if the install instructions and tutorials are adhered to.
Link to post
Share on other sites
I beg to differ. Review the drop down and fly out menus at cssplay.co.uk and run them through a validator, even. They work if the install instructions and tutorials are adhered to.
Yeah, i have no idea what i was doing wrong. But i'm happy enough with this solution, just need to get the website operational.
Also, the Son of Suckerfish menus are not supported in Internet Explorer 5 on the Mac. If this is not a concern to you, don't bother. Most people would say screw it because MSIE 5 on the Mac has been discontinued, but I work in a school district and many of the computers (especially Mac OS 9) are stuck with it.
I've gotten around this by making the main 'portfolio' link send the user to a page of links. So the quick navigation works for most users but people with older browsers will be able to access the content, just not so easily. It's not perfect, but i intend to revisit this site when i've improved, for now i just need to get this online and working!
Concerning the web page itself, it looks really good.Just noticed that when I resize the window, the bottom pic (footer) jumps a bit to the left, not centered with the rest of the page.Using IE6.
I'm aware of this, i'll sort IE 6 and below out when i've finished the rest of the site. Thanks for pointing it out anyways, and thanks for the compliment! :)By the way, how do people find the load time? It's my main concern at the moment.
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...