Menüs, Menüs erscheinen wenn man mit dem.. Einstellungen

[lain]

Hallo ,


...Cursor einen Link berührt. Wie auf dieser Seite . Wie mach ich das ?

Ich hoffe auf baldigen Rat . Danke im voraus..

[amethyst]

Hallo Lain,

das ist der Hover-Effekt bei Links mit CSS. Hier der Link dazu ;-))

Gruß Amethyst

[lain]

Danke , aber ich verstehe nicht so ganz was du meinst . Ich meine auf www.dhtmlcentral.com , wenn man mit dem Cursor oben auf "News" oder "Projects" geht , da erscheint ein Menü .

[amethyst]

Hallo ,


...Cursor einen Link berührt. Wie auf dieser Seite . Wie mach ich das ?

Ich hoffe auf baldigen Rat . Danke im voraus..

Sorry, ich hatte den Link und die Überschrift übersehen.
Das ist mit Java-Script realisiert und da bin ich überfragt, da ich meine HTML-Seiten möglichst Java-Script-frei erstelle.

Gruß Amethyst

Der Beitrag wurde von amethyst bearbeitet: 30.04.2004 - 20:25

[Gast_CaVo_*]

http://www.dhtmlcentral.com/projects/coolmenus/

Gruss Carsten

[lain]

Jo , die Seite kenn ich. Habe auch eine Version runtergeladen , aber die Vorschau im Browser geht nicht wenn ich die Scripts reinkopiere.

[Conny]

...aber die Vorschau im Browser geht nicht wenn ich die Scripts reinkopiere.

Hi,
gibt es denn wenigstens eine Fehlermeldung?

[lain]

In Phase 5.0 kann die Seite nicht angezeigt werden und in 5.3 brauche ich angeblich den IE 5.5+ .

[Conny]

Kannst Du die Seite -sammt eingefügtem Script- Online stellen und uns hier ein Link einstellen?

Denn ohne Einsicht auf dem was Du da so bastelst wird es schwer Dich zu helfen...

cu
Conny

[lain]

css

<script language="text/css">
#box
{
position:absolute;
bottom:2em;
right:2em;
}
#box a
{
color:#000000;
background:##003030;
text-decoration:overline;
display-block;
padding:0.4em;
border: 1px solid black;
}
#box a:hover
{
color:black;
text-decoration:underline;
background:#00007F;
width:25em;
border: 1px solid white;
}
#box a .info
{
display:none;
}
#box a:hover .info
{
color:black;
background:#5F0000;
border: 1px solid black;
font-weight:normal;
display:block;
padding:0.6em;
position:absolute;
bottom:2em;
right:2em;
}

html :

<div id="box">
<a href="#">•&nbsp;Test-Button 1
<span class="info">
Hier stehendann die Infos.
</span>
</a>
</div>

Das funktioniert nicht . Diesmal erscheint nur der Link , und keine Box. Was mache ich falsch ?

Woher ich den Link hab'.

[i.b.g]

Hallo,

wenn Du die Beispiele dieser Seite, die übrigens recht interessant ist - auch ich schau ab und an dort vorbei, benutzt, dann musst Du Dir aber auch diese Seite anschauen:

Die Browser.

Nicht alle Browser verstehen alle CSS-Spezifikationen. Einige Browser haben sogar proprietäre Implementationen. Vieles was z.B. im Mozilla funktioniert, wird im IE gar nicht unterstützt. Die Gestaltung der Scrollleisten ist hingegen wieder etwas, das nur im IE arbeitet. Gehört auch nicht zum Standard.

Also wenn Du den CSS-Hover-Effekt haben willst, dann geht das im Moment nach meiner Kenntnis nur im Mozilla. Und genau deshalb müssen sich viele Webgestalter solche Krücken und Verrenkungen - auch mit Javascript oder Serverscripts - einfallen lassen, um einigermaßen ansprechende Navigationen usw. hinzubekommen. Könnten alle Browser diese CSS-Spezifikationen richtig interpretieren, dann hätten wir alle es wesentlich leichter.

[amethyst]

Hallo Ingo,
Widerspruch ;-))

Also wenn Du den CSS-Hover-Effekt haben willst, dann geht das im Moment nach meiner Kenntnis nur im Mozilla.

Hover-Effekte funktionieren im IE 6.0, Firefox, Opera und Mozilla. Allerdings hast Du recht, wenn Du sagst, dass es einige Mühe kostet, dass es überall passt, ich bastel nämlich gerade daran. Topchange hat die Hover-Effekte für alle Browser auf seiner Seite sehr gut umgesetzt und das völlig ohne Java.

Für die alten Browser muss das Menü eben auch ohne CSS ansehbar und praktikabel sein, aber was nützt das Menü, wenn die auch alle anderer CSS-Codes nicht verstehen (seufz).

Lieber Gruß Uschi

[lain]

