Ergebnis 1 bis 5 von 5

Thema: könnte da mal Hilfe gebrauchen

  1. #1
    Gast

    Standard könnte da mal Hilfe gebrauchen

    ich versuche mich gerade an meiner ersten Seite und hab da am linke Rand ne Menüleiste. Wenn ich mit der Maus über einzelne Punkte der Leiste gehe sollen unter dem Punkt Unterpunkte stehen. Das funktioniert sicher mit mouseover. Hier mal ein kläglich gescheiterter Versuch:

    <html>

    <head>
    <meta name="GENERATOR" content="Microsoft FrontPage 5.0">
    <meta name="ProgId" content="FrontPage.Editor.Document">
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>click</title>
    </head>

    <script type="text/javascript">
    function showEvent(id) {
    var d=document.getElementById("event"+id);
    var i=document.getElementById("e"+id);

    if (d.style.display == "") {
    d.style.display = "none";
    } else {
    d.style.display = "";
    }

    if (i.isactive == false || i.isactive == undefined) {
    i.style.backgroundColor = "#000";
    i.isactive = true;
    } else {
    i.style.backgroundColor = "#ffffff";
    i.isactive = false;
    }
    }

    function highlight(obj) {
    if (obj.isactive != true) {
    obj.style.backgroundColor = "yellow";
    }
    }

    function delight(obj) {
    if (obj.isactive != true) {
    obj.style.backgroundColor = "#ffffff";
    }
    }
    </script>
    <body>
    <table cellpadding="0" cellspacing="0" border="1" width="400">
    <tr id="e20" onclick="showEvent('20')" onmouseover="highlight(this)" onmouseout="delight(this)">
    <td>click</td>
    </tr>
    <tr>
    <td><div id="event20" class="tr" style="display: none;"></div></td>
    </tr>
    <tr class="trnormal" id="e21" onclick="showEvent('21')"
    onmouseover="<tr>
    <td>click2<td>
    </tr>"
    onmouseout="delight(this)">
    <td>click</td>
    </tr>

    <tr>
    <td><div id="event21" class="tr" style="display: none;"></div><td>
    </tr>
    </table>


    </html>

    Ich hab da schon einen ähnlichen Code gefunden, so in der Art werde ich den auch versuchen zu verwenden. Ich hoffe das das Prinzip das dahinter steht durchkommt. Wäre über Hilfe sehr erfreut.

    MfG

    Stefan
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Gast

    Standard

    Ich hab da mal noch was gefunden. Sieht vom Prinzip her sehr gut aus. Aber folgt unter dem Quelltext.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <title>Dynamisch Navigationsleisten auch im IE einblenden</title>
    <style type="text/css">
    body, p a {
    font: normal 100.01% Helvetica, Arial, sans-serif;
    color: black; background-color: #ffffe0;
    }

    div#Rahmen {
    width: 47.1em;
    padding: 0.8em;
    border: 1px solid black;
    background-color: silver;
    }
    * html div#Rahmen { /* Korrektur fuer IE 5.x */
    width: 48.7em;
    w\idth: 47.1em;
    }
    div#Rahmen div {
    clear: left;
    }
    ul#Navigation {
    margin: 0; padding: 0;
    text-align: center;
    }

    ul#Navigation li {
    list-style: none;
    float: left; /* ohne width - nach CSS 2.1 erlaubt */
    position: relative;
    margin: 0.4em; padding: 0;
    }
    * html ul#Navigation li { /* Korrektur fuer den IE */
    margin-bottom: -0.4em;
    }

    ul#Navigation li ul {
    margin: 0; padding: 0;
    position: absolute;
    top: 1.6em; left: -0.4em;
    display: none; /* Unternavigation ausblenden */
    }
    * html ul#Navigation li ul { /* Korrektur fuer IE 5.x */
    left: -1.5em;
    lef\t: -0.4em;
    }
    ul#Navigation li:hover ul {
    display: block; /* Unternavigation in modernen Browsern einblenden */
    }
    ul#Navigation li ul li {
    float: none;
    display: block;
    margin-bottom: 0.2em;
    }

    ul#Navigation a, ul#Navigation span {
    display: block;
    width: 6.4em; /* Breite den in li enthaltenen Elementen zuweisen */
    padding: 0.2em 1em;
    text-decoration: none; font-weight: bold;
    border: 1px solid black;
    border-left-color: white; border-top-color: white;
    color: maroon; background-color: #ccc;
    }
    * html ul#Navigation a, * html ul#Navigation span {
    width: 8.6em; /* Breite nach altem MS-Boxmodell fuer IE 5.x */
    w\idth: 6.4em; /* korrekte Breite fuer den IE 6 im standardkompatiblen Modus */
    }
    ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
    border-color: white;
    border-left-color: black; border-top-color: black;
    color: white; background-color: gray;
    }
    li a#aktuell { /* aktuelle Rubrik kennzeichnen */
    color: maroon; background-color: silver;
    }
    ul#Navigation li ul span { /* aktuelle Unterseite kennzeichnen */
    background-color: maroon;
    }

    </style>

    <script type="text/javascript">
    if(window.navigator.systemLanguage && !window.navigator.language) {
    function hoverIE() {
    var LI = document.getElementById("Navigation").firstChild;
    do {
    if (sucheUL(LI.firstChild)) {
    LI.onmouseover=einblenden; LI.onmouseout=ausblenden;
    }
    LI = LI.nextSibling;
    }
    while(LI);
    }

    function sucheUL(UL) {
    do {
    if(UL) UL = UL.nextSibling;
    if(UL && UL.nodeName == "UL") return UL;
    }
    while(UL);
    return false;
    }

    function einblenden() {
    var UL = sucheUL(this.firstChild);
    UL.style.display = "block"; UL.style.backgroundColor = "silver";
    }
    function ausblenden() {
    sucheUL(this.firstChild).style.display = "none";
    }

    window.onload=hoverIE;
    }
    </script>

    </head>
    <body>
    <h1 id="Beispiel">Dynamisch Navigationsleisten auch im IE einblenden</h1>

    <div id="Rahmen"><ul id="Navigation">[*]Seite 1
    [*]Seite 2
    <ul>[*]Seite 2a[*]Seite 2b[/list]

    [*]Seite 3
    [*]Seite 4
    <ul>[*]Seite 4a[*]<span>aktuelle Seite</span>[*]Seite 4c[/list]

    [*]Seite 5[/list]<div></div></div>



    zurück</p>
    </body>
    </html>


    Aber: wie bekomme ich das hin, dass die Leiste nich oben horizontal verläuft, sondern links am Rand vertikal ?

  3. #3
    König(in) Avatar von yeti66
    Registriert seit
    21.10.2005
    Ort
    Harz
    Alter
    52
    Beiträge
    1.152
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Hi, vielleicht findest Du ja hier etwas, was Du für Deine Bedürfnisse anpassen kannst.

    Gruß yeti66
    Gruß yeti66
    ___________________________________________
    http://www.phpcontact.net/ Kontaktformulare für die eigene Hompage
    http://www.norbert-klippstein.de Freiberuflicher Musiker für individuelle Musikdienstleistungen

  4. #4
    Gast

    Standard

    nach 5h Recherche / Suche und Herumwerkeln bin ich nun soweit:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <title>Dynamisch Navigationsleisten auch im IE einblenden</title>
    <script type="text/javascript">
    if(window.navigator.systemLanguage && !window.navigator.language) {
    function hoverIE() {
    var LI = document.getElementById("Navigation").firstChild;
    do {
    if (sucheUL(LI.firstChild)) {
    LI.onmouseover=einblenden; LI.onmouseout=ausblenden;
    }
    LI = LI.nextSibling;
    }
    while(LI);
    }

    function sucheUL(UL) {
    do {
    if(UL) UL = UL.nextSibling;
    if(UL && UL.nodeName == "UL") return UL;
    }
    while(UL);
    return false;
    }

    function einblenden() {
    var UL = sucheUL(this.firstChild);
    UL.style.display = "block"; UL.style.backgroundColor = "silver";
    }
    function ausblenden() {
    sucheUL(this.firstChild).style.display = "none";
    }

    window.onload=hoverIE;
    }
    </script>

    <style type="text/css">
    body {
    font: normal 100.01% Helvetica, Arial, sans-serif;
    color: black; background-color: white;
    }

    ul#Navigation
    {
    width: 10em;
    margin: 0; padding: 0em 0em 0em;
    border: 1px solid black;
    background-color: white;
    }
    * html ul#Navigation
    { /* Korrekturen fuer IE 5.x */
    width: 11.6em;
    w\idth: 10em;
    padding-left: 0;
    padd\ing-left: 0em;
    }
    ul#Navigation li
    {
    list-style: none;
    margin: 0.4em; padding: 0;
    }

    ul#Navigation a, ul#Navigation span, ul#Navigation h2
    {
    display:block;
    padding: 0em;
    text-decoration: none; font-weight: bold;
    border: 1px solid black;
    border-left-color: white; border-top-color: white;
    color: black; background-color: white;
    }
    * html ul#Navigation a, ul#Navigation span, ul#Navigation h2
    {
    width: 100%; /* Breitenangabe fuer IE 5.x */
    w\idth: 8.8em; /* Breitenangabe fuer IE 6 */
    }
    ul#Navigation a:hover, ul#Navigation span
    {
    border-color: white;
    border-left-color: black; border-top-color: black;
    color: white; background-color: #000080;
    }
    ul#Navigation h2
    {
    font-size: 1em;
    margin: 1.1em 0 0;
    border-color: gray;
    color: white; background-color: #000080;
    }

    </style>

    </head>
    <body style="background-color: #FFFFFF">
    <h1 id="Beispiel">Dynamisch Navigationsleisten auch im IE einblenden</h1>

    <div id="Rahmen" style="width: 170; height: 724"><ul id="Navigation">[*]<font color="#000000">Seite1</font>
    [*]<font color="#000000">Seite2</font>
    <ul>[*]<font color="#000000">Seite 2a</font>[*]<font color="#000000">Seite 2b</font>[/list]

    [*]<font color="#000000">Seite 3</font>
    [*]<font color="#000000">Seite 4</font>
    <ul>[*]<font color="#000000">Seite 4a</font>[*]<span><font color="#000000">aktuelle Seite</font></span>[*]<font color="#000000">Seite 4c</font>[/list]

    [*]<font color="#000000">Seite 5</font>[/list]<div></div></div>



    zurück</p>
    </body>
    </html>

    kann man bestimmt noch kürzern, aber darum gehts nicht.
    folgendes Problem:
    Mouseover funzt, man sieht die untermenüs, dummerweise kann ich die nicht anwählen, denn sobald ich da rauf gehe, verschwinden die, weil ja das mouseover weg ist
    Kann man das irgendwie später ausblenden lassen? mit ner sekunde verzögerung oder sowas.

    Danke schon mal

    Stefan

  5. #5
    König(in) Avatar von yeti66
    Registriert seit
    21.10.2005
    Ort
    Harz
    Alter
    52
    Beiträge
    1.152
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Gast,

    1. tu Dir ein Gefallen und melde Dich im Forum an
    2. mach es Dir nicht so schwer - hier hat Raphael Götter schon vorgearbeitet:
    http://tutorials.alsacreations.com/modelesmenus/vd2.htm

    Allerdings ist es eigentlich nicht ratsam die Navigation mit JS zu machen, da viele aus Sicherheitsgründen JS abschalten und dann geht nicht mehr viel.
    Du kannst das ganz auch mit CSS lösen. siehe http://www.staettner.de/ und dann auf Planung, dann siehst Du den Unterschied.

    Gruß yeti66
    Gruß yeti66
    ___________________________________________
    http://www.phpcontact.net/ Kontaktformulare für die eigene Hompage
    http://www.norbert-klippstein.de Freiberuflicher Musiker für individuelle Musikdienstleistungen

Ähnliche Themen

  1. Wie könnte man das machen?
    Von guest im Forum HTML & CSS Forum
    Antworten: 16
    Letzter Beitrag: 23.06.2007, 14:12
  2. ich könnte ihn erschießen
    Von lala Häschen im Forum Off Topic und Quasselbox
    Antworten: 3
    Letzter Beitrag: 09.12.2006, 14:34
  3. hallöchen an die Profis, könnte etwas Hilfe gebrauchen
    Von claudia1 im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 17.09.2006, 15:46
  4. Was könnte das sein?!
    Von Isabel im Forum Computer - Internet Forum
    Antworten: 3
    Letzter Beitrag: 21.08.2005, 18:53
  5. Könnte es sein.........
    Von Pfeffi im Forum Off Topic und Quasselbox
    Antworten: 13
    Letzter Beitrag: 03.10.2003, 20:48

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •