• IT-Karriere:
  • Services:

Slickmap - schlanke CSS-Sitemap für Webseiten

Ungeordnete Listen werden zu einer übersichtlichen Sitemap

Eine Sitemap gehört eigentlich auf jede Webseite, denn sie erleichtert dem Besucher das Entdecken von Bereichen, die sonst kaum zu finden wären. Die Slickmap von Matt Everson ist eine besonders schlanke Sitemap mit optisch ansprechendem Design.

Artikel veröffentlicht am ,

Die Slickmap ist ein Beispiel für eine übersichtliche Sitemap. Sie ist dank der Nutzung von sehr schlankem HTML- und CSS-Code besonders klein und sieht trotzdem gut aus. Alles was es dazu braucht ist eine verschachtelte Liste aller Bereiche einer Webseite. Die Slickmap macht daraus kleine Boxen und zeigt den Bereichsnamen sowie den Link an.

Stellenmarkt
  1. Bundeskriminalamt, Wiesbaden, Berlin, Meckenheim
  2. Debeka Betriebskrankenkasse, Koblenz

Die Slickmap ist im Hinblick auf standardkonforme Browser entwickelt worden. Allerdings verwendet der Autor einige CSS3-Eigenschaften, die noch nicht freigegeben wurden und nur von einzelnen Browsern unterstützt werden. Erkennbar ist das im CSS-Code an dem vorangestellten -moz- (für Firefox) oder -webkit- (für Safari) der CSS-Eigenschaft.

Beim kurzen Betrachten der Sitemap-Demo gefällt vor allem die Anzeige in den Browsern Firefox und Safari. Aber auch Opera bietet eine ansprechende Darstellung, obwohl bei diesem Browser keine experimentellen CSS3-Eigenschaften interpretiert werden. Immer noch brauchbar, aber nicht ganz so elegant, wirkt die Darstellung im Internet Explorer 8. Der Autor selbst hat diesen Browser zwar berücksichtigt, allerdings interessiert er ihn nicht besonders, wie er öffentlich zugibt. Everson ist aber offen für Vorschläge, um die Darstellung im Internet Explorer zu verbessern.

Eigenschaften, die als experimentell eingestuft werden, ignorieren andere Browser. Sie sind also eigentlich nicht erlaubt, funktionieren aber dennoch recht sicher in der Anwendung. Allerdings muss der Webdesigner später am Code Änderungen vornehmen, damit die offiziellen CSS3-Eigenschaften genutzt werden und nicht die Zwischenlösung. Wer will, kann diese Eigenschaften auch einfach aus dem Code entfernen.

Die Slickmap ist sehr klein. Insgesamt ist das Paket entpackt 16 KByte groß. Der leicht veränderbare HTML- und CSS-Code mit einigen kleinen Bildern steht als herunterladbares Zip-Archiv auf astuteo.com/slickmap/ bereit.

Slickmap kann von jedem verwendet und modifiziert werden. Besondere Lizenzbedingungen gibt der Autor nicht an.

Bitte aktivieren Sie Javascript.
Oder nutzen Sie das Golem-pur-Angebot
und lesen Golem.de
  • ohne Werbung
  • mit ausgeschaltetem Javascript
  • mit RSS-Volltext-Feed


Anzeige
Mobile-Angebote
  1. 159,99€ (mit Rabattcode "POWERFRIDAY20" - Bestpreis!)
  2. (u. a. Apple iPhone 11 Pro Max 256GB 6,5 Zoll Super Retina XDR OLED für 929,98€)
  3. 699€ (mit Rabattcode "POWERFRIDAY20" - Bestpreis!)

Planlaber 30. Jul 2009

Woher soll den Planhaber bitte einen Plan haben, was SEO bedeutet? Mit seinem Kommentar...

annonymous 15. Jul 2009

wenn sitemaps auf jede webseite gehören??

Nutzer137685 13. Jul 2009

Sollte ich je in die Situation kommen, eine Sitemap bauen zu müssen, werde ich seine...

the OBSERVER 13. Jul 2009

WOW... nachdem ich seit 12 Jahren im Internet Seiten entwickle muss ich mich da wundern...

srws 13. Jul 2009

Bisher muss man leider in den allermeisten Fällen ohne leben, da dieses Feature ja nur...


Folgen Sie uns
       


Xbox Series X und S - Fazit

Im Video zum Test der Xbox Series X und S zeigt Golem.de die Hardware und das Dashboard der Konsolen von Microsoft.

Xbox Series X und S - Fazit Video aufrufen
iPhone 12 Pro Max im Test: Das Display macht den Hauptunterschied
iPhone 12 Pro Max im Test
Das Display macht den Hauptunterschied

Das iPhone 12 Pro Max ist größer als das 12 Pro und hat eine etwas bessere Kamera - grundsätzlich liegen die beiden Topmodelle von Apple aber nah beieinander, wie unser Test zeigt. Käufer des iPhone 12 Pro müssen keine Angst haben, etwas zu verpassen.
Ein Test von Tobias Költzsch

  1. Displayprobleme Grünstich beim iPhone 12 aufgetaucht
  2. Entsperren erschwert iPhone 12 Mini macht Probleme mit dem Touchscreen
  3. Kabelloses Laden Magsafe entfaltet beim iPhone 12 Mini sein Potenzial nicht

Covid-19: So funktioniert die Corona-Vorhersage am FZ Jülich
Covid-19
So funktioniert die Corona-Vorhersage am FZ Jülich

Das Forschungszentrum Jülich hat ein Vorhersagetool für Corona-Neuinfektionen programmiert. Projektleiter Gordon Pipa hat uns erklärt, wie es funktioniert.
Ein Bericht von Boris Mayer

  1. Top 500 Deutscher Supercomputer unter den ersten zehn
  2. Hochleistungsrechner Berlin und sieben weitere Städte bekommen Millionenförderung
  3. Cineca Leonardo Nvidias A100 befeuert 10-Exaflops-AI-Supercomputer

Zenbook Flip UX371E im Test: Asus steht sich selbst im Weg
Zenbook Flip UX371E im Test
Asus steht sich selbst im Weg

Das Asus Zenbook Flip UX371E verbindet eines der besten OLED-Displays mit exzellenter Tastatur-Trackpad-Kombination. Wäre da nicht ein Aber.
Ein Test von Oliver Nickel

  1. Vivobook S14 S433 und S15 S513 Asus bringt Tiger-Lake-Notebooks ab 700 Euro
  2. Asus Expertbook P1 350-Euro-Notebook tauscht gutes Display gegen gesteckten RAM
  3. Asus Zenfone 7 kommt mit Dreifach-Klappkamera

    •  /