Ich hab den IE 6.0 , und kann diese Menüs auf anderen Seite sehen. Ich habe auch mal so ein Menü hinbekommen , nur will ich es wie auf dieser , dieser und/oder dieser Seite hinbekommen. Ich würde halt gern den Code dafür wissen.

Der Beitrag wurde von lain bearbeitet: 02.05.2004 - 15:28

[amethyst]

Das sind Java-Menüs und die Scripts dazu, müsstest Du auf Java-Script-Seiten suchen.

Gruß Amethyst

[i.b.g]

Hallo,

@lain
also alle von Dir angeführten Seiten arbeiten mit einem mächtig gewaltigen Javascript von Javascript-Altmeister T.Brattli. Der hat schon DHTML fabriziert, da war HTML gerade bei 3.2. Wenn Du mal die Quellcodeansicht aufrufst, wirst Du sehen was Dir da entgegen schlägt ;-( .

Das ist zwar programmtechnisch schon genial, aber nutzerfreundlich weiß Gott nicht, weil es nur funktioniert, wenn Javascript auch eingeschaltet ist.

Wenn Du dazu mehr wissen möchtest musst Du dich bei T. Brattli - Hompage umschauen und das ganze versuchen nachzuvollziehen. Trivial ist es nicht.

Ansonsten hast Du bei Fractulum.net schon wesentlich bessere Anleitungen.

@amethyst
Es ging um Hoover-Effekte für ein gutes Navigationsmenü. Wenn Du Dir diese Seite mal mit dem IE und mit dem Mozilla anschaust, dann wirst Du sehen, dass es eben nicht alles im IE funktioniert. Gut ... Opera und den Rest hab ich nicht getestet.

Der Beitrag wurde von i.b.g bearbeitet: 02.05.2004 - 14:43

[lain]

Könnte man Java nicht umgehen und per CSS solch einen Block erstellen ? Ein cooleres Design für eine HP will mir einfach nicht einfallen..

---

Also diesen Block habe ich mit CSS doch noch hingekriegt. Aber jetzt frage ich mich , wie ich mehrere Blöcke bei der Mausberührung erscheinen lassen und diese dann als Link einstellen kann.

hoffe auf baldigen Rat..

Der Beitrag wurde von lain bearbeitet: 02.05.2004 - 23:15

[i.b.g]

Hallo,

du musst für jede Box, die ein- und ausgeblendet werden soll, eine eigene CSS-Definition anlegen. Genau wie das in diesem Beispiel gezeigt wird. Schau den Quelltext an und es wird deutlich. Aber das funktioniert nicht im IE. Leider! ;-(

Du wirst zur Zeit nicht um ein Script für diese Effekte drum rum kommen, es sei denn Du ignorierst den IE, was in bekannten Umgebungen vielleicht funktioniert, für öffentliche Auftritte hingegen der Tod einer Website ist.

Der Beitrag wurde von i.b.g bearbeitet: 03.05.2004 - 6:43

[lain]

Welcher Browser käme dafür in Frage ?
Kannst du mir vielleicht auf die Spürnge helfen und mir den Code für eine weitere box zeigen ? Bis her habe ich das alles eingegeben, was auch einwandferi klappt:

CSS :

<style type="text/css">
<!--

#box a
{color:#003F00;
background:transparent;
font-bold:14 px Times New Roman;
text-decoration:none;
display:block;
width:80px;
padding:0px;
position:absolute; bottom:2;
border:0px solid white;}
#box a:hover
{color:#003F00;
background:transparent;
position:absolute; bottom:2;
border:0px white;
}
#box a span {display:none;}
#box a:hover span
{
position:absolute; bottom:20; left:0px; z-index:0;
display:block;
width:80px;
background:transparent;
color:#003F00;
font:normal 14px Times New Roman;
border:1px solid white;
padding:0px;}
-->
</style>


und als HTML :

<div id="box" style="position:absolute; bottom:2; left:40px;" >
<a href="#">Eins.<span>Zwei.</span></div></a>


Der Text wurde zum Test gewählt. Wenn man "Eins" berührt , kommt dadrüber als Block "Zwei" . So soll es auch sein . Nur müssen mehrere Blöcke übereinander erscheinen , und diese Blöcke sollen Links sein.

[i.b.g]

Hallo,
nur mal vorne weg:
Ich hab da nun schon mehrmals diesen Link angegeben. Den solltest du einfach mal anschauen.

Aber weil ich ja nett bin:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<title>CSS Texte einblenden mit Pseudoformaten</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />

<style type="text/css">
<!--
body{margin:0;padding:0;font : 14px verdana, geneva, arial, helvetica, sans-serif;text-align:justify;}
a{
color:black;
}
a:hover{
color:#ffffff;
}

#box1{
position: absolute;top:20px;left:20px;
width:250px;
height:100px;
background : #b07041;
padding:10px;
font-size:12px;
color:#ffffff;
border:1px solid black;
cursor:pointer;
}
#box1 .blend1{
display:none;
}
#box1:hover .blend1{
position: absolute;top:-1px;left:271px;z-index:3;display:block;
width:350px;
padding:5px;
margin:0;
background : #f49100;
color:black;
border:1px solid black;
border-left:none;
cursor:default;
}
.blend1 p{
list-style:none;
margin:0px;
padding:10px;
font-weight:bold;
background : #b07041;
border:1px solid black;
}

#box2{
position: absolute;top:200px;left:20px;
width:250px;
height:100px;
background : #f49100;
padding:10px;
font-size:12px;
color:#ffffff;
border:1px solid black;
cursor:pointer;
}
#box2 .blend2{
display:none;
}
#box2:hover .blend2{
position: absolute;top:-1px;left:271px;z-index:3;
display:block;
width:160px;
padding:5px;
margin:0;
background : #b07041;
color:black;
border:1px solid black;
border-left:none;
cursor:default;
}
.blend2 ul{
list-style:none;
margin:0px;
padding:10px;
font-weight:bold;
background : #f49100;
border:1px solid black;
}
.blend2 li{
padding:3px;
}

#text p {
background : #b07041 ;
color:#ffffff;
border:1px solid #9C5A42;
padding:15px;
}

#text{
position:absolute;left:320px;top:0px;
padding-right:30px;
padding-left:30px;
background : #c48351;
margin:0px;
}
-->
</style>
</head>

<body>

<div id="box1">
<p><b>Lorem ipsum dolor sit amet</b></p>

<div class="blend1">
<p><a href="#">Lorem ipsum</a>&nbsp;&nbsp;
<a href="#">Lorem ipsum</a>&nbsp;&nbsp;
<a href="#">Lorem ipsum</a></p>
</div>
</div>

<div id="box2"></div>

<div id="box2">
<p><b>Lorem ipsum dolor sit amet</b></p>
<div class="blend2">
<ul>

<li><a href="#">Lorem ipsum</a></li>

<li><a href="#">Lorem ipsum</a></li>

<li><a href="#">Lorem ipsum</a></li>

<li><a href="#">Lorem ipsum</a></li>

<li><a href="#">Lorem ipsum</a></li>

<li><a href="#">Lorem ipsum</a></li>

<li><a href="#">Lorem ipsum</a></li>

<li><a href="#">Lorem ipsum</a></li>

<li><a href="#">Lorem ipsum</a></li>

<li><a href="#">Lorem ipsum</a></li>

<li><a href="#">Lorem ipsum</a></li>

<li><a href="#">Lorem ipsum</a></li>

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

<div id="text">
<h1 style="font-size:20px;text-align:center;color:black;margin-bottom:30px;">Lorem ipsum dolor sit amet</h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>

</div>

</body>
</html>

So nun sollte es aber wirklich klar sein.

[edit]
Ach ja, Mozilla kann das und Opera.
[/edit]

Der Beitrag wurde von i.b.g bearbeitet: 03.05.2004 - 15:58

[lain]

Ich hatte mir diesen Link schon angeschaut , aber ich konnte damit nicht wirklich was anfangen..weil das Aufspringen mehrerer Boxen im IE gehen muss , da es bei mir ja auch funktioniert.

[i.b.g]

Hallo,

kann es sein, dass wir aneinandervorbeidiskutieren?

Du schreibst,

..weil das Aufspringen mehrerer Boxen im IE gehen muss , da es bei mir ja auch funktioniert.

Was heißt das? Mein IE kann das Navigationsmenü auf der angegebenen Seite bei Fractulum nicht darstellen. Also was stellt Dein IE dar und was nicht? Das ist platonisch gefragt!

Es gibt zwei wesentliche (aber sicher noch viel mehr) Möglichkeiten, solche Menüs, wie Du sie Dir vorstellst zu realisieren. Das eine ist mit reinem CSS, das andere mit Javascript realisiert. Die reinen CSS-Lösungen funktionieren nicht in allen Browsern, so wie es auf css.fractatulum.net auch beschrieben wird. Javascript ist etwas heikel, weil der Nutzer Javascript abschalten kann, und die Seite dann gar nicht mehr benutzbar ist. Das Dilemma aller Leute, die HTML schreiben.

Ich empfehle Dir, Dich bei FRACTULUM mal mit den Grundlagen von CSS zu belesen - und nicht nur ein par Brocken heraus zu picken. Wenn Du Dir kein Gesamtbild verschaffst, wirst Du auch die Einzelteile nicht verstehen.

Auch wenn es vielleicht nervt: Anlaufpunkt für HTML/CSS bleibt SelfHTML. Nach dem Download auch offline zu lesen. Im Zweifelsfalle muss man die Spezifikationen des W3C konsultieren.

Ich mach das mit dem HTML nun schon einige Jahre, aber eine Lösung wie einsteigen und losfahren gab es bisher nicht. Und selbst in einem Auto musst du Dir erst den Sitz einstellen, die Spiegel richten und sonstige individuelle Dinge ordnen.

[Google Bot]