ACHTUNG. Das ist ein Archiv des alten forum.ruby-portal.de. Die aktuelle Mailingliste gibt es auf lists.ruby-lang.org/pipermail/ruby-de.

NOTICE. This is a ready-only copy of the old forum.ruby-portal.de. You can find the current mailing list at lists.ruby-lang.org/pipermail/ruby-de.

Die Programmiersprache Ruby

Blog|

Forum|

Wiki  


Alle Zeiten sind UTC + 1 Stunde [ Sommerzeit ]

Ein neues Thema erstellen Auf das Thema antworten  [ 7 Beiträge ] 
Autor Nachricht
BeitragVerfasst: 09 Jul 2009, 20:42 
Offline
Lehrling

Registriert: 17 Sep 2008, 15:16
Beiträge: 64
Hallo zusammen,
kann mir jemand sagen, wie man ein Menü wie dieses:

http://mj-pohl.de/test/

ganz ohne Javascript hinbekommen kann? Am liebsten wäre mir
ein reines CSS Menu, welches auch auf IE6.0, IE7.0 und Firefox
anständig aussieht.

Viele Grüsse & besten Dank,
Markus


Nach oben
 Profil  
 
BeitragVerfasst: 09 Jul 2009, 20:50 
Offline
Rubyist

Registriert: 09 Jun 2009, 18:00
Beiträge: 346
Kurze Antwort: Gar nicht. Mit ein paar Einschränkungen gehts, du musst darauf verzichten mehr als einen Punkt offen zu haben (*) und der slide-effekt wird auch nicht so glatt sondern recht plötzlich.

Und das ganze auf IE6 wird lustig, IE7 könnte gerade so gehen.

(*) genaugenommen zwei: Der gerade aktive Punkt kann offen sein und der über dem die Maus ist.

_________________
Ruhe jetzt, sonst hol ich meinen kleinen Bruder.


Nach oben
 Profil  
 
BeitragVerfasst: 10 Jul 2009, 00:27 
Offline
Lehrling

Registriert: 17 Sep 2008, 15:16
Beiträge: 64
Danke für die "kurze" Antwort :) Das würde mir schon reichen, dass nur ein Punkt offen ist, auf den geklickt wurde. Und das "plötzliche" sliden wäre für mich auch voll in Ordnung. Gibt es irgendwo Beispiele, wo man sich sowas ansehen kann? Oder schon was fertiges, auf das man zurückgreifen kann? Alle Beispiele die ich bis jetzt im Netz gefunden haben, haben dem leider überhaupt nicht entsprochen..

Viele Grüsse und Gut N8,
Markus


Nach oben
 Profil  
 
BeitragVerfasst: 10 Jul 2009, 15:44 
Offline
Rubyist

Registriert: 09 Jun 2009, 18:00
Beiträge: 346
Na dann, als Fingerübung:

index.html:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Sliding Menu in pure CSS</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<ol>
<li>
<span>Online Tools</span>
<ol>
<li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Image Optimizer</a></li>
<li><a href="http://tools.dynamicdrive.com/favicon/">FavIcon Generator</a></li>
<li><a href="http://www.dynamicdrive.com/emailriddler/">Email Riddler</a></li>
<li><a href="http://tools.dynamicdrive.com/password/">htaccess Password</a></li>
<li><a href="http://tools.dynamicdrive.com/gradient/">Gradient Image</a></li>
<li><a href="http://tools.dynamicdrive.com/button/">Button Maker</a></li>
</ol>
</li>
<li>
<span>Support Us</span>
<ol>
<li><a href="http://www.dynamicdrive.com/recommendit/">Recommend Us</a></li>
<li><a href="http://www.dynamicdrive.com/link.htm">Link to Us</a></li>
<li><a href="http://www.dynamicdrive.com/resources/">Web Resources</a></li>
</ol>
</li>
<li>
<span>Partners</span>
<ol>
<li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.codingforums.com">CodingForums</a></li>
<li><a href="http://www.dynamicdrive.com/style/">CSS Examples</a></li>
</ol>
</li>
<li class="active">
<span>Test Current</span>
<ol>
<li><a href="?foo=bar">Current or not</a></li>
<li><a href="./">Current or not</a></li>
<li><a href="index.html">Current or not</a></li>
<li><a href="index.html?query">Current or not</a></li>
</ol>
</li>
</ol>
</body>
</html>


