Demo

Probiere ClanSphere aus und teste daran herum. Demo


Antworten: 3
Seite [1]
Zoeff


Wannabe poster





Beiträge: 30
 # Thema - 16.11.2007 um 22:00 Uhr
Hola,

Im currently working on a website and I cant figure out how to get the menu the way I like it, basicly because im a coding noob.

My layout looks like this


Now what i want to make is this:



So actually a horizontal menu, that when you move over the images the submenu appears. So is there anyone who has a link to such a menu or can explain me in detail how I can make it? Google didnt help me hope you guys can

tnx


------------------
Ich bin kein coder aber wann jemand fragen hat fur Photoshop.. bitte frag es!
Inaktiv
reVerB


Geekboy




Beiträge: 1237
 # Antwort: 1 - 17.11.2007 um 01:42 Uhr
You can make this Sub-Menu with JavaScript or CSS. But a CSS-Sub Menu have a Problem with older IE-Browsers and Netscape. It´s better you make your menu with JavaScript.

Google > Javascript submenu


Inaktiv
|
ichraffsnicht ClanSphere Team

Supporter
Supporter



Herkunft: Erdeborn bei Lutherstadt Eisleben
Beiträge: 3191
 # Antwort: 2 - 17.11.2007 um 08:50 Uhr
hmm my english is not the best.

the javascript:

 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
1. / 2. / ... 
 
function fclip01() 
{
    document.getElementById('subnav1').style.display='block';
    document.getElementById('subnav2').style.display='none';
    document.getElementById('subnav3').style.display='none';
    document.getElementById('subnav4').style.display='none';
}

function fclip02() 
{
    document.getElementById('subnav1').style.display='none';
    document.getElementById('subnav2').style.display='block';
    document.getElementById('subnav3').style.display='none';
    document.getElementById('subnav4').style.display='none';
}
function fclip03() 
{
    document.getElementById('subnav1').style.display='none';
    document.getElementById('subnav2').style.display='none';
    document.getElementById('subnav3').style.display='block';
    document.getElementById('subnav4').style.display='none';
}
function fclip04() 
{
    document.getElementById('subnav1').style.display='none';
    document.getElementById('subnav2').style.display='none';
    document.getElementById('subnav3').style.display='none';
    document.getElementById('subnav4').style.display='block';
}




example html-link:

 
1.
1. / 2. / ... 
 <a href="#" onClick="fclip02();" ><img class="navbutton" src="images/index_ps_16.png" width="133" height="30" alt="Who are you?" /></a>


example html-subnavi:

 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
1. / 2. / ... 
 
<div class="leftalign" id="subnav1"  style="display:block;">
<a href="index.php?mod=news&action=recent" >-News-</a> 
<a href="index.php?mod=news"> -Newsarchiv-</a> 
<a href="index.php?mod=articles">-Articles-</a> 
<a href="index.php?mod=contact&action=imprint">-Imprint-</a> 
<a href="index.php?mod=contact&action=mail">-Contact-</a> 
<a href="index.php?mod=clansphere&action=about">-About-</a>
</div>
 <div class="leftalign" id="subnav2" style="display:none;">
<a href="index.php?mod=squads">-Teams-</a> 
<a href="index.php?mod=wars">-Matches-</a> 
<a href="index.php?mod=awards">-Awards-</a> 
<a href="index.php?mod=history">-History-</a>
</div>
 <div class="leftalign" id="subnav3" style="display:none;">
<a href="index.php?mod=board">-Forum-</a> 
<a href="index.php?mod=board">-Tutorials-</a> 
<a href="index.php?mod=gbook">-Guestbook-</a> 
<a href="index.php?mod=servers">-Server-</a> 
<a href="index.php?mod=users">-User-</a>
</div>


------------------
Inaktiv
|
Zoeff
Thread-Ersteller


Wannabe poster





Beiträge: 30
 # Antwort: 3 - 17.11.2007 um 14:15 Uhr
Tnx it functions like a charm. Vielen dank

Du darfst auch auf deutsch schreiben, mir egal aber so ist es vieleicht mehr interessant fur europeische besucher.

---------------------------------

Well it is working fine now as you an see here http://clansphere.rbreuker.nl/

I was still wondering though if you can change the following. When you click a sub-link and go to the page, the sublink menu changes to one under news. Is it possible to keep it from changing?


------------------
Ich bin kein coder aber wann jemand fragen hat fur Photoshop.. bitte frag es!


Zuletzt editiert von Zoeff am 17.11.2007 um 16:24 Uhr (1x Editiert)
Inaktiv
|
Antworten: 3
Seite [1]


Sie müssen sich registrieren, um zu antworten.