Supportnet Computer
Planet of Tech

Supportnet / Forum / Webseiten/HTML

Aufklappmenü





Diskussionsgruppen
Betriebsysteme
Windows 7
WindowsVista
WindowsXP
Linux
BS-Sonstige
Software
Textverarbeitung
Tabellenkalkulation
Datenbanken
Bildbearbeitung
Audio/mp3/Video
Security/Viren
E-Mail/Outlook
Internet Browser
SW-Sonstige
Hardware
Mainboard/CPU/RAM
Grafikkarten
Peripherie
HW Sonstiges
Netzwerk
DSL
W-Lan
Telekommunikation
NW-Sonstiges
Programmierung
Skripte(PHP,ASP,Perl...)
Webseiten/HTML
Sonstiges
PC-Sonstiges
Plauderecke

Frage

Hallo, ich würde gerne eine aufklappbare Menüleiste auf meiner Seite einbringen, wie kann ich das realisieren?

Antwort 1 von Redschina

hi,

bei www.nightfire.ch gibts mehrere davon - hier ein beispiel

gruss, redschina

Antwort 2 von Figð

Hey,

ich hätt da was, weiß aba net, ob des deiner Vorstellung entspricht =)


<ol type="I">
<li>Listenpunkt </li>
<li>Listenpunkt

<ul type="disc">
<li>Unter-Listenpunkt </li>
<li>Unter-Listenpunkt </li>
<li>Unter-Listenpunkt </li>
<li>Unter-Listenpunkt </li>
</ul>
</li>

<li>Listenpunkt </li>
<li>Listenpunkt </li>
</ol>

Würde dann so aussehen:

I. Listenpunkt
II. Listenpunkt
o Unter-Listenpunkt
o Unter-Listenpunkt
o Unter-Listenpunkt
o Unter-Listenpunkt
III. Listenpunkt
IV. Listenpunkt

Hoff des hilft bissle

Gruß

Figð

Antwort 3 von Redschina

hi figö,

wo klappt man das denn wieder zu?? ;-)

gruss, redschina

Antwort 4 von disco

moin

meinste so nen navigationsleiste wie z.b. im explorer. wenn ka einfach mal googeln. gibts ne menge javascripts zu.

wenn du so nen eifaches dropdownmenü meinst geht das so:

<select size="1" name="bla">
<option value="1">punkt 1</option>
<option value="2">punkt 2</option>
<option>usw.</option>
</select>

g,
disco

Antwort 5 von rfb

@redschina:
im meinem Opera 7.54 läuft das Beispiel von nightfire.ch nicht (und wenn ich Frames deaktiviere hängt sich der JavaScript-Frameset-Nachlader herrlich auf ;-)

Antwort 6 von crisu

ich hab da was gefunden, aber irgendwie klappt das nicht



<table border="0" cellpadding="0" cellspacing="1" style="border-collapse: collapse; font-size: 8pt; font-family: Arial" bordercolor="#111111" width="746" id="AutoNumber2" height="76">
<tr height="22" class="MenueZeile">

<td width="122" height="45">
<div class="ElemNormal" id="M01">Home</div>
</td>

<td width="122" height="45">
<div class "ElemNormal" id="M02">Profil</div>
</td>

<td width="122" height="45">
<div class "ElemNormal" id="M03">Zielgruppe</div>
</td>

<td width="122" height="45">
<div class "ElemNormal" id="M04">Projekte</div>
</td>

<td width="122" height="45">
<div class "ElemNormal" id="M05">Kontakt</div>
</td>
</tr>
<tr>
<td valign="top">
<div id="UM01" class="UMenueNormal">
<div class="UElementNormal">Eintrag 1</div>
<div class="UElementNormal">Eintrag 2</div>
<div class="UElementNormal">Eintrag 3</div>
</div>
</td>

<td valign="top">
<div id="UM02" class="UMenueNormal">
<div class="UElementNormal">Eintrag 1</div>
<div class="UElementNormal">Eintrag 2</div>
<div class="UElementNormal">Eintrag 3</div>
</div>
</td>