css/style.css:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
ol { /* reset to get a base */
list-style: none;
padding: 0;
margin: 0;
width: 200px;
}

li span, li a {
display: block;
padding: 5px;
}

li span {
background: #DDDDDD;
}

li a {
background: #EEEEEE;
border-bottom: 1px solid #DDDDDD;
color: #006666;
}

li ol {
display: none;
}

li:hover ol {
display: block;
}

li.active ol {
display: block;
}


Wie du siehst ist das recht simpel aufgebaut, es wird einfach :hover ausgenutzt um das Element aufzuspannen über dem die Maus ist. IE6 kann :hover aber nur auf Links, da wird das ohne JS nicht gehen. Und wenn du das nun probierst wirst du schnell feststellen, dass das von der Usability eher mau ist. Mein Vorschlag ist überlicherweise: Leute ohne JS kriegen das Menü voll ausgeklappt. Das macht erstmal nicht viel aus, weil man den Platz eh im Layout vorsehen muss. Alle mit JS kriegen die nette ein/ausklappbare Version.

gruss

felix

_________________
Ruhe jetzt, sonst hol ich meinen kleinen Bruder.


Nach oben
 Profil  
 
BeitragVerfasst: 10 Jul 2009, 16:16 
Offline
Lehrling

Registriert: 17 Sep 2008, 15:16
Beiträge: 64
Hallo Felix,
dank Dir für die Hilfe. Werde es wohl auch mit dem Ansatz machen - einfach ganz auszuklappen, sofern JS nicht aktiviert ist. Nach dem Webbarometer von Webhits:

http://www.webhits.de/deutsch/index.shtml?webstats.html

..haben die meisten JS eh aktiviert. Und was den SEO Aspekt betrifft, können die Google Robots anscheinend inzwischen auch JS-Menüs scrawlen..

Viele Grüsse,
Markus


Nach oben
 Profil  
 
BeitragVerfasst: 10 Jul 2009, 16:22 
Offline
Rubyist

Registriert: 09 Jun 2009, 18:00
Beiträge: 346
haarausfall hat geschrieben:
Und was den SEO Aspekt betrifft, können die Google Robots anscheinend inzwischen auch JS-Menüs scrawlen..


Wenn du für alle Client die kein JS unterstützen das Menü vollständig darstellst brauchst du dir da keine Sorgen machen. Es ist dann eine reine Darstellungs-Nettigkeit für die die's sehen wollen. Alle Suchmaschinen kriegen die rohe Version und sind glücklich - alle Screenreader im übrigen auch.

gruß

felix

_________________
Ruhe jetzt, sonst hol ich meinen kleinen Bruder.


Nach oben
 Profil  
 
BeitragVerfasst: 10 Jul 2009, 16:35 
Offline
Lehrling

Registriert: 17 Sep 2008, 15:16
Beiträge: 64
Zitat:
Alle Suchmaschinen kriegen die rohe Version und sind glücklich - alle Screenreader im übrigen auch.


Das ist wunderbar!

Vielen Dank & Gruss,
Markus


Nach oben
 Profil  
 
Beiträge der letzten Zeit anzeigen:  Sortiere nach  
Ein neues Thema erstellen Auf das Thema antworten  [ 7 Beiträge ] 

Alle Zeiten sind UTC + 1 Stunde [ Sommerzeit ]


Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 2 Gäste


Du darfst keine neuen Themen in diesem Forum erstellen.
Du darfst keine Antworten zu Themen in diesem Forum erstellen.
Du darfst deine Beiträge in diesem Forum nicht ändern.
Du darfst deine Beiträge in diesem Forum nicht löschen.
Du darfst keine Dateianhänge in diesem Forum erstellen.

Suche nach:
cron