Closed Thread Icon

Topic awaiting preservation: Holizontally Slide Menu Problem. Pages that link to <a href="https://ozoneasylum.com/backlink?for=8786" title="Pages that link to Topic awaiting preservation: Holizontally Slide Menu Problem." rel="nofollow" >Topic awaiting preservation: Holizontally Slide Menu Problem.\
 
Author Thread
Hiroki
Paranoid (IV) Inmate

From: NZ
Insane since: Dec 2002

 posted posted 07-29-2003 05:37

Hi, guys. How are you?
It has been freezing here.
A lot of people might disagree with me cuz it is over 5 degrees at the moment anyway.
For me, just too cold...

Well, would you give me your hands, please?
I am trying to make sliding menu stuff.
I made a simple small menu. If user onmouse, a couple of links slides holizontally.
You can find my upload script here.
Please click the link and try to use it. Looking fine to me first. But not good at all.

The problem is:

quote:
When I try to click those links, just impossile to do it. All links desappers somewhere.... And I have quite no idea why it gets thicker line on the right hand side of menu.....



Would you know something about this? Please tell me if you do.
All right. Looking forward to hearing from you, guys.
Cya.

Hiroki Kozai
mas
Paranoid (IV) Inmate

From: the space between us
Insane since: Sep 2002

 posted posted 07-29-2003 08:31

mhm....what did you set on mouseout?

elysiumart
quisja
Paranoid (IV) Inmate

From: everywhere
Insane since: Jun 2002

 posted posted 07-29-2003 11:10

First up, use document.getElementById(elmnt) instead of document.all(elmnt), else it doesn't work at all in mozilla.
Then this bit:
onmouseout="hidemenu('favorite')"
is causing your problem. instead put
onclick="hidemenu('favorite')"
in each <a> tag surrounding each food.
This will give you functionality similar to my site, which i presume is the kind of effect you are looking for.
HZR
Bipolar (III) Inmate

From: Cold Sweden
Insane since: Jul 2002

 posted posted 07-29-2003 15:01

Build it with an unordered list instead.



[This message has been edited by HZR (edited 07-29-2003).]
Hiroki
Paranoid (IV) Inmate

From: NZ
Insane since: Dec 2002

 posted posted 07-30-2003 01:19

Hi, guys. How are you?
Many many thanks for your replies.
quisja:

I changed my code like you told me.
Here is my code and uploaded file:

code:
<html>

<head>

  <style>

    body {

           font-family: arial;

         }





    a{

          color: #fa7dcb;

          text-decoration: none;

         

         }



     a:hover{

              color: #9900ac;

            }



    td.sp{

             background: #eee;

          }



    table{

             background: #ccc;

          }



     td.menu{

            background: #ddd; 

             }



     table.menu{

            visibility: hidden;

            position: absolute;

          }

  </style>

  <script type="text/javascript">

    function showmenu(elmnt){



         document.getElementById(elmnt).style.visibility = "visible"



            } /*End of Fun*/



    function hidemenu(elmnt){



         document.getElementById(elmnt).style.visibility="hidden"



            } /*End of Fun */

  </script>

</head>

<body>

<h3>Hiroki's first Drop Down</h3>

<table>

<tr><td class="sp" onmouseover = "showmenu('favorite')" ><a href="#">My favorite Food</a></td>

<td><table id="favorite" class="menu">

        <tr><td class="menu"><a href="#" onclick="hidemenu('favorite')">Udon</a></td></tr>

        <tr><td class="menu"><a href="#" onclick="hidemenu('favorite')">Rice</a></td></tr>

        <tr><td class="menu"><a href="#" onclick="hidemenu('favorite')">Natto</a></td></tr>

        <tr><td class="menu"><a href="#" onclick="hidemenu('favorite')">Ham</a></td></tr>

        <tr><td class="menu"><a href="#" onclick="hidemenu('favorite')">Okonomiyaki</a></td></tr>

        </table>

  </td>

</tr>

</table>

</body>

</html>



This was great cuz I could click on new links after onmouse main menu.
But I just wonder how to make my sublink disapper when I mouseout.
In that way, links will just sit there forever unless user actually clicks it, won't it?
What I'd like to achieve is something like this interface.
Would you give me your words, please.
Have a good day, mate.
Cya.




Hiroki Kozai
Archonian
Nervous Wreck (II) Inmate

From: Sweden, Malmoe
Insane since: Jan 2003

 posted posted 07-30-2003 01:33

The page you referred to, the one you were inspired by, doesn't actually close the menu on onmouseout.
And do you want your submenu to be shown on the right side of the menu-title or underneith it?

When I looked at it, it didn't come underneith it, but try changing your source-code to this(source-code after the </h3>-tag):

<table>
<tr>
<td class="sp" onmouseover = "showmenu('favorite')" ><a href="#">My favorite Food</a></td>
<table id="favorite" class="menu">
<tr><td class="menu"><a href="#" onclick="hidemenu('favorite')">Udon</a></td></tr>
<tr><td class="menu"><a href="#" onclick="hidemenu('favorite')">Rice</a></td></tr>
<tr><td class="menu"><a href="#" onclick="hidemenu('favorite')">Natto</a></td></tr>
<tr><td class="menu"><a href="#" onclick="hidemenu('favorite')">Ham</a></td></tr>
<tr><td class="menu"><a href="#" onclick="hidemenu('favorite')">Okonomiyaki</a></td></tr>
</table>
</tr>
</table>

or into this:

<table>
<tr>
<td class="sp" onmouseover = "showmenu('favorite')" ><a href="#">My favorite Food</a></td>
</tr><tr>
<td><table id="favorite" class="menu">
<tr><td class="menu"><a href="#" onclick="hidemenu('favorite')">Udon</a></td></tr>
<tr><td class="menu"><a href="#" onclick="hidemenu('favorite')">Rice</a></td></tr>
<tr><td class="menu"><a href="#" onclick="hidemenu('favorite')">Natto</a></td></tr>
<tr><td class="menu"><a href="#" onclick="hidemenu('favorite')">Ham</a></td></tr>
<tr><td class="menu"><a href="#" onclick="hidemenu('favorite')">Okonomiyaki</a></td></tr>
</table>
</td>
</tr>
</table>

I don't know how far this will go in browser-compatibility but at the end, just above your </script>-tag you could put:
document.onmousedown=new Function("if(event.srcElement.className != 'sp' && event.srcElement.className != 'menu'){hidemenu('favorite');}");

This would cause the menu to hide on a mouseclick outside the menu, if it works as planned.
This method could only be IE-compatible.

[This message has been edited by Archonian (edited 07-30-2003).]
Hiroki
Paranoid (IV) Inmate

From: NZ
Insane since: Dec 2002

 posted posted 07-30-2003 01:40

Hi, many thanks for your reply.
Well, I want to make nested link like that link.
When I mouseover root menu, dropdown menu comes underneath it, right?
Then each submenu has a couple of sub-sub links. It should slide to the right hand side of sub menu. Would you get what I'd like to achieve???
Looking forward to hearing from you.


Hiroki Kozai
Archonian
Nervous Wreck (II) Inmate

From: Sweden, Malmoe
Insane since: Jan 2003

 posted posted 07-30-2003 01:52

look at my previous msg, it has been updated.
Hiroki
Paranoid (IV) Inmate

From: NZ
Insane since: Dec 2002

 posted posted 07-30-2003 06:20

Hi, mate.
Many many thanks for your reply.
I just had a try but not been able to success yet....
First code was that menu doesn't disapper when I mouseout.
And second code was that sub-menu disapperred immediatly when I mouseout from main menu.
Then impossible to click on sub-menu. Oh, my god. Unless I click it at the speed of light.
Thank you very much for your help.
Looking forward to hearing from you, mate.
Cya.


Hiroki Kozai
Archonian
Nervous Wreck (II) Inmate

From: Sweden, Malmoe
Insane since: Jan 2003

 posted posted 08-01-2003 18:02

Ok, what caused the little gray thing on the right side was that you didn't use cellspacing="0" and cellpadding="0" on the first table.

Now, I viewed the page with the old code in IE 6.0 and the menu came on the right side when I onmouseover'ed.
Some of the parts of this code is a mystery but I took a look at it, and this is working in IE 6.0:


<html>
<head>

<style type="text/css">
body {
font-family: arial;
}

a{
color: #fa7dcb;
text-decoration: none;
}

a:hover{
color: #9900ac;
}

td.sp{
background: #eee;
}

#favorite{
background: #ddd;
visibility: hidden;
position: absolute;
}
</style>

<script language="javascript">
function showmenu(elmnt){
document.getElementById(elmnt).style.visibility = 'visible';
}

function hidemenu(elmnt){
document.getElementById(elmnt).style.visibility = 'hidden';
}

document.onmousemove=new Function("if(event.srcElement.className != 'menu' && event.srcElement.className != 'sp'){hidemenu('favorite');}");
</script>

</head>
<body>
<h3>Hiroki's first Drop Down</h3>
<table cellspacing="0" cellpadding="0">
<tr>
<td class="sp" onmouseover = "showmenu('favorite')"><a href="#" class="menu">My favorite Food</a></td>
</tr>
<tr>
<td>
<table id="favorite" class="menu">
<tr><td class="menu"><a href="#" onclick="hidemenu('favorite');" class="menu">Udon</a></td></tr>
<tr><td class="menu"><a href="#" onclick="hidemenu('favorite');" class="menu">Rice</a></td></tr>
<tr><td class="menu"><a href="#" onclick="hidemenu('favorite');" class="menu">Natto</a></td></tr>
<tr><td class="menu"><a href="#" onclick="hidemenu('favorite');" class="menu">Ham</a></td></tr>
<tr><td class="menu"><a href="#" onclick="hidemenu('favorite');" class="menu">Okonomiyaki</a></td></tr>
</table>
</td>
</tr>
</table>
</body>
</html>


You'll have to study the code.
Every time you move the mouse on the website, this line:
document.onmousemove=new Function("if(event.srcElement.className != 'menu' && event.srcElement.className != 'sp'){hidemenu('favorite');}");
checks whether the mouse-cursor is over a menu object or not. If it's not then it hides the menu.
This method gets worse the more menus you have because the code grows exponentially.

Anyway, I hope this works.
Hiroki
Paranoid (IV) Inmate

From: NZ
Insane since: Dec 2002

 posted posted 08-04-2003 02:03

Hi, mate.
Thanks for your help.
Really appreciate that.
I uploaded this.
Please have a look.
It is working fine.
Thanks a lot.
BTW, I uploaded another file as well.
Please mouseover script > categories .
You will see sub-menu slides to left hand side.
Would you have any idea how to do that???


Hiroki Kozai
DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

 posted posted 08-04-2003 03:17

nevermind, misread...

[This message has been edited by DL-44 (edited 08-04-2003).]

« Backwards — Onwards »

Show Forum Drop Down Menu