<td valign="top">
<div id="UM03" class="UMenueNormal">
<div class="UElementNormal">Eintrag 1</div>
<div class="UElementNormal">Eintrag 2</div>
<div class="UElementNormal">Eintrag 3</div>
</div>
</td>

<td valign="top">
<div id="UM04" class="UMenueNormal">
<div class="UElementNormal">Eintrag 1</div>
<div class="UElementNormal">Eintrag 2</div>
<div class="UElementNormal">Eintrag 3</div>
</div>
</td>

<td valign="top">
<div id="UM05" class="UMenueNormal">
<div class="UElementNormal">Eintrag 1</div>
<div class="UElementNormal">Eintrag 2</div>
<div class="UElementNormal">Eintrag 3</div>
</div>
</td>


</tr>

</table>


Antwort 7 von rfb

Zitat:
ich hab da was gefunden, aber irgendwie klappt das nicht
wo auch immer du das gefunden hast, ohne eine zugehörige CSS- sowie eine JavaScript-Datei ist das vollkommen wertlos - mit anderen Worten: das kann so gar nicht (auf-)klappen.


Antwort 8 von crisu

Jetzt müsste es eigentlich passen. JavaScript hab ich jetzt eingefügt, aber es funktioniert nicht in der Vorschau.

<body>


<table border="0" cellpadding="0" cellspacing="1" style="border-collapse: collapse; font-size: 8pt; font-family: Arial" bordercolor="#111111" width="462" id="AutoNumber2" height="76">
<tr height="22" class="MenueZeile"width"462">
<td width="122" height="45">
<div class="ElemNormal" id="M01" onmouseover="hovernM (me)" onmouseout= "hovernM (me)">Home</div>
</td>
<td width="122" height="45">
<div class "ElemNormal" id="M02" onmouseover="hovernM (me)" onmouseout= "hovernM (me)">Profil</div>
</td>
<td width="122" height="45">
<div class "ElemNormal" id="M03" onmouseover="hovernM (me)" onmouseout= "hovernM (me)">Zielgruppe</div>
</td>
<td width="122" height="45">
<div class "ElemNormal" id="M04" onmouseover="hovernM (me)" onmouseout= "hovernM (me)">Projekte</div>
</td>
<td width="122" height="45">
<div class "ElemNormal" id="M05" onmouseover="hovernM (me)" onmouseout= "hovernM (me)">Kontakt</div>
</td>
</tr>
<tr>
<td valign="top">
<div id="UM01" class="UMenueNormal">
<div class="UElementNormal" onmouseover="hovernElem me, 'UM01' " onmouseout="hovernElem me, 'UM01' ">Eintrag 1
</div>
<div class="UElementNormal" onmouseover="hovernElem me, 'UM01' " onmouseout="hovernElem me, 'UM01' ">Eintrag 2
</div>
<div class="UElementNormal" onmouseover="hovernElem me, 'UM01' " onmouseout="hovernElem me, 'UM01' ">Eintrag 3
</div>
</div>
</td>
<td valign="top">
<div id="UM02" class="UMenueNormal">
<div class="UElementNormal" onmouseover="hovernElem me, 'UM02' " onmouseout="hovernElem me, 'UM02' ">Eintrag 1
</div>
<div class="UElementNormal" onmouseover="hovernElem me, 'UM02' " onmouseout="hovernElem me, 'UM02' ">Eintrag 2
</div>
<div class="UElementNormal" onmouseover="hovernElem me, 'UM02' " onmouseout="hovernElem me, 'UM02' ">Eintrag 3
</div>
</div>
</td>
<td valign="top">
<div id="UM03" class="UMenueNormal">
<div class="UElementNormal" onmouseover="hovernElem me, 'UM03' " onmouseout="hovernElem me, 'UM03' ">Eintrag 1
</div>
<div class="UElementNormal" onmouseover="hovernElem me, 'UM03' " onmouseout="hovernElem me, 'UM03' ">Eintrag 2
</div>
<div class="UElementNormal" onmouseover="hovernElem me, 'UM03' " onmouseout="hovernElem me, 'UM03' ">Eintrag 3
</div>
</div>
</td>
<td valign="top">
<div id="UM04" class="UMenueNormal">
<div class="UElementNormal" onmouseover="hovernElem me, 'UM04' " onmouseout="hovernElem me, 'UM04' ">Eintrag 1
</div>
<div class="UElementNormal" onmouseover="hovernElem me, 'UM04' " onmouseout="hovernElem me, 'UM04' ">Eintrag 2
</div>
<div class="UElementNormal" onmouseover="hovernElem me, 'UM04' " onmouseout="hovernElem me, 'UM04' ">Eintrag 3
</div>
</div>
</td>
<td valign="top">
<div id="UM05" class="UMenueNormal">
<div class="UElementNormal" onmouseover="hovernElem me, 'UM05' " onmouseout="hovernElem me, 'UM05' ">Eintrag 1
</div>
<div class="UElementNormal" onmouseover="hovernElem me, 'UM05' " onmouseout="hovernElem me, 'UM05' ">Eintrag 2
</div>
<div class="UElementNormal" onmouseover="hovernElem me, 'UM05' " onmouseout="hovernElem me, 'UM05' ">Eintrag 3
</div>
</div>
</td>
</tr>
</table>

