Hi,
I have a mouse rollover button. In addition to that effect (which I should've done with CSS, but now it's not the time) I want a drop down menu.
I was looking at the sample on this site:
<!-- m --><a class="postlink" href="http://www.htmldog.com/articles/suckerfish/dropdowns/example/bones1.html">http://www.htmldog.com/articles/suckerf ... ones1.html</a><!-- m -->
However, I want to integrate the mouse rolling over an image, not the way they have it (the mouse) rolling over text. Then my drop down menu will be text, like in their example.
So, how do I integrate this:
<ul id="nav">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"spa.htm">Percoidei</a>
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Remoras</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Tilefishes</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Bluefishes</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Tigerfishes</a></li>
</ul>
</li>
</ul>
with this:
<a href=http://www.webdeveloper.com/forum/archive/index.php/"spa.htm" target="_self"
onMouseOver="MM_swapImage('SpaR','','images/NavRollSpa.gif',1)"
onMouseOut="MM_swapImgRestore()">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/NavNormSpa.gif"
alt="Spa and Activities" name="SpaR"
width="57" height="33" border="0">
Thanks.You don't. You use CSS for your image swaps. You can do that a couple of ways - one is to have the whole li empty but to have a background set for it and a different background on hover.BonRouge, thank you, but that didn't solve my problem. How about something more simple than the code I posted and then I'll try to figure things out from there and plug-in the right coordinates. Let's say I have an image:
<img src=http://www.webdeveloper.com/forum/archive/index.php/"test.gif" name="test" width="50" height="20">
On mouse rollover I want to have drop down menu with text "LINK1" that will be 50X20 and will appear vertically, below the test.gif. LINK1 will have a hovering effect: when you hover above it -- the color of the text will change, and when you click on it, it will get you to LINK1.htm
Please post the CSS and the HTML code. Thanks.Something like this? (<!-- m --><a class="postlink" href="http://bonrouge.com/test/rollover.htm">http://bonrouge.com/test/rollover.htm</a><!-- m -->)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<style type="text/css">
ul, li {
margin:0;
padding:0;
list-style-type:none;
}
a {
text-decoration:none;
}
ul {
width:50px;
}
ul h2, li {
height:20px;
margin:0;
padding:0;
}
ul h2 img {
display:block;
}
ul h2 {
background-image:url(wine20b.jpg);
}
ul li:hover h2 img, ul li.sfhover h2 img {
display:none;
}
ul li ul {
display:none;
}
ul li:hover ul, ul li.sfhover ul {
display:block;
}
ul li ul li:hover, ul li ul li.sfhover {
background-color:#FF0000;
}
</style>
<script type="text/javascript">
//suckerfish//
sfHover = function() {
var sfEls = document.body.getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls.onmouseover=function() {
this.className+=" sfhover";
}
sfEls.onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
</head>
<body>
<ul id="nav">
<li><h2><img src=http://www.webdeveloper.com/forum/archive/index.php/"wine20a.jpg" alt="" /></h2>
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Red</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">White</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Pink</a></li>
</ul>
</li>
</ul>
</body>
</html>Thanks,
the example is what I was looking for, except I forgot to mention in the posting -- when the drop down menu shows, behind the letters will be a fill of some color, maybe a border too, but I'll try to customize that with the CSS code. Now I'll try to integrate the code with my code. And, one other thing came in mind. For all of my pages I have:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
and yours was different. Would that make difference?Yes - use the one you have. I use a Japanese character set (because I live in Japan and a lot of my pages use Japanese).I've been experimenting with it and I think there is a problem, because I have the button (along with other ones) placed in a table. So, on mouse rollover the drop down menu comes down but it pushes the table down too, which screws up the rest of the stuff in the table. I tried adjusting the table, but couldn't do well. Is there a way that that drop down menu hovers over the table and doesn't interfere with the rest of the stuff? (I mean without getting rid off the table.)I don't have time to explain (or test) right now, but you should be able to do it by setting the sub-menus to position:absolute. It might need some tweaking then to make it work properly in IE.
(Of course, the best thing is to do what you've already rejected - het rid of the tables (please read the article in my sig))you mean,
"read" the article on why tables is stupid? I'll read it. I've read other ones like that too and I'm sure you're right. I'm sure I wouldn't disagree if I knew clear CSS: but it's the learning curve with CSS that's taking me a long time.
About the drop-down menu: I can't make it the way I want it yet and best I think I'll post a link to the page that I'm having problems with. If you are busy, that's fine, my questions are to anyone on this forum. Thanks.Please check the internal CSS on this page:
<!-- m --><a class="postlink" href="http://www.e-travelbg.com/Drop_Down_Menu_Problem1.htm">http://www.e-travelbg.com/Drop_Down_Menu_Problem1.htm</a><!-- m -->
I'm not "like a day at the beach" with CSS and the code I was given -- I already kind of screwed up (by experimenting to get it the right way). Thanks.
1. I want the positioning of the Drop Down to be exactly below the word "SPA"
2. I want when the mouse hovers over the drop-down menu links, the text to turn orange.
Thanks.I'm okay with the width of the drop down menu. My text will eventually be longer, so the width is ok.I need help kinda with same thing,
my page is:
<!-- m --><a class="postlink" href="http://www.geocities.com/silvermicrecords">http://www.geocities.com/silvermicrecords</a><!-- m -->
somebody did the CSS for me. I want when you put mouse on artists or discography link, that drop down of links appears under it to click on. for artists i want a popup dropdown menu with link called
Entrigue
and page would be (entrigue.html)
under discography
Soup Kitchen
(soup.html)
I have no clue how to put this into the css code already in there. my friend was gonna do it but i think he misunderstood me cause he said he had to hack code so it show up in internet explorer and he was having trouble with that, but this thread looked similar to what i wanted. I just need to make sure drop down matches layout and look of navbar and design. i can pot the header.html code if anybody can show me how to put in put mouse on link, popup dropdown menu appears stuff. my website is listed so maybe that'll be enough for help
I have a mouse rollover button. In addition to that effect (which I should've done with CSS, but now it's not the time) I want a drop down menu.
I was looking at the sample on this site:
<!-- m --><a class="postlink" href="http://www.htmldog.com/articles/suckerfish/dropdowns/example/bones1.html">http://www.htmldog.com/articles/suckerf ... ones1.html</a><!-- m -->
However, I want to integrate the mouse rolling over an image, not the way they have it (the mouse) rolling over text. Then my drop down menu will be text, like in their example.
So, how do I integrate this:
<ul id="nav">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"spa.htm">Percoidei</a>
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Remoras</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Tilefishes</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Bluefishes</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Tigerfishes</a></li>
</ul>
</li>
</ul>
with this:
<a href=http://www.webdeveloper.com/forum/archive/index.php/"spa.htm" target="_self"
onMouseOver="MM_swapImage('SpaR','','images/NavRollSpa.gif',1)"
onMouseOut="MM_swapImgRestore()">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/NavNormSpa.gif"
alt="Spa and Activities" name="SpaR"
width="57" height="33" border="0">
Thanks.You don't. You use CSS for your image swaps. You can do that a couple of ways - one is to have the whole li empty but to have a background set for it and a different background on hover.BonRouge, thank you, but that didn't solve my problem. How about something more simple than the code I posted and then I'll try to figure things out from there and plug-in the right coordinates. Let's say I have an image:
<img src=http://www.webdeveloper.com/forum/archive/index.php/"test.gif" name="test" width="50" height="20">
On mouse rollover I want to have drop down menu with text "LINK1" that will be 50X20 and will appear vertically, below the test.gif. LINK1 will have a hovering effect: when you hover above it -- the color of the text will change, and when you click on it, it will get you to LINK1.htm
Please post the CSS and the HTML code. Thanks.Something like this? (<!-- m --><a class="postlink" href="http://bonrouge.com/test/rollover.htm">http://bonrouge.com/test/rollover.htm</a><!-- m -->)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<style type="text/css">
ul, li {
margin:0;
padding:0;
list-style-type:none;
}
a {
text-decoration:none;
}
ul {
width:50px;
}
ul h2, li {
height:20px;
margin:0;
padding:0;
}
ul h2 img {
display:block;
}
ul h2 {
background-image:url(wine20b.jpg);
}
ul li:hover h2 img, ul li.sfhover h2 img {
display:none;
}
ul li ul {
display:none;
}
ul li:hover ul, ul li.sfhover ul {
display:block;
}
ul li ul li:hover, ul li ul li.sfhover {
background-color:#FF0000;
}
</style>
<script type="text/javascript">
//suckerfish//
sfHover = function() {
var sfEls = document.body.getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls.onmouseover=function() {
this.className+=" sfhover";
}
sfEls.onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
</head>
<body>
<ul id="nav">
<li><h2><img src=http://www.webdeveloper.com/forum/archive/index.php/"wine20a.jpg" alt="" /></h2>
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Red</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">White</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Pink</a></li>
</ul>
</li>
</ul>
</body>
</html>Thanks,
the example is what I was looking for, except I forgot to mention in the posting -- when the drop down menu shows, behind the letters will be a fill of some color, maybe a border too, but I'll try to customize that with the CSS code. Now I'll try to integrate the code with my code. And, one other thing came in mind. For all of my pages I have:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
and yours was different. Would that make difference?Yes - use the one you have. I use a Japanese character set (because I live in Japan and a lot of my pages use Japanese).I've been experimenting with it and I think there is a problem, because I have the button (along with other ones) placed in a table. So, on mouse rollover the drop down menu comes down but it pushes the table down too, which screws up the rest of the stuff in the table. I tried adjusting the table, but couldn't do well. Is there a way that that drop down menu hovers over the table and doesn't interfere with the rest of the stuff? (I mean without getting rid off the table.)I don't have time to explain (or test) right now, but you should be able to do it by setting the sub-menus to position:absolute. It might need some tweaking then to make it work properly in IE.
(Of course, the best thing is to do what you've already rejected - het rid of the tables (please read the article in my sig))you mean,
"read" the article on why tables is stupid? I'll read it. I've read other ones like that too and I'm sure you're right. I'm sure I wouldn't disagree if I knew clear CSS: but it's the learning curve with CSS that's taking me a long time.
About the drop-down menu: I can't make it the way I want it yet and best I think I'll post a link to the page that I'm having problems with. If you are busy, that's fine, my questions are to anyone on this forum. Thanks.Please check the internal CSS on this page:
<!-- m --><a class="postlink" href="http://www.e-travelbg.com/Drop_Down_Menu_Problem1.htm">http://www.e-travelbg.com/Drop_Down_Menu_Problem1.htm</a><!-- m -->
I'm not "like a day at the beach" with CSS and the code I was given -- I already kind of screwed up (by experimenting to get it the right way). Thanks.
1. I want the positioning of the Drop Down to be exactly below the word "SPA"
2. I want when the mouse hovers over the drop-down menu links, the text to turn orange.
Thanks.I'm okay with the width of the drop down menu. My text will eventually be longer, so the width is ok.I need help kinda with same thing,
my page is:
<!-- m --><a class="postlink" href="http://www.geocities.com/silvermicrecords">http://www.geocities.com/silvermicrecords</a><!-- m -->
somebody did the CSS for me. I want when you put mouse on artists or discography link, that drop down of links appears under it to click on. for artists i want a popup dropdown menu with link called
Entrigue
and page would be (entrigue.html)
under discography
Soup Kitchen
(soup.html)
I have no clue how to put this into the css code already in there. my friend was gonna do it but i think he misunderstood me cause he said he had to hack code so it show up in internet explorer and he was having trouble with that, but this thread looked similar to what i wanted. I just need to make sure drop down matches layout and look of navbar and design. i can pot the header.html code if anybody can show me how to put in put mouse on link, popup dropdown menu appears stuff. my website is listed so maybe that'll be enough for help