Dropdown area - Page 2

City Aggregation · 05-15-2007, 07:49 AM

http://spots.tibiacity.org but the box is only visible for registered users. Looks like attached.

Costin Trifan · 05-15-2007, 03:12 PM

I registered on your site to have the appropriate access to page because I wanted to see how it looks underneath. And I've made a few changes which you can see below.

Now the Table is shown on mouse-over and hidden on mouse-out;

The Code:

Code:

<head>
    <style type="text/css" media="screen">
 BODY
{
font-family: verdana, tahoma, arial, sans-serif;
font-size: 10pt;
margin: 0px;
margin-left: 3px;
margin-right: 3px;
padding: 0px;
}

P
{
padding-top: 10px;
margin: 0px;
}

table.navbar
{
font-size: 8pt;
margin: 0px;
padding: 0px; 
border: 0px; 
font-weight: bold;
}

table.menu
{
font-size: 8pt;
margin: 0px;
padding: 0px;
font-weight: bold;
}

td.menuNormal
{
padding: 0px;
color: black;
font-weight: bold;
vertical-align: top;
background-color: white;
}

td.menuHover
{
padding: 0px;
color: black;
font-weight: bold;
vertical-align: top;
}

div.menuNormal
{
display: none;
position: static;
}

div.menuHover
{
border: 1px solid lightblue;
background-color: white;
display: inline;
position: absolute;
}

</style>

    <script type="text/javascript">
function expand(s)
{
  var td = s;
  var d = td.getElementsByTagName("div").item(0);

  td.className = "menuHover";
  d.className = "menuHover";
}

function collapse(s)
{
  var td = s;
  var d = td.getElementsByTagName("div").item(0);

  td.className = "menuNormal";
  d.className = "menuNormal";
}

    </script>

</head>
<body>
    <table class="navbar">
        <tr>
            <td class="menuNormal" width="160" onmouseover="expand(this);" onmouseout="collapse(this);">
                <p>
                   Welcome, <b>costintrifan</b>&nbsp;<img id="Image1" src="Tibia%20spot%20of_files/down.png" /></p>
                <div class="menuNormal" width="155">
                    <table class="menu" id="Table1" style="border-right: #000000 1px solid; border-top: #000000 1px solid;
                        background-image: url(images/n2.gif); border-left: #000000 1px solid;
                        border-bottom: #000000 1px solid; background-repeat: repeat-x; background-color: white;
                        width: auto;" cellspacing="10" cellpadding="10">
                        <tbody>
                            <tr>
                                <td valign="top" colspan="2">
                                    <a href="http://www.tibiacity.org/">Tibiacity</a> - <a href="http://www.tibiacity.org/forum">
                                        Forum</a> - <a href="http://www.tibiacity.org/blog">Blog</a><br>
                                    <br>
                                    <center>
                                        <img class="border" title="My avatar" src="Tibia%20spot%20of_files/image.gif"></center>
                                </td>
                                <td valign="top">
                                    <b>Spots menu</b><br>
                                    <br>
                                    <a href="#">Homepage</a><br>
                                    <a href="#">Manual</a><br>
                                    <br>
                                    <a href="#">Your spot</a><br>
                                    <a href="#">Your blog</a><br>
                                    <a href="#">Your images</a><br>
                                    <a href="#">Your movies</a><br>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </td>
        </tr>
    </table>
</body>

All you have to do now is to adapt it to your page, change the css classes...
Just copy and paste (simple as that)

[btw, i like your site]

City Aggregation · 05-17-2007, 05:47 AM

That wworks but it isn't really what I want, it's kinda strange.

Costin Trifan · 05-17-2007, 05:52 AM

why?

I like the ideea...

City Aggregation · 05-20-2007, 06:00 AM

Don't you find it a little strange that it opens onmouseover? Could you make it open onclick and close onmouseover?

Costin Trifan · 05-20-2007, 06:05 AM

Quote:

Could you make it open onclick and close onmouseover?

you want to say open on click and close on mouse out ?

I'll see what I can do.

Still, I rather like it to be acting as a menu. It's more accessible, that is I don't have to click it to open it...
Anyway, as I said, I'll see what I can do.

City Aggregation · 05-20-2007, 06:51 AM

It's more logic if it opens on click :p.

Costin Trifan · 05-20-2007, 05:21 PM

HTML Code:

<head>
    <style type="text/css" media="screen">
 BODY
{
font-family: verdana, tahoma, arial, sans-serif;
font-size: 10pt;
margin: 0px;
margin-left: 3px;
margin-right: 3px;
padding: 0px;
}

P
{
padding-top: 10px;
margin: 0px;
}

table.navbar
{
font-size: 8pt;
margin: 0px;
padding: 0px; 
border: 0px; 
font-weight: bold;
}

table.menu
{
font-size: 8pt;
margin: 0px;
padding: 0px;
font-weight: bold;
}

td.menuNormal
{
padding: 0px;
color: black;
font-weight: bold;
vertical-align: top;
background-color: white;
}

td.menuHover
{
padding: 0px;
color: black;
font-weight: bold;
vertical-align: top;
}

div.menuNormal
{
display: none;
position: static;
}

div.menuHover
{
border: 1px solid lightblue;
background-color: white;
display: inline;
position: absolute;
}

</style>

    <script type="text/javascript">

function showIt(cell_ID)
{
    var td = document.getElementById(cell_ID);
    var d = td.getElementsByTagName("div").item(0);

    td.className = "menuHover";
    d.className = "menuHover";
}
function hideIt(cell_ID)
{
    var td = document.getElementById(cell_ID);
    var d = td.getElementsByTagName("div").item(0);

    td.className = "menuNormal";
    d.className = "menuNormal";
}

    </script>

</head>
<body>
    <table class="navbar">
        <tr>
            <td id="CellManager" class="menuNormal" width="160">
                <p>
                    Welcome, <b>costintrifan</b>&nbsp;<img id="Image1" onclick="showIt('CellManager');"
                        src="Tibia%20spot%20of_files/down.png" /></p>
                <div id="Panel1" class="menuNormal" onmouseout="hideIt('CellManager');" onmouseover="showIt('CellManager');"
                    width="155">
                    <table class="menu" id="Table1" style="border-right: #000000 1px solid; border-top: #000000 1px solid;
                        background-image: url(images/n2.gif); border-left: #000000 1px solid; border-bottom: #000000 1px solid;
                        background-repeat: repeat-x; background-color: white; width: auto;" cellspacing="10"
                        cellpadding="10">
                        <tbody>
                            <tr>
                                <td valign="top" colspan="2">
                                    <a href="http://www.tibiacity.org/">Tibiacity</a> - <a href="http://www.tibiacity.org/forum">
                                        Forum</a> - <a href="http://www.tibiacity.org/blog">Blog</a><br>
                                    <br>
                                    <center>
                                        <img class="border" title="My avatar" src="Tibia%20spot%20of_files/image.gif"></center>
                                </td>
                                <td valign="top">
                                    <b>Spots menu</b><br>
                                    <br>
                                    <a href="#">Homepage</a><br>
                                    <a href="#">Manual</a><br>
                                    <br>
                                    <a href="#">Your spot</a><br>
                                    <a href="#">Your blog</a><br>
                                    <a href="#">Your images</a><br>
                                    <a href="#">Your movies</a><br>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </td>
        </tr>
    </table>
</body>

City Aggregation · 05-24-2007, 12:13 AM

Thanks for the code and sorry for the late reply but Ididn't had much time the latest days due to exams. I'm going to test this tomorow evening.

alainkun · 05-24-2007, 10:55 PM

only change onmouseover to onclick