Dynamischer text mit DHTML

Beitrag von **cloidnerux** » Mi Apr 01, 2009 6:37 pm

Also, ich habe mir folgendes geadcht:
Ich habe ine Navigationsleiste, dort sind verschiedene links. So, wenn man jezt mit der Maus drüberfährt, soll darunter eine neue zeile mit einem Sub-menü entstehen, wo man noch einiges auswälen aknn. Nur wie bekomme ich das hin?
Ich hab schon einges verscuht und gescúcht, aber nihts brauchbares ist herausgekommen.?
Wie schaffe ich es diesen Dynamsichen text zu erzeugen udn wieder zu löschen?

*edit / Dirty Oerti: "dünamisch" im Betreff zu "dynamisch" */edit*

Dubbel · Beitrag von **Dubbel** » Mi Apr 01, 2009 8:15 pm

Hatte gerade eben schonmal geantwortet, aber hab dann erst gesehen, dass es beim Überfahren und nicht beim klicken passieren soll - man wird älter

Naja, hier nun eine Lösung, mit Javascript und CSS (eine andere Möglichkeit gibt es glaube ich auch nicht, wenn man kein Flash oder so einsetzen will.)

Code: Alles auswählen

<html>
<head>
<title>Submenu</title>
</head>
<body>
<div id="menu">
    <div style="width:40px;" onmouseover="document.getElementById('submenu1').style.display = 'inline';" onmouseout="document.getElementById('submenu1').style.display = 'none';">Sub1</div>
    <div id="submenu1" style="display:none;"  onmouseover="document.getElementById('submenu1').style.display = 'inline';" onmouseout="document.getElementById('submenu1').style.display = 'none';">
        <a href="http://www.haukeluebbers.de">Test1</a>
    </div>
    <noscript><div id="submenu1nojs"><a href="http://www.haukeluebbers.de">Test1</a></noscript>
     <div style="width:40px;" onmouseover="document.getElementById('submenu2').style.display = 'inline';" onmouseout="document.getElementById('submenu2').style.display = 'none';">Sub2</div>
    <div id="submenu2" style="display:none;"  onmouseover="document.getElementById('submenu2').style.display = 'inline';" onmouseout="document.getElementById('submenu2').style.display = 'none';">
    	<a href="http://www.heise.de">Test2</a>
    </div>
    <noscript><div id="submenu2nojs"><a href="http://www.heise.de">Test2</a></noscript>
</div>
</body>
</html>

Die Größte des Hauptmenu-divs (hier 40px) musst du anpassen, wenn man sie wegließe, würde das div über die gesamte Breite gehen, und immer das mouseover-Event auslösen, wenn man mit der Maus auf die Höhe des divs kommt. sonst ist der Code glaube ich relativ selbsterklärend - natürlich hab ich auch ein noscript für JavaScript-Verweigerer eingebaut

Achja: Ich bin kein großer Javascript-Experte oder Freund, aber es klappt, auch wenn man das vielleicht irgendwo eleganter hinbekommen kann

hackmack · Beitrag von **hackmack** » Mi Apr 01, 2009 8:41 pm

Geht auch ohne Javascript, nur mit CSS. Hier mal ein Beispiel:

HTML-Datei:

Code: Alles auswählen

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Dynamisches Menu</title>
    <link rel="Stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="mainframe">
<ul id="navi">
    <li>
        <a href="index.php">Home</a>
    </li>
    <li>
        <a href="bilder.php">Bilder</a>
    </li>
    <li>
        Sonstiges
        <ul>
            <li>
                <a href="sitemap.php">Sitemap</a>
            </li>
            <li>
                <a href="links.php">Links</a>
            </li>
            <li>
                <a href="disclaimer.php">Disclaimer</a>
            </li>
        </ul>
    </li>
</ul>


</div>
</body>
</html>

style.css

Code: Alles auswählen

body
{
    background-color: Black;
    color:White;
}
ul#navi, ul#navi li ul
{
    margin:0px;
    padding:0px;
}

