Jump to content

Need Help Creating Pop-up Menu

gifboy99

By gifboy99
in CSS

Recommended Posts

gifboy99 Newbie

gifboy99

Posted
Posted

What I'm trying to do is create a menu that appears when the cursor is placed over an element. The problem that I'm having is that the CSS code that I'm using won't work properly with IE7. I've included the code that I'm using so you can try it for yourself and see what I mean:(edit: Here's a page to show the code in action. Notice that in IE7 it will stretch the div box, an undesired action. What I want is for it to float over the rest of the page like it does in Firefox.)

<html><head><title>LBF test page</title><script language="Javascript">function visible(id){id.style.visibility="visible";id.style.position="relative";}function hidden(id){id.style.visibility="hidden";id.style.position="absolute";}</script><style type="text/css">body {font:12pt Times New Roman;}.nav1 {font-size:16pt; width:90%; height:35px; border:solid 1px black; background-color:#7298bc;}.nav2 {width:200px; height:100%; background-color:#7298bc; float:left; border-right:solid 1px black;}.container {width:90%; height:600px; border:solid 1px black; border-top:none; background-color:white; text-align:left;}div{padding:0; space-h:0;}.navbar{position: relative;width:80px;height:35px;background-color:#dfdfdf;font: 15px helvetica;padding: 0px;text-align:center;z-index: 2;}.dropmenu{position: absolute;top: 0px;left: 0px;width: 100px;background-color: #cccccc;visibility: hidden;z-index: 3;border: solid 1px black;text-align: left;cursor: pointer;padding: 0px;}.item{font: 11px helvetica;cursor:pointer;}.item:hover{background-color: #0000ff;color: #ffffff;padding: 0px;text-decoration:none;}a.item{color: #000000;text-decoration: none;}a.item:hover{color: #ffffff;}div.item{font: 15px helvetica;width: 97px;padding: 0px;padding-left: 3px;cursor:pointer;}div.item:hover{background-color: blue;color: #ffffff;}.menu-wrapper{width: 300px;height:50px;background-color: green;overflow: hidden;}</style></head><body bgcolor=#0c7cc6><center><div><div class="nav1"><div class="navbar" onmouseover="visible(dropmenu1)"onmouseout="hidden(dropmenu1)">File</div><div class="dropmenu" id="dropmenu1"onmouseover="visible(dropmenu1)"onmouseout="hidden(dropmenu1)"><a href="link.html" class="item"><div class="item">Link 1</div></a><a href="link.html" class="item"><div class="item">Link 2</div></a><a href="link.html" class="item"><div class="item">Link 3</div></a><a href="link.html" class="item"><div class="item">Link 4</div></a><a href="link.html" class="item"><div class="item">Link 5</div></a><a href="link.html" class="item"><div class="item">Link 6</div></a></div></div><div class="container"><div class="nav2"><br /><span style="margin-left:15px;">Navigation for the side.</span></div><br /><div style="margin-left:220px; width:100%">Hi-ho!  Hi-ho!  It's off to work we go!<br /></div></div></div></center></body></html>

I really want to find something that will work in both Firefox and IE7. (I have a suspicion that some Javascript coding may be the answer, but I haven't learned Javascript yet.)Any help would be much appreciated.edit: I thought a picture might help explain things a bit better:menu_problem.jpg

Link to comment
Share on other sites
mmcspadden Newbie

mmcspadden

Posted
Posted

I'll be honest, I only read part way through your code, but I can tell you as someone who uses pop-down and pop-out (i'm sure pop-up would be no trouble) most CSS menus that work in all the browsers make use of a list <ul> <li> etc. Also you do not need any Javascript to do this. You can add more animation to it using Javascript, but a simple pop-out menu can be done just fine in CSS. Both examples below work fine in IE7 and FirefoxYou are welcome to check out the code on my site, which ishttp://www.anvilsmithtech.com/scripts/menu.cssor you could get the original one from Steve Gibson which is what I started with and then heavily modified. http://www.grc.com/mainmenu.css

Link to comment
Share on other sites
thescientist w3schools Guru

thescientist

Posted
Posted

Yeah, accomplishing the task with CSS is a great way to ensure that you get optimal cross-browser functionality.

Link to comment
Share on other sites
  • 2 weeks later...
gifboy99 Newbie

gifboy99

Posted
  • Author
Posted
hi,Please replace visible funciton with the below given code and check.Hope it will work fine.function visible(id){id.style.visibility="visible";id.style.position="absolute";id.style.top="40px";id.style.left="480px";}
Unfortunately, that won't work because the position of the menu is not static. The menu (as a whole) is always centered on the page, therefore, the position of the menu changes depending on the screen size that the visitor is using. I know that if I were to have the menu aligned to the left it would make things much easier, as then I would be able to specify an absolute location for each sub-menu without having to worry about screen size, but I'd really like to get a centered menu working.I haven't had much luck so far with the CSS that Vin_Tanner supplied, but I'm still hoping there might be something helpful in there.I've decided to post a picture to help explain the situation a little more clearly:menu_problem.jpg
Link to comment
Share on other sites
shadowayex Invested Member

shadowayex

Posted
Posted

Hello gif.I normally don't just hand out code, but this is rather complex. I honestly just wrote something like this myself and just now got the bugs out-ish. If you would like to see me code, let me know. As for tips, I'll hand those out now.Now, I'm not saying your way is wrong, but I've got some advice that may make your life easier.One: Use <ul> instead of divs.Two: Use display: none; to hide and display: block; to show, instead of the visibility property.Three: This could be written pure CSS for full compatibility. Instead of mouseover and mouseout, use :hover pseudoclass.These methods should help you greatly. Like I said, if you would like to see my example, I can post the code and you can play with it all you want, as long as you keep the warnings in tact.

Link to comment
Share on other sites
  • 2 weeks later...
gifboy99 Newbie

gifboy99

Posted
  • Author
Posted
Are you using IE6? There are some overflow:visible bugs in that browser.http://www.aspektas.com/blog/ie6-overflowvisible-bug
No, I'm using IE7. The problem has something to do with the CSS coding, as the javascript function works just fine.
Hello gif.I normally don't just hand out code, but this is rather complex. I honestly just wrote something like this myself and just now got the bugs out-ish. If you would like to see me code, let me know. As for tips, I'll hand those out now.Now, I'm not saying your way is wrong, but I've got some advice that may make your life easier.One: Use <ul> instead of divs.Two: Use display: none; to hide and display: block; to show, instead of the visibility property.Three: This could be written pure CSS for full compatibility. Instead of mouseover and mouseout, use :hover pseudoclass.These methods should help you greatly. Like I said, if you would like to see my example, I can post the code and you can play with it all you want, as long as you keep the warnings in tact.
I'll try tips 2 and 3 first and see how things go. I'm not really sure about how well the <ul> tag would work for a vertical drop-menu, but I'll keep it in mind.I'll get back to you if I need to see your code. Thanks!
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...