<script language="VBScript" type="text/vbscript">
<!--
dim timeout
dim MenueName

sub hovernM(elem)
dim strUElemName
if elem.classname="ElemNormal" then
elem.classname="ElemHover"
strUElemName="U" & elem.id
timeout=window.setTimeout ("document.all(""" & _strUElemName & """).className=""UMenueHover""",100)
else
elem.classname="ElemNormal"
strUElemName="U" & elem.id
timeout=window.setTimeout ("document.all(""" & _strUElemName & """).className=""UMenueHover""",100)
end if
if MenueName<>"" then
strUElemName="U" & MenueName
window.setTimeout "document.all (""" & strUElemName & _""").className""UMenueNormal""",80)
end if
MenueName=elem.id
end sub

sub hovernElem(elem, strMenue)
if elem.classname="UElementNormal"then
elem.classname="UElementHover"
document.all (strMenue).className="UMenueHover"
window.clearTimeout timeout
else
elem.classname="UElementNormal"
timeout=window.setTimeout ("document.all("""& strMenue & _""").className=""UMenueNormal""",150)
end if
end sub
-->
</script>

</body>


Antwort 9 von Redschina

klar crisu.. wenn du "<div class="ElemNormal"...>" schreibst, muss die class ja auch irgendwo per script definiert sein. anleitungen dafür gibts massenhaft im internet, eine zum beispiel hier.


hier ein menü, bei dem die links durch mouseover aufklappen - vielleicht gefällts dir ja:

zwischen <head> und </head> fügst du ein:

<style>
.menu

{
position: absolute;
top:0;
z-index: 2;
}
.submenu
{
position: absolute;
top: 22;
z-index: 0;
visibility: hide;
visibility: hidden;
}
</style>


zwischen <body> und </body> kommt folgendes:

<script>
<!--
if (document.layers)
{var browser="NS4.x";
var lvar1="layers";
var lvar2="";
var lvar3="show";
var lvar4="hide";}
if (document.all)
{var browser="IE4.x";
var lvar1="getElementById(";
var lvar2=").style";
var lvar3="visible";
var lvar4="hidden";}
if (document.getElementById)
{var browser="IE6.x & NS6.x";
var lvar1="getElementById(";
var lvar2=").style";
var lvar3="visible";
var lvar4="hidden";}
var old;
var memold;
var subold;
if(document.layers)
{
window.captureEvents(Event.MOUSEDOWN);
window.onmousedown=do_out;
} else
{
document.onmouseup=do_out;
}
function show_layer(x)
{
eval("document."+lvar1+"[x]"+lvar2+".visibility='"+lvar3+"';");

}
function hide_layer(x)
{
eval("document."+lvar1+"[x]"+lvar2+".visibility='"+lvar4+"';");
}
function do_menu(x)
{
if(!old)
old=memold;
if(old!=x)
{
show_layer(x);
old=x;
} else
old="";
}
function do_check(x)
{
if(old && old!=x)
{
hide_layer(old);
show_layer(x);
old=x;
}
do_submenu();
}
function do_out()
{
if(old)
visible_layer(old);
memold=old; old="";
do_submenu();
}
function do_submenu(x)
{
if(subold)
{
hide_layer(subold);
subold="";
}
if(x)
{
show_layer(x);
subold=x;
}
}
// -->
</script>

