HTML/CSS Menü - Unterpunkte verstecken

xAndy1x · 16 November 2012

Hi,

Ich bin grade dabei eine Webseite aufzubauen.

Bei dem Menü habe ich mit dem <ul> befehlt Untepunkte erstellt.
Mein Problem ist das die Unterpunkte immer zu sehen sind.
Aber Ich will das wenn man auf Videos klick dann erst die Unterpunkte mit Tutorials u.s.w. erscheinen.

Bitte schreibt mir den Befehlt.

Danke schonmal

Mfg
Andy

theHacker · 16 November 2012

Gibts keinen Befehlt.

Du musst dich schon drum kümmern, dass die jeweilige Unterseite nur das zeigt, was sichtbar sein soll. Per-Klick-Zeugs kannst du mit CSS nicht realisieren.

xAndy1x · 16 November 2012

theHacker schrieb:
Gibts keinen Befehlt.

Du musst dich schon drum kümmern, dass die jeweilige Unterseite nur das zeigt, was sichtbar sein soll. Per-Klick-Zeugs kannst du mit CSS nicht realisieren.

Ich gleube wir reden etwas aneinander vorbei.

Hier mal den Code

Code:

 <li><a href="#"> <h3>Startseite</h3></a></li>
        			<li><a href="#">Videos</a></li>
        			        <ul>
                                              <li><a href="#">Top Videos</a></li>
                                              <li><a href="#">Vostellung</a></li>
                                              <li><a href="#">Tutorials</a></li>
                                              <li><a href="#">Let´s Paly</a></li>
                                              <li><a href="#">Let´s Show</a></li>
                                              <li><a href="#">Walkthrough</a></li>
                                              <li><a href="#">Let´s Fails</a></li>
                                              <li><a href="#">Just for Fun</a></li>
                                        </ul>

Und wenn man das so eingibt sind die ja immer zu sehen aber ich möchte das wenn man auf Videos klick das dann die Unterortnung kommt. So ne art Spoiler oder so.

Mfg
Andy

theHacker · 16 November 2012

xAndy1x schrieb:
Ich gleube wir reden etwas aneinander vorbei.

Tun wir nicht. Mein Post gilt wiederhin.

andos · 17 November 2012

Dann beschäftige dich mal mit Javascript bzw Jquery. Da ist sowas recht einfach zu lösen.

xAndy1x · 17 November 2012

andos schrieb:
Dann beschäftige dich mal mit Javascript bzw Jquery. Da ist sowas recht einfach zu lösen.

Würdet ihr mir den Code geben da ich Jquery oder Java script nie brauchen werde. Nur für das menü

pummuk · 17 November 2012

per klick geht das nicht mit css... wie meine vorredner schon geschrieben haben...

was realisierbar wäre ist wenn der mauszeiger drüber fährt, das dann das untermenü aufklappt.. also per hover

versuch mal mit : display:none; was zu machen...

und tante google hilft mit sicherheit...

GatheringXP · 17 November 2012

xAndy1x schrieb:
Würdet ihr mir den Code geben da ich Jquery oder Java script nie brauchen werde. Nur für das menü

Was zahlste denn? ;D

apolle · 18 November 2012

Code:

<html><head><title>Kram & Zeug</title>
<script language="JavaScript"><!--
function show_menu ( name ) {
	if ( document.getElementById(name).style.display != "none" ) {
		document.getElementById(name).style.display = "none";
		document.getElementById('showuserbar').style.display = "";
	}
	else {
		document.getElementById(name).style.display = "";
		document.getElementById('showuserbar').style.display = "none";
	}
	return false;
}
//-->
</script>
</head>
<body bgcolor="#aaccee">
<!-- die Vorlage
<h3 align="left"><a href="javascript:show_menu('wasauchimmer');">Titel</a></h3>
<div id="wasauchimmer" style="display:none;">
<a href="URL1" target="_blank"><p>Text1</p></a>
<a href="URL2" target="_blank"><p>Text2</p></a>
<a href="URL3" target="_blank"><p>Text3</p></a>
</div>
-->
<h3 align="left"><a href="javascript:show_menu('news');">Nachrichten</a></h3>
<div id="news" style="display:none;">
<a href="https://www.tagesschau.de" target="_blank"><p>Tagesschau</p></a>
<a href="https://www.bbc.com" target="_blank"><p>BBC</p></a>
<a href="https://www.heute.de" target="_blank"><p>heute</p></a>
<a href="https://www.dpa.de" target="_blank"><p>DPA</p></a>
<a href="https://www.reuters.de" target="_blank"><p>Reuters</p></a>
<a href="https://www.cnn.com" target="_blank"><p>CNN</p></a>
</div>
<h3 align="left"><a href="javascript:show_menu('press');">Presse</a></h3>
<div id="press" style="display:none;">
<a href="https://www.zeit.de" target="_blank"><p>Zeit</p></a>
<a href="https://www.spiegel.de" target="_blank"><p>Spiegel</p></a>
<a href="https://www.focus.de" target="_blank"><p>Focus</p></a>
</div>
<h3 align="left"><a href="javascript:show_menu('tv');">Fernsehen</a></h3>
<div id="tv" style="display:none;">
<a href="https://www.tv-movie.de/" target="_blank"><p>TV Movie</p></a>
<a href="https://www.prisma.de" target="_blank"><p>Prisma</p></a>
<a href="https://www.rtv.de/" target="_blank"><p>rtv</p></a>
</div>
</body>
</html>

Die p-Tags sind entbehrlich, die Links erscheinen dann halt nebeneinander. Ohne die h-Tags geht es zwar auch, sieht dann aber etwas seltsam aus.

xAndy1x · 18 November 2012

apolle schrieb:

Code:

<html><head><title>Kram & Zeug</title>
<script language="JavaScript"><!--
function show_menu ( name ) {
	if ( document.getElementById(name).style.display != "none" ) {
		document.getElementById(name).style.display = "none";
		document.getElementById('showuserbar').style.display = "";
	}
	else {
		document.getElementById(name).style.display = "";
		document.getElementById('showuserbar').style.display = "none";
	}
	return false;
}
//-->
</script>
</head>
<body bgcolor="#aaccee">
<!-- die Vorlage
<h3 align="left"><a href="javascript:show_menu('wasauchimmer');">Titel</a></h3>
<div id="wasauchimmer" style="display:none;">
<a href="URL1" target="_blank"><p>Text1</p></a>
<a href="URL2" target="_blank"><p>Text2</p></a>
<a href="URL3" target="_blank"><p>Text3</p></a>
</div>
-->
<h3 align="left"><a href="javascript:show_menu('news');">Nachrichten</a></h3>
<div id="news" style="display:none;">
<a href="https://www.tagesschau.de" target="_blank"><p>Tagesschau</p></a>
<a href="https://www.bbc.com" target="_blank"><p>BBC</p></a>
<a href="https://www.heute.de" target="_blank"><p>heute</p></a>
<a href="https://www.dpa.de" target="_blank"><p>DPA</p></a>
<a href="https://www.reuters.de" target="_blank"><p>Reuters</p></a>
<a href="https://www.cnn.com" target="_blank"><p>CNN</p></a>
</div>
<h3 align="left"><a href="javascript:show_menu('press');">Presse</a></h3>
<div id="press" style="display:none;">
<a href="https://www.zeit.de" target="_blank"><p>Zeit</p></a>
<a href="https://www.spiegel.de" target="_blank"><p>Spiegel</p></a>
<a href="https://www.focus.de" target="_blank"><p>Focus</p></a>
</div>
<h3 align="left"><a href="javascript:show_menu('tv');">Fernsehen</a></h3>
<div id="tv" style="display:none;">
<a href="https://www.tv-movie.de/" target="_blank"><p>TV Movie</p></a>
<a href="https://www.prisma.de" target="_blank"><p>Prisma</p></a>
<a href="https://www.rtv.de/" target="_blank"><p>rtv</p></a>
</div>
</body>
</html>

Die p-Tags sind entbehrlich, die Links erscheinen dann halt nebeneinander. Ohne die h-Tags geht es zwar auch, sieht dann aber etwas seltsam aus.

Danke für den Code aber wenn ich den einfürge kommt bei meinem Editor (Webocton - Scriptly) ein Script fehler

Hier einmal mein gesamter Code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>
    <title>AdeTVgerman</title>

    <link rel="stylesheet" type="text/css" href="style.css"/>
</head>

<body>
<table id="gesamt" border="0">
<tr>
<td colspan="2" id="logo"> </td>
</tr>
<tr>

<td valign="top" colspan="2">
<div id="menue1">
		<div id="abstand1">

			<div id="schalter1">
<script language="JavaScript"><!--
function show_menu ( name ) {
	if ( document.getElementById(name).style.display != "none" ) {
		document.getElementById(name).style.display = "none";
		document.getElementById('showuserbar').style.display = "";
	}
	else {
		document.getElementById(name).style.display = "";
		document.getElementById('showuserbar').style.display = "none";
	}
	return false;
}
//-->
</script>
</head>
<body bgcolor="#aaccee">
<!-- die Vorlage
<h3 align="left"><a href="javascript:show_menu('wasauchimmer');">Titel</a></h3>
<div id="wasauchimmer" style="display:none;">
<a href="URL1" target="_blank"><p>Text1</p></a>
<a href="URL2" target="_blank"><p>Text2</p></a>
<a href="URL3" target="_blank"><p>Text3</p></a>
</div>
-->
<h3 align="left"><a href="javascript:show_menu('news');">Nachrichten</a></h3>
<div id="news" style="display:none;">
<a href="https://www.tagesschau.de" target="_blank"><p>Tagesschau</p></a>
<a href="https://www.bbc.com" target="_blank"><p>BBC</p></a>
<a href="https://www.heute.de" target="_blank"><p>heute</p></a>
<a href="https://www.dpa.de" target="_blank"><p>DPA</p></a>
<a href="https://www.reuters.de" target="_blank"><p>Reuters</p></a>
<a href="https://www.cnn.com" target="_blank"><p>CNN</p></a>
</div>
<h3 align="left"><a href="javascript:show_menu('press');">Presse</a></h3>
<div id="press" style="display:none;">
<a href="https://www.zeit.de" target="_blank"><p>Zeit</p></a>
<a href="https://www.spiegel.de" target="_blank"><p>Spiegel</p></a>
<a href="https://www.focus.de" target="_blank"><p>Focus</p></a>
</div>
<h3 align="left"><a href="javascript:show_menu('tv');">Fernsehen</a></h3>
<div id="tv" style="display:none;">
<a href="https://www.tv-movie.de/" target="_blank"><p>TV Movie</p></a>
<a href="https://www.prisma.de" target="_blank"><p>Prisma</p></a>
<a href="https://www.rtv.de/" target="_blank"><p>rtv</p></a>
</div>



			</div>
		</div>
	</div>


</td>
</tr>
</table>
</td>
<td id="infos">Infos</td>
</tr>
</table>
</body>

<footer>
        	<li><a href="#">Impressum</a></li>
</footer>
</html>

Also was kann daran falsch sein?

Der Fehler kommt aber nur im Editor nicht auf der webseite.

Mfg
Andy

apolle · 18 November 2012

Den Editor kenne ich nicht, was dessen Fehlermeldungen betrifft muß ich raten. Vlt stolpert er ja nur über die (mindestens ungewöhnliche) html-Konstruktion:

<head> ... </head>
<body>
<table> ...
<script> ... </script>
</head>
<body> ...
</table> ...
</table>
</body> ...
</html>

kbot · 18 November 2012

xAndy1x schrieb:
Also was kann daran falsch sein?

wenn ich ein Browser wäre, würde ich deine Seite so lesen:
rot = Fehler

Code:

<!DOCTYPE>
<html>
  <head>
    <title></title>
  </head>
  [COLOR="RoyalBlue"][B]<body>[/B][/COLOR]
    <table>
    <tr><td></td></tr>
    <tr>
      <td>
        <div>
          <div>
            <div>
              <script></script>
              [COLOR="Red"]</head>[/COLOR]
              [COLOR="Red"][B]<body>[/B][/COLOR]
                <h3><a></a></h3>
                <div>
                  <a><p></p></a>
                  <a><p></p></a>
                  <a><p></p></a>
                </div>
                <h3><a></a></h3>
                <div>
                  <a><p></p></a>
                  <a><p></p></a>
                  <a><p></p></a>
                  <a><p></p></a>
                  <a><p></p></a>
                  <a><p></p></a>
                </div>
                <h3><a></a></h3>
                <div>
                  <a><p></p></a>
                  <a><p></p></a>
                  <a><p></p></a>
                </div>
                <h3><a></a></h3>
                <div>
                  <a><p></p></a>
                  <a><p></p></a>
                  <a><p></p></a>
                </div>
                [COLOR="Red"]</div>
                </div>
                </div>
                </td>
                </tr>
                </table>
                </td>
                <td></td>
                </tr>
                </table>[/COLOR]
  [COLOR="RoyalBlue"][B]</body>[/B][/COLOR]
  [COLOR="Red"]<footer>
  <li><a></a></li>
  </footer>[/COLOR]
</html>

<head> wird zweimal geschlossen
<body> wird mitten im <body></body> noch einmal geöffnet, aber nicht mehr geschlossen
nach </body> kann man keine weiteren Seiteninhalte einfügen

hast du schonmal etwas vom W3C HTML Validator gehört?

der könnte dir sehr helfen, wenn du keinen richtigen Editor hast (oder ihn nicht richtig nutzt), denn es gibt nicht immer User, die keine Lust auf schlafen haben und deshalb einfach mal etwas Zeit in die Arbeit anderer investieren

wenn erstmal das Grundgerüst korrekt ist, kann man anfangen zu schauen, ob und wie das Skript falsch ist

tleilax · 19 November 2012

Der Editor wird vermutlich eher über das öffnende Kommentartag im Scriptblock stolpern, wenn er einen Scriptfehler anzeigt.

HTML/CSS Menü - Unterpunkte verstecken

xAndy1x

Member

theHacker

sieht vor lauter Ads den Content nicht mehr

xAndy1x

Member

theHacker

sieht vor lauter Ads den Content nicht mehr

andos

New member

xAndy1x

Member

pummuk

Well-known member

GatheringXP

Member

apolle

Well-known member

xAndy1x

Member

apolle

Well-known member

kbot

warm draußen,oder?

tleilax

be forever curious