Footer Menu list with "show more" help please, Im trying to make a "show more" footer Options

[Levi]

Hi, im new to the forums, and this may be a little bit of a dumb question, seeing as it really shouldnt be that hard, but I cant seem to figure it out... Anyway.

Im trying to make a "show more" footer (which I have already done)
And put "invisible links" I guess you could call it, links you cant see yet, because its hidde underneath the footer, and u must first click the footer to reveal the other links

Theres nothing too special about these links, its simple text, <a href="blah blah"> stuff, with some mouseover color effects (which I already know how to do)

What I dont know, is how to make these links follow my footer, when they click it to show more, or if there is another way of achieving the basis of my idea, im open to it too
If anyone can provide any help, that would be great, thanks in advance.

Oh right, heres my code:

CODE

<div class="footer" style="position:fixed; top:430px;"><a name="footer"><img src="img/footer-1.png" style="margin-bottom:5px; width:1340px; margin-left:-5px; margin-top:150px;" onclick="this.style.position='absolute'; this.style.top='-430px';" onmouseout="this.style.position='absolute'; this.style.top='0px';"></a></div>
<TABLE BORDER="0" cellpadding="0" CELLSPACING="0">
<TR>

<TD style="position:absolute; bottom:0px;">

<a href="testpage.htm"><FONT>Test link 1</FONT></a><br />
<a href="testpage2.htm"><FONT>Test link 2</FONT></a></TD>

</TR>
</TABLE>

^ The end part with all the Table, TR, TD, etc, is for so that the links will actually show ABOVE the footer image

That code, all it does is show a footer image I designed in Photoshop at the bottom of the screen, and lowered so its full size isnt showing, and follows the screen as u scroll down
When you click on the footer image, it moves up showing the full size of it
And the last 2 lines are just test links

Again, any help would be greatly appreciated, thanks.
-Levi

[Christian J]

Do you want the footer DIV and image to disappear completely when clicked, or just move to another part of the browser window?

The sample code is a little confusing with one default position styling for the DIV, another onclick for the image and then yet another one onmouseout for the image (note that the onmouseout event might fire right away after the click as when the image is repositioned).

[Levi]

Yeah, well, the div is just a holding for the image, I was always taught to use div for alignment.

The image is just simply repositioned on the screen when you click on it, it just simply moves (the footer is actually the full image, I just have it aligned and re-positioned to show the like first 2 cm of the like 10 cm image, when you click anywhere on that 2 cm, it moves the image so all 10 cm shows)

Im not sure how to make the anchor <a href="blah blah"> to be linked to the image div, so that when they click on the "footer", the links also follow it in its re-position, kind of like WoW does on thier website, but I cant understand what im doing on that.
If you scroll to the bottom of thier site, theres a button called "Language" and when you click it, it acts as a drop down menu, and lowers itself, revealing like 200 languages you can choose from, and then hides when you click the arrow again

[Levi]

^ Sorry for my bad spelling on that one too

[Christian J]

Why not put both the image and the links inside the DIV? When the DIV is clicked it moves, while at the same time revealing the links.

[Levi]

Then the links are actually placed behind the footer image, and cannot be seen or accessed

[Christian J]

Why not move both the DIV and the image inside it? I admit I'm having trouble visualizing the effect you want.

[Levi]

I dont think that will work, I already tried that, but the text is still hidden. Let me try to draw you a better picture.

So, what I want to do is:
You know how on some websites, it has a footer, and that footer is normally an image that scrolls with the page

Well, you know how this footer will sometimes have topics, and below those are sub-topics relevant to the topic?
For example, you might see something like:

Contact Us
- E mail
- Phone
- Address

etc...
So if they where to mouse over or click on that "Contact us" topic, the footer would then move up, because it is now being used

I want to create the same thing, how you only see "Contact us" but when you click the footer, you see its sub topics

[Levi]

That is a VARY rough sketch I made up in Photoshop - thats why its not that detailed, but hopefully, it draws a better picture for you

[Christian J]

Something like this?

CODE

#footer {
position: fixed;
bottom: 0;
height: 10em;
}

The footer's HTML must come before the script like this:

CODE

<div id="footer">
<h4>links</h4>
<a href="">link</a>
</div>

<script type="text/javascript">
var footer=document.getElementById('footer');
footer.style.bottom='-8em'; // a little less than the height value in the CSS.
footer.style.cursor='pointer';
var hidden='yes';
footer.onclick=function()
{
    if(hidden=='yes')
    {
        this.style.bottom='0';
        hidden='no';
    }
    else
    {
        this.style.bottom='-8em';
        hidden='yes';
    }
}
</script>