<div id="m1" class="menu" style="left: 5; z-index: 2">
<table bgcolor="000000" cellspacing="0" cellpadding="2" border="1" width="115">
<tr><td><a href="javascript:do_menu('m1x')" onmouseover="do_check('m1x')"><b>Rubrik 1</b></a>
</td></tr></table></div>

<div id="m1x" class="submenu" style="left: 5; top:22; z-index: 0;">
<table bgcolor="000000" cellspacing="0" cellpadding="2" border="1" width="115">
<tr><td>Überschrift 1<br>
<a href="#">Link 1</a><br>
<a href="#">Link 2</a><br>
<a href="#">Link 3</a></td>
</tr></table></div>

<div id="m2" class="menu" style="left: 120;">
<table bgcolor="000000" cellspacing="0" cellpadding="2" border="1" width="100">
<tr><td><a href="javascript:do_menu('m2x')" onmouseover="do_check('m2x')"><b>Rubrik 2</b></a> </td>
</tr></table></div>

<div id="m2x" class="submenu" style="left: 120; top:22; z-index: 0;">
<table bgcolor="000000" cellspacing="0" cellpadding="2" border="1" width="100">
<tr><td>Überschrift 1<br>
<a href="#">Link 1</a><br>
<a href="#">Link 2</a><br>
<a href="#">Link 3</a><br><br>
Überschrift 2<br>
<a href="#">Link 1</a><br>
<a href="#">Link 2</a><br>
<a href="#">Link 3</a></td>
</tr></table></div>

<div id="m3" class="menu" style="left: 220;">
<table bgcolor="000000" cellspacing="0" cellpadding="2" border="1" width="100">
<tr><td><a href="javascript:do_menu('m3x')" onmouseover="do_check('m3x')"><b>Rubrik 3</b></a> </td>
</tr></table></div>
<div id="m3x" class="submenu" style="left: 220; top:22; z-index: 0;">
<table bgcolor="000000" cellspacing="0" cellpadding="2" border="1" width="100">
<tr><td>Überschrift 1<br>
<a href="#">Link 1</a><br>
<a href="#">Link 2</a><br>
<a href="#">Link 3</a></td>
</tr></table></div>

gruss, redschina



Antwort 10 von Redschina

ups... bitte ersetze (gleich nach <body>) das <script> durch <script language="JavaScript">

sorry

Antwort 11 von rfb

Zitat:
 JavaScript hab ich jetzt eingefügt
nö, was du eingefügt hast, ist VBScript, das funktioniert ausschließlich auf dem IIEE, alle anderen Browser ignorieren das.

bevor du jetzt deine Seiten mit Redschinas (oder anderen) Code ins Netz stellst, solltest du ürigens noch testen, wie das bei deaktiviertem JavaScript aussieht.

Antwort 12 von Redschina

@rfb

wie wäre es denn mit einem beispiel-script, das bei allen browsern und mit sämtlichen deaktivieren einstellungen funktioniert? davon ausgehend, dass ein anfänger fragt sind deine andeutungen keine hilfe. ich kenne dich eigentlich anders.. ;-)

gruss, redschina

Antwort 13 von rfb

@Redschina:
das Problem ist, dass ich mich in dieser Materie nur auf der User-Seite auskenne. Da habe ich leider schon oft erlebt, dass der ganze Aufklapp-Menu-Kram nicht klappt, und bei der Komplexität der zugehörigen Scripte ist das eine Wahnsinnsaufgabe, den/die Fehler zu suchen.

