September 23, 200817 yr Hi guys I'm looking to achieve a particular effect. I want to create a complete colour overlay when a menu item is hovered. For example, if you were to hover the mouse over an item of a menu on a website, the entire thing apart from the menu, becomes hidden under another colour so you can only see the menu items. Eventually I want this to be part transparent, but lets deal with this issue first! Thanks in advance ST
September 23, 200817 yr If all you want to do is have a rollover effect on a menu then this can be done pretty easily using the a:hover I would built your menu using the <ul> & <li> tags and the styling it using CSS. Here is an example and tutorial
September 23, 200817 yr Are you aiming for a similar effect to the Lightbox image gallery, where everything outside the central box is covered with a layer of colour? I think that sort of thing is only possible with Javascript. Probably. Actually, the more I think about it, the more I suspect it might be possible, if your menu was absolutely positioned... I'd have to have a play around and see what I could come up with. Needless to say, it probably wouldn't work on all browsers (i.e. not IE6 or below). I'll have a play and let you know if I come up with a solution!
September 23, 200817 yr Ok, my conclusion so far is... no. At least, not just with CSS. The problem I encountered was due to the hierarchy of the HTML elements. Essentially, you want a :hover on one element to affect the properties of an element outside of its scope, which isn't currently possible unless you use Javascript. Take the following code as an example: <!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> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <title></title> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/> <style type="text/css"> body {background: #303030;} #page {width: 80%; margin: 0 auto; background: white;} #header {background: #FFB740; font-size: 4em; text-align: center; letter-spacing: -0.06em; height: 100px; line-height: 100px;} #content {padding: 10px 10px 10px 200px; position: relative;} #menu {position: absolute; top: 10px; left: 10px; width: 180px; background: #f0f0f0;} #menu ul {list-style-type: none; padding: 10px; margin: 0;} #menu ul li {background: #A3FFA4; margin: 2px; line-height: 2em; padding: 0 10px;} #menu .cover {display: none;} #menu:hover .cover {display: block; background: #606060; width: 100px; height: 100px;} #footer {background: #465BFF; height: 50px; line-height: 50px; text-align: center; color: #ffffff;} </style> </head> <body> <div id="page"> <div id="header"> Header </div> <div id="content"> <h1>Page title goes here</h1> <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p> <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p> <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p> <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p> <div id="menu"> <h2>Navigation</h2> <ul> <li>Menu item 1<span class="cover"></span></li> <li>Menu item 2</li> <li>Menu item 3</li> <li>Menu item 4</li> <li>Menu item 5</li> <li>Menu item 6</li> </ul> </div> </div> <div id="footer"> Footer here </div> </div> </body> </html> You'll see that I tried to put an element inside one of the menu items, with the aim that when you hover over it that span would become visible. The problem with that is to do with getting that internal element to know the size of the screen rather than just its parent (i.e. #menu). You can get it to position relative to the parent, but not to the parent's parent. Then you've got the problem of getting that element to appear underneath the menu, which ought to be possible with something like layers or z-order or something, but those sort of techniques aren't guaranteed and may not even adhere to web standards either (feel free to correct me if I'm wrong). There are two solutions I can think of, but both of them involve Javascript in some form or another. One option is to use a similar approach to what's used in image galleries like Lightbox, which use Javascript to find out the dimensions of the viewport and position things relative to that. Libraries like Mootools and suchlike probably provide all the code you'd need to make that happen. The only other alternative would be to assign literally everything a particular class, and when you hover over the menu use some inline Javascript to change the properties of that class so that it's all given a particular background colour. Not brilliant, and it would be very messy, but it would work. Sorry, I think I've written an essay again... hope you can glean something from it!!
September 24, 200817 yr Author Matt What a reply! Thanks! Yes, the effect I'm looking for is very similar to the lightbox effect. I have a menu, and when it is hovered over I want everything below it to fade to black 40% opacity. However, because this site is commercial and SEO is a high priority, I'm trying to avoid long winded coding etc. If it is not possible to do then I might find an alternative to this. I thought that something could be done with z-index, but like you said, I'm not too sure where we stand on standards with that. Never the less, I shall persist and have a play with the example you posted! If you have any more inspiration please let me know! Thanks once again ST
September 24, 200817 yr One more thing you may want to look into. If you have a div block right at the bottom of your page, set with CSS to be absolutely positioned, it'll appear relative to the page and will appear on top of everything else. If you set this to be invisible to begin with, and then when you hover over the menu change the class via some inline Javascript, you might be able to give the effect of making it cover the whole screen. It's a bit of a cludge, but it might work. It does however rely on a fixed width site design and that your window isn't massively tall. #coverBox {dislplay: none;} .cover {display: block; position: absolute; top: 0; left: 0; width: 800px; height: 1000px; background: url(transpic.png) repeat;} ... <div id="menu" onmouseover="document.getElementById('coverBox').className='cover';" onmouseout="document.getElementById('coverBox').className='';"> <ul> ... </ul> </div> ... <div id="coverBox"></div> I think that ought to work, more or less. Of course, that would also cover the menu, so you would then have to figure out a way of either bringing the menu to the top or recreating it within the coverBox div so you interact with that instead of the actual menu.
September 26, 200817 yr I'm sure I saw a jQuery plug-in that does this (ie. covers rest of page or what not) when I was browsing their plug-in list, so check it out.
September 29, 200817 yr Because this site is commercial and SEO is a high priority, I'm trying to avoid long winded coding etc. I think things like a lightbox effect are usually pretty simple - just put everything you want effected in an appropriately named div, change the class of the 'trigger' element and have a reference to the script. It wouldn't effect SEO in any way and would only take the most minor of XHTML tweaks. At least it was that simple when I used a lightbox script or I wouldn't have coped!
Create an account or sign in to comment