When javascript is not used the menu will stay open by default.

[Levi]

It didnt work, the text and link are behind the footer image, and it doesnt follow the footer when scrolling, it just stays there.
Heres how my code is layered:

CODE

<div class="footer" style="position:fixed; top:430px;"><a name="footer"><img src="img/footer-1.png" style="margin-bottom:5px; width:1340px; margin-left:-5px; margin-top:150px;" onclick="this.style.position='absolute'; this.style.top='-430px';" onmouseout="this.style.position='absolute'; this.style.top='0px';"></a></div>
<div id="footer">
<h4>links</h4>
<a href="">link</a>
</div>

<script type="text/javascript">
var footer=document.getElementById('footer');
footer.style.bottom='-8em'; // a little less than the height value in the CSS.
footer.style.cursor='pointer';
var hidden='yes';
footer.onclick=function()
{
    if(hidden=='yes')
    {
        this.style.bottom='0';
        hidden='no';
    }
    else
    {
        this.style.bottom='-8em';
        hidden='yes';
    }
}
</script>

[Christian J]

It didnt work, the text and link are behind the footer image

You might use the image as a background-image of #footer.

and it doesnt follow the footer when scrolling, it just stays there.

Oops, forgot about that. Try this:

CODE

<div id="footer">
<h4>links</h4>
<a href="">link</a>
</div>

<script type="text/javascript">
var footer=document.getElementById('footer');
footer.style.bottom='-8em';
footer.style.cursor='pointer';
var hidden='yes';
footer.onclick=function()
{
    if(hidden=='yes')
    {
        this.style.bottom='0';
        this.style.position='absolute';
        hidden='no';
    }
    else
    {
        this.style.bottom='-8em';
        this.style.position='fixed';
        hidden='yes';
    }
}
</script>

...but I should add I still don't know exactly what you want to happen. Regard the above as a very vague attempt from me.

<div class="footer" style="position:fixed; top:430px;">

A footer should be positioned using the "bottom" property instead of "top", otherwise it can end up in the middle of the page in large windows.

onmouseout="this.style.position='absolute'; this.style.top='0px';">

Do you really want the footer to remain "absolute" like that when the user mouseouts? It will probably obscure other content.

[Levi]

Alright, it sort of works, the links now scroll with the page, but they are still behind the footer
How do I bring the links above the footer? Heres what my code looks like now:

CODE

<div class="footer" style="position:fixed; top:430px;"><a name="footer"><img src="img/footer-1.png" style="margin-bottom:5px; width:1340px; margin-left:-5px; margin-top:150px;" onclick="this.style.position='absolute'; this.style.bottom='430px';" onmouseout="this.style.position='absolute'; this.style.top='0px';"></a>
<a href="">link 1</a><br />
<a href="">link 2</a><br />
<a href="">link 3</a><br />
<a href="">link 4</a></div>
<script type="text/javascript">
var footer=document.getElementById('footer');
footer.style.bottom='-8em';
footer.style.cursor='pointer';
var hidden='yes';
footer.onclick=function()
{
    if(hidden=='yes')
    {
        this.style.bottom='0';
        this.style.position='absolute';
        hidden='no';
    }
    else
    {
        this.style.bottom='-8em';
        this.style.position='fixed';
        hidden='yes';
    }
}
</script>

And the "absolute" doesnt matter, cause I left enough spacing between the footer and my website content that it wont become a problem if it where to break.

[Christian J]

the links now scroll with the page, but they are still behind the footer
How do I bring the links above the footer?

When you write "behind the footer", do you really mean the links are below the image? When you write "above the footer", do you mean before the image or in front of it?

To make the links appear in front of the image, make the image a background of the container DIV.

[Levi]

That didnt work
When I try to make it a background image, the footer just disappears.

And when I write "behind the footer" I actually mean its layered behind the actual image footer, so when you click on the menu to see the whole menu, the links are hidden behind the image

This post has been edited by Levi: May 30 2013, 07:53 AM

[Christian J]

When I try to make it a background image, the footer just disappears.

It should be large enough to contain the links, or? If you want it the exact same size as its background image, give DIV#footer height and width with CSS.

And when I write "behind the footer" I actually mean its layered behind the actual image footer, so when you click on the menu to see the whole menu, the links are hidden behind the image

I'm still not sure what you want to happen. You mentioned a WoW site, could you link to that or some other page that illustrates the effect?