Eigentlich möchte ich hier folgende Hilfe geben (und daher meine evtl. etwas destruktiven Antworten, insbesondere da crisu nun scheinbar eher weniger HTML/JavaScript/CSS-Erfahrung hat): Weglassen, ein einfaches Menu tuts auch.
Zusätzliche Verwendung des link-Elements schafft bei den Browsern, die es unterstützen, ein Super-Navigationssystem, ganz ohne fehleranfällige JavaScripte (schau dir nur die aufwändigen Browserabfragen in deinem Script an) und mit minimalem Aufwand.
Dass solche Aufklapp-Menüs zudem Probleme mit der Barrierefreiheit haben (die mir nunmal wichtig ist ;-) brauche ich wohl nicht zu erwähnen, oder?

Antwort 14 von Redschina

Zitat:
Dass solche Aufklapp-Menüs zudem Probleme mit der Barrierefreiheit haben (die mir nunmal wichtig ist ;-) brauche ich wohl nicht zu erwähnen, oder?


doch, das solltest du aber, und zwar gerade bei einem "anfänger" mit der dazugehörigen begründung - das bringt den fragenden wesentlich weiter, als "halbschaurige" andeutungen, die nur weitere fragen nach sich ziehen ;-)

zu mir:
ich versuche hier lediglich auf die anfrage einzugehen und halte mich im allgemeinen aus "belehrungen" heraus (ausnahme "bildklau" oder "passwortschutz per javascript"). zum glück (und das meine ich wirklich so) gibts dafür genug andere, die sich regelmäßig einklinken ;-)

gruss, redschina



Antwort 15 von rfb

gut, dann zur Barriere durch Aufklappmenüs:
1. die Technik basiert auf JavaScript, das nicht in allen Browsern zur Verfügung steht.
2. Für die User ist nicht vorhersehbar, was passiert.
3. Je nach verwendetem Script erfordert es oft Fingerspitzengefühl, um die Links im Menü überhaupt zu treffen.
4. Ohne Maus sind die Links nicht erreichbar.

Barrierefreiheit allgemein:
In der BITV ist für Auftritte des Bundes geregelt, wie Seiten zu gestalten sind, damit Menschen mit Sehbehinderungen, motorischen Einschränkungen und anderen Behinderungen sie betrachten/ertasten/vom Compi vorgelesen bekommen können.

Ohne manche schicken Sachen wäre das Internet eigentlich das Medium zur Informationsbeschaffung für alle Menschen.

Antwort 16 von Figo89

Also was jetzt O.o geht des jetzt mit Nightfire, oder sollt ich doch was andres hernehmen? Mir wäre das wirklich wichtig, da ich versuchen soll, eine HP für ein Geschäft zu entwickeln.
Es sollte so aussehen, dass am linkeren Rand bestimmte Begriffe stehen, nehmen wir an

Home
Kontakt
Autos (aufklappen, bei klick)
Unterpunkt
Unterpunkt
Unterpunkt
.....
Motorräder (aufklappen, bei klick?
.....
....
...
Und so weiter.

wäre das realisierbar?
Oder sollte ich es dabei belassen, dass bei klick ein neues Browserfenster geöffnet wird?
Gruß

Antwort 17 von Figo89

Achja u nochwas, bei mir wäre das keine Verschönerungssache, sondern lediglich für die Übersicht. Wobei es sich hier nicht um Autos oder Motorräder handelt, sonder um "Bastelzubehör".
U dies erfordert massig Platz. Für meine wenigen Kenntnisse, wird eine Top-HP sowieso nicht zu erreichen sein. Aber es wäre halt ziemlich wichtig ;-)
U ich bin noch lernfähig... *g*
Also danke fürs Helfen
GrEeZ

Ich möchte kostenlos eine Frage an die Mitglieder stellen:


Suche in allen vorhandenen Beiträgen:

Ausfühliche Anleitungen und Artikel zu den Themen: