Vorschläge für Menü Gestaltung gesucht

Diskutiere Vorschläge für Menü Gestaltung gesucht im Web & Grafik Forum im Bereich Internet & Telekomunikation Forum; Hallo zusammen, ich möchte folgendes erreichen: Ein Menü auf der linken Seite (erst mal nicht das Problem) und rechts der Inhalt der Links...
  • Vorschläge für Menü Gestaltung gesucht Beitrag #1
T

trms

Bekanntes Mitglied
Dabei seit
11.01.2003
Beiträge
266
Reaktionspunkte
0
Hallo zusammen,

ich möchte folgendes erreichen:

Ein Menü auf der linken Seite (erst mal nicht das Problem) und rechts der Inhalt der Links.

Jetzt die Aufgabe für die ich noch keine Lösung habe:
Die Links im Menü sollen gezielte Zellen einer Tabelle auf den Hauptbereich (rechts) anzeigen.
Um es besser zu versehen: Gesamttabelle beinhaltet viele Sätze die in deutsch und englisch verfasst sind.

Als Quick und dirty würde ich verstehen, für jede Zelle eine html Datei anzulegen. Diese möchte ich aber nicht haben, genauso möchte ich nicht eine lange Seite haben bei der ich per Anker Verweis hoch und runter springen kann.

Toll wäre es, wenn die Möglichkeit besteht meine Tabellenzellen mit einer show/hide Funktion zu versehen.
 
  • Vorschläge für Menü Gestaltung gesucht Beitrag #2
fox99

fox99

Bekanntes Mitglied
Dabei seit
27.11.1999
Beiträge
3.948
Reaktionspunkte
27
Ort
Omicron Persei 8
könnte mit javascript gehen...

such mal nach "html spoiler" mit der suchmaschine deiner wahl. da dürften genug beispiele zu finden sein, die du leicht anpassen kannst.
 
  • Vorschläge für Menü Gestaltung gesucht Beitrag #3
T

trms

Bekanntes Mitglied
Dabei seit
11.01.2003
Beiträge
266
Reaktionspunkte
0
Hallo fox99

super Tipp!
Bin auf diese Interessante Seite gestoßen und werde es mal ausprobieren.

http://gendou.com/t/26412
 
  • Vorschläge für Menü Gestaltung gesucht Beitrag #4
T

trms

Bekanntes Mitglied
Dabei seit
11.01.2003
Beiträge
266
Reaktionspunkte
0
Hab ein echt simplen spoiler gefunden (siehe unten).
Dies schein aber nur bei Texten zu klappen.
Jemand eine Idee wie ich ganze Tabellen Zeilen ein- bzw. ausblenden kann?

Header Script:
<code>
<script type="text/javascript">
function spoil(id){
if (document.getElementById) {
var divid = document.getElementById(id);
divid.style.display = (divid.style.display=='block'?'none':'block');
} }
</script>
</code>


Der Spoiler sieht dann so aus..
<code>
<span style="cursor:pointer;" onclick="spoil('id1');">Spoiler Titel</span>

<div id="id1" style="display:none;">
Hier der versteckte Text!
</div>
</code>
 
  • Vorschläge für Menü Gestaltung gesucht Beitrag #5
fox99

fox99

Bekanntes Mitglied
Dabei seit
27.11.1999
Beiträge
3.948
Reaktionspunkte
27
Ort
Omicron Persei 8
keine ahnung wo das problem ist:
Code:
<script type="text/javascript">
function spoil(id){
if (document.getElementById) {
var divid = document.getElementById(id);
divid.style.display = (divid.style.display=='block'?'none':'block');
} }
</script>

<span style="cursor:pointer;" onclick="spoil('id1');">Spoiler Titel</span>

<div id="id1" style="display:none;">
Hier der versteckte Text!
<table border=1>
  <tr>
    <td>bla</td>
  </tr>
</table>
</div>
 
  • Vorschläge für Menü Gestaltung gesucht Beitrag #6
T

trms

Bekanntes Mitglied
Dabei seit
11.01.2003
Beiträge
266
Reaktionspunkte
0
keine ahnung wo das problem ist:
Code:
<script type="text/javascript">
function spoil(id){
if (document.getElementById) {
var divid = document.getElementById(id);
divid.style.display = (divid.style.display=='block'?'none':'block');
} }
</script>

<span style="cursor:pointer;" onclick="spoil('id1');">Spoiler Titel</span>

<div id="id1" style="display:none;">
Hier der versteckte Text!
<table border=1>
  <tr>
    <td>bla</td>
  </tr>
</table>
</div>

Nein, das meine ich nicht.
Ich will nicht die ganze Tabelle ansteuern sondern nur die Tabellen Zelle quasi das tr
 
  • Vorschläge für Menü Gestaltung gesucht Beitrag #7
fox99

fox99