#navi a
{
    color:white;
    text-decoration:none;
}
#navi li
{
    position:relative;
    list-style:none;
    float:left;
    background-image: url("navibutton.png"); 
    background-repeat:repeat-x;  
    height:30px;
    border: 1px solid white;
    width:138px;
    text-align:center;
    font-size:20px;
}
ul#navi li:hover
{
    background-image: url("navibutton_hover.png");
    background-repeat:repeat-x;
}
ul#navi li:active
{
    background-image: url("navibutton_active.png");
    background-repeat: repeat-x;
}
ul#navi a
{
    display:block;
    width:100%;
    height:100%;
}
#navi li ul
{
    display:none;
    position:absolute;
    top:30px;
    left:-1px;
}
*+html #navi li ul
{
    left:-17px;
}
#navi li:hover ul
{
    display:inline;
    width:100%;
}
#navi li:hover ul li
{
    float:none;
    
}

Mag weitaus nicht der beste Weg sein um so etwas zu machen, ist aber einer. Da ich mich mit CSS nicht wirklich auskenne, und es auch wieder eine Ewigkeit her ist, als ich das CSS geschrieben habe, kann ich dir nicht wirklich besser helfen.

Oder schau mal hier: http://de.selfhtml.org/css/layouts/anze ... modern.htm

Beitrag von **cloidnerux** » Mi Apr 01, 2009 8:48 pm

Ich suche einen Weg, TEXT hinzuzufügen und wieder zu löschen, also keine Styles ändern, das habe ich schon, aber ich will ja eine Neue Leiste unten an das menü anzufügen.

Dubbel · Beitrag von **Dubbel** » Mi Apr 01, 2009 9:10 pm

Hast du die Codebeispiele mal ausprobiert? Beide zeigen eine Liste bzw. Text unterhalb des Links an bzw. verstecken ihn, wenn der Mauszeiger weggeht!

Oder meinst du Ajax (also Daten nach dem eigentlichen Laden der HTML-Datei nachladen). Das wäre aber bei einem Menü, bei dem die Menüpunkte ja schon feststehen, aber nicht sinnvoll, weswegen man in der Webentwicklung, alle Submenüs lädt, sie versteckt, und nur bei Bedarf anzeigt.

Beitrag von **cloidnerux** » Fr Apr 03, 2009 6:28 pm

Also, ichwerde langsam verrückt mit der *`*************************************.
ich hab mich an den Code von Dubble gehalten, nur das ich für das menü kein div sondern ein <a href...> genommen habe und auch die abfragen angepast ahbe. Aber ich bekomme nie das menü angezeigt.
Wieso?

//Edit:

Code: Alles auswählen

<div id="menu">
           <a href="programmieren.htm" onmouseover="document.getElementById('submenuproggen').style.display = 'inline';" onmouseout="document.getElementById('submenuproggen').style.display = 'none';">Programmieren</a><a href="index.htm">link 2</a><a href="index.htm">link 3</a><a href="index.htm">link 4</a><a href="index.htm">link 5</a><div id="submenuproggen" style="display: none"></div>
        </div>

Das ist mein Code. Sry das er etwas komisch ausieht. ist nur kopiert.

Kerli · Beitrag von **Kerli** » Fr Apr 03, 2009 8:39 pm

cloidnerux hat geschrieben:Aber ich bekomme nie das menü angezeigt.

Was für ein Menü willst du denn sehen? Dein Untermenü ist doch leer.

cloidnerux hat geschrieben:Das ist mein Code.

Warum verwendest du denn Javascript? Das geht doch ganz einfach auch mit CSS. Schau dir doch noch einmal hackmack's Post an...

Beitrag von **cloidnerux** » Fr Apr 03, 2009 8:56 pm

Ich hab mich wie bereits erwähnt auf dubbels post bezogen.
Ich verwende keine CSS weil es mir momenat etwas zu viel Arbeit wäre, da ich das für ein Menü für mien Website verwende, wo man, wenn man über ein Link fährt, eine zeile darunter horizontal unterpunkte angezeigt werden.
//EDIT:
Es funktioniert jezt Danke

Community

Einstieg

Sprachen

Bibliotheksfunktionen

Fachthemen

Dynamischer text mit DHTML

Dynamischer text mit DHTML

Re: Dynamischer text mit DHTML

Re: Dynamischer text mit DHTML

Re: Dynamischer text mit DHTML

Re: Dynamischer text mit DHTML

Re: Dynamischer text mit DHTML

Re: Dynamischer text mit DHTML

Re: Dynamischer text mit DHTML