Bekanntes Mitglied
Dabei seit
27.11.1999
Beiträge
3.948
Reaktionspunkte
27
Ort
Omicron Persei 8
Code:
<script type="text/javascript">
function spoil(id){
if (document.getElementById) {
var divid = document.getElementById(id);
divid.style.display = (divid.style.display=='block'?'none':'block');
} }
</script>

<span style="cursor:pointer;" onclick="spoil('id1');">Spoiler Titel</span>

<div>
Hier der versteckte Text!
<table border=1>
  <tr><td>blubb</td></tr>
  <tr id="id1" style="display:none;">
    <td>bla</td>
  </tr>
</table>
</div>
oder gib mal was von deinem code.
 
  • Vorschläge für Menü Gestaltung gesucht Beitrag #8
T

trms

Bekanntes Mitglied
Dabei seit
11.01.2003
Beiträge
266
Reaktionspunkte
0
Vielen Dank, ich habe es soweit mal eingearbeitet und mir das Ergebnis angesehen.

Die Zellen werden jetzt soweit aus/-eingeblendet ABER meine für die TDs reservierten CSS classen greifen nicht mehr (width="50%").

mein html code sieht wie folgt aus:

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


<html style="direction: ltr;" lang="de-de"><head><meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type">
<title>Startseite</title>
<link rel="stylesheet" href="format.css" type="text/css">
<link rel="stylesheet" href="menue.css" type="text/css">


<script type="text/javascript">
function spoil(id){
if (document.getElementById) {
var divid = document.getElementById(id);
divid.style.display = (divid.style.display=='block'?'none':'block');
} }
</script>


</head>
<body style="direction: ltr;">
<div align="center">


<!--ende oben-->
<table id="main_inhalt" align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center" valign="top">
<table id="inhalt" align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td id="inbox">
<h2>[Name Thema]. </h2>


<!-- anfang Inhaltsverzeichnis Subtopics-->
<table class="inhaltsver">
<tbody>
<tr>
<td class="ttype1">Inhalt:</td>
</tr>
<tr>
<td class="itabelle"><span style="cursor:pointer;" onclick="spoil('id1');">1. wenn hier klicken dann Zeile xxx samt Text Inhalt und Überschrift [Subtopic1] einanzeigen</span></td>
</tr>
<tr>
<td class="itabelle"><span style="cursor:pointer;" onclick="spoil('id2');">2. wenn hier klicken, dann Zeile yyy samt Text Inhalt und Überschrift [Subtopic2] einanzeigen</span></td>
</tr>
</tbody>
</table>
<br>
<!-- ende Inhaltsverzeichnis Subtopics-->


<!-- anfang Sammlung-->
<div>
<table class="itabelle">
<tbody>
<tr>
<td class="ttype1">deutsch</td>
<td class="ttype1">englisch</td>
</tr>
<tr>
<td colspan="2" rowspan="1"></td>
</tr>


<tr>
<td class="ttype2" colspan="2" rowspan="1">[Subtopic1]</td>
</tr>
<tr id="id1" style="display:none;">
<td style="font-family: Calibri;" class="ttype3">xxx</td>
<td style="font-family: Calibri;" class="ttype3">xxx</td>
</tr>
<tr>
<td class="ttype2" colspan="2" rowspan="1">[Subtopic2]</td>
</tr>
<tr id="id2" style="display:none;">
<td style="font-family: Calibri;" class="ttype3">yyy</td>
<td style="font-family: Calibri;" class="ttype3">yyy</td>
</tr>
</tbody>
</table>
</div>
<!-- ende Sammlung-->


<!-- ende inhalt-->
</td>
<!-- ende inhalt-->
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</body></html>

meine CSS format sieht wie folgt aus:

Code:
/* Generated by KompoZer */
body {
  margin: 20px 0px;
  padding: 0px;
  background-color: #ffffff;
  width: 100%;
  font-size: 17px;
  line-height: 20px;
  font-family: arial,helvetica,tahoma,verdana,sans-serif;
}
#main {
  border: 1px solid #000000;
  margin: 0px;
  text-align: center;
  width: 99%;
}
#main_top {
  width: 100%;
}
#top1 {
  border-bottom: 1px solid #000000;
  padding-left: 60px;
  padding-right: 60px;
  height: 100px;
  vertical-align: middle;
  color: #deede4;
  background-color: #7cb179;
  width: 100%;
  background-image: url(images/top1.jpg);
  background-repeat: repeat-x;
  background-position: center top;
}
#top2 {
  height: 100px;
  text-align: center;
  vertical-align: middle;
  color: #b6b6b6;
  font-size: 14px;
  background-image: url(images/top2.jpg);
  background-repeat: repeat-x;
  background-position: center top;
}
#hpname {
  letter-spacing: -1px;
  font-size: 48px;
  font-family: arial,helvetica,verdana,tahoma,sans-serif;
  color: #000000;
}
#slogan {
  letter-spacing: -1px;
  font-size: 22px;
  font-family: arial,helvetica,verdana,tahoma,sans-serif;
  color: #ffffff;
}
#main_inhalt {
  width: 100%;
  height: 570px;
}
#inhalt {
  border-bottom: 0px solid #000000;
  width: 100%;
  padding-left: 50px;
  padding-right: 50px;
  background-image: url(images/back.jpg);
  background-repeat: repeat-x;
  background-position: center top;
  background-color: #7cb179;
  height: 100%;
}
#inbox {
  text-align: justify;
  padding-top: 40px;
  padding-bottom: 40px;
  vertical-align: top;
  font-size: 17px;
  line-height: 20px;
  font-family: arial,helvetica,tahoma,verdana,sans-serif;
  color: #000000;
  width: 100%;
}
.itabelle {
  border: 1pt solid black;
  font-size: 12pt;
  background-color: #cccccc;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
.inhaltsver {
  border: 1pt solid black;
  font-family: Calibri;
  font-size: 12pt;
  color: black;
  background-color: #cccccc;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}
.ttype1 {
  border-bottom: 1px dashed #000000;
  color: #000000;
  letter-spacing: 2px;
  font-size: 16pt;
  font-style: normal;
  font-family: Arial;
  width: 50%;
  text-align: center;
  font-weight: bold;
}
.ttype2 {
  border-bottom: 0px dashed #000000;
  color: #000000;
  letter-spacing: 2px;
  font-style: normal;
  font-family: Arial;
  width: 50%;
  text-align: center;
  font-weight: bold;
  font-size: 13pt;
}
.ttype3 {
  border: 1px solid #000000;
  width: 50%;
}
h2 {
  font-family: arial,helvetica,tahoma,verdana,sans-serif;
  font-size: 24px;
}
.img_links {
  border: 1px solid #ffffff;
  margin: 0px 30px 30px 0px;
  float: left;
}
.img_rechts {
  border: 1px solid #ffffff;
  margin: 30px 0px 30px 30px;
  float: right;
}
.img_test {
  border: 1px solid #ffffff;
  margin: 0px;
}

meine CSS menue sieht wie folgt aus:

Code:
#menuhorizontal a, #menuhorizontal a:visited , #menuhorizontal a:active {display: block;
color:#000000;
font-weight:bold;
text-transform:capitalize;font-variant:small-caps;
text-decoration:none ;font-family:verdana, sans-serif; font-size: 14px;
padding-left: 10px;padding-right: 10px; padding-bottom: 0px; padding-top:0px;
margin-left: 0px;margin-right: 0px;
border-left:solid 0px #AAAAAA;
height:110px;
line-height:110px;
text-align:center;
}


#menuhorizontal a:hover {background:transparent; text-decoration:none ;
color:#4E804A;
text-decoration:underline ;


}


.trenn {width:1px;}






/* allgemeine links im text */


a:link, a:visited, a:active{ font-size: 17px;line-height: 20px;
font-family: arial, helvetica, tahoma ,verdana, sans-serif;color:#fff      ;text-decoration:underline;background-color:#;}


a:hover{
color:#629C5C;text-decoration:none;
background-color:#fff;}
 
  • Vorschläge für Menü Gestaltung gesucht Beitrag #9
fox99

fox99

Bekanntes Mitglied
Dabei seit
27.11.1999
Beiträge
3.948
Reaktionspunkte
27
Ort
Omicron Persei 8
schon versucht anstatt display:block das zu setzen: display:table-row?
 
  • Vorschläge für Menü Gestaltung gesucht Beitrag #10
T

trms

Bekanntes Mitglied
Dabei seit
11.01.2003
Beiträge
266
Reaktionspunkte
0
Der Wahnsinn! läuft!:applaus:
Jetzt noch zwei finale Fragen:

1) Ich benutze dem Kompozer 0.7 zum editieren. Wenn dich diese HTML Datei nun einlade, sehe ich quasi nicht mehr den verstecken Text. Kennst du/jemand eine Funktion um den Text im Kompozer wieder sichtbar zu machen?

2) Nehmen wir an ich habe ein Inhaltsverzeichnis auf einer anderen html Seite und möchte gezielt per klick auf der weitergeleiteten Seite meine "id1" aufrufen (sichtbar machen). Was wären dann die Vorgehensweise?

Zum Abschluss möchte ich mich für dir (fox99) für deine sehr guten Tipps bedanken die mich sehr weiter gebracht haben, ich habe nun mal absolut keine Javascript Erfahrungen.:verbeugen:
 
Thema:

Vorschläge für Menü Gestaltung gesucht

ANGEBOTE & SPONSOREN

https://www.mofapower.de/

Statistik des Forums

Themen
213.177
Beiträge
1.579.167
Mitglieder
55.871
Neuestes Mitglied
Mein-Helmut
Oben