Ergebnis 1 bis 1 von 1

Thema: Tutorial zu einem grafischen Menü

  1. #1
    Meister(in)
    Registriert seit
    10.01.2008
    Ort
    Passau/Ösiland
    Beiträge
    267
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Tutorial zu einem grafischen Menü

    Hi,

    Erstellung eines einfachen, horizontalen, grafischen Menüs:

    Mit Photoshop wird eine Grafik in der Größe von 120x80px erstellt. Sie beherbergt beide Linkzustände. Der eigentliche Link ist somit 120x40px groß und enthält jeweils auch den Linktext in Form z.B. einer schönen Schreibschrift.
    Normalzustand ist oben in der Grafik, der Hoverzustand darunter.


    Doctype ist "strict" um immer im Standardmodus zu sein.
    Beim Link der gerade aktuellen Seite wird <a> gegen <strong> ausgetauscht, damit er nicht auf sich selber zeigt.

    Ein leeres <span> wird vor dem Linktext eingefügt, es bekommt später die HG-Grafik zugewiesen.
    Die HG-Grafik soll per CSS den Linktext verdecken. Die dafür benötigte Technik ist eine Image-Replacement-Technik nach Gilder/Levin

    XHTML:
    Code:
    <!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="de" lang="de">
    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Grafisches Menü</title> 
    </head>
    <body>
    <ul>
        <li id="navi01"><strong><span></span>Startseite</strong></li>
        <li id="navi02"><a href="#"><span></span>Kontakt</a></li>
        <li id="navi03"><a href="#"><span></span>Galerie</a></li>
    </ul>
    </body>
    </html>
    Die Abstände werden erstmal auf null gesetzt. Die <ul> bekommt eine Breite und wird zentriert. <li> floatet , bekommt eine Breite und das Listenzeichen ausgeschaltet:
    Code:
    * {
        padding:0;
        margin:0;
    }
    ul  {
        width:400px;
        margin:2em auto;
    }
    
     li  {
        float:left;
        width:120px;
        list-style-type:none;
    }
    <a> und <strong> bekommen position:relative; damit sich das später absolut positionierte <span> mit der HG-Grafik daran orientieren kann.
    overflow:hidden ist dafür damit bei Schriftvergrößerung der Linktext des Markup's nicht darunter hervorlugen kann.
    Es wird zum Blockelement erhoben und kriegt die Breite von <li> und die Höhe der halben Grafik (ein Zustand halt!):
    Code:
     a,
     strong  {
          position:relative;
          overflow:hidden;
          display:block;
          width:100%;
          height:40px;
    }
    Der Normalzustand und der hervorgehobene Zustand der gerade aktuellen Seite wird definiert. Mit position:absolute verdeckt die Grafik den Linktext:
    Code:
    #navi01 a span  {
        position:absolute;
        width:100%;
        height:40px;
        top:0;
        left:0;
        background:url(startseite.jpg) no-repeat 0 0;
    }
     #navi01 strong span  {
           position:absolute;
        width:100%;
        height:40px;
        top:0;
        left:0;
        background:url(startseite.jpg) no-repeat 0 -40px;
    }
     #navi02 a span  {
           position:absolute;
        width:100%;
        height:40px;
        top:0;
        left:0;
        background:url(kontakt.jpg) no-repeat 0 0;
    }
    #navi02 strong span  {
           position:absolute;
        width:100%;
        height:40px;
        top:0;
        left:0;
        background:url(kontakt.jpg) no-repeat 0 -40px;
    }
    #navi03 a span  {
           position:absolute;
        width:100%;
        height:40px;
        top:0;
        left:0;
        background:url(galerie.jpg) no-repeat 0 0;
    }
    #navi03 strong span  {
           position:absolute;
        width:100%;
        height:40px;
        top:0;
        left:0;
        background:url(galerie.jpg) no-repeat 0 -40px;
    }
    Der untere Teil der Grafik wird durch das "hovern" per background-position ins Bild geschoben:
    Code:
    #navi01 a:hover span,
    #navi01 a:focus span,
    #navi02 a:hover span,
    #navi02 a:focus span,
    #navi03 a:hover span,
    #navi03 a:focus span  {
        background-position:0 -40px;
    }
    Mmh..., und damit ist auch der IE einverstanden??
    Nicht ganz:
    Er hat aber plötzlich vergessen wie es geht, das beim überfahren des Links aus dem Pfeil eine Hand werden muss.
    Das wird ihm per CC wieder beigebracht.
    Außerdem bleibt die Grafik des gerade gehoverten Menüpunktes im IE6 nach dem hovern in der hover-position stehen
    und springt nicht zurück auf die "Normal-Position".
    Der dafür definierte Hack mit text-indent ist einfach und zuverlässig.

    Code:
    <!--[if lte IE 7]>
      <style type="text/css">
       ul a span  {
        cursor:hand;
    }
      * html ul a:hover {
          text-indent:0;
          }
      </style>
    <![endif]-->
    Es ist evtl. darauf zu achten, das die Regel nur auf das betreffende Menü beschränkt werden sollte. Das kann sichergestellt werden, indem die ul eine id bekommt und die Regel per Nachfahrenselektor auf das betroffene Menü angewendet wird.

    Hoffe es ist verständlich beschrieben.

    koslowski
    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 !!!!!
    Geändert von koslowski (29.09.2008 um 12:14 Uhr)

Ähnliche Themen

  1. Ausgeben von Ordnern in einem Dropdown menü!
    Von im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 11
    Letzter Beitrag: 20.07.2006, 20:30
  2. Brauche Hilfe beim Grafischen Desing in Html
    Von xcube im Forum Script-Archiv
    Antworten: 1
    Letzter Beitrag: 03.04.2006, 20:40
  3. Drop-Down-Menü in einem Frameset
    Von pawie im Forum HTML & CSS Forum
    Antworten: 7
    Letzter Beitrag: 17.02.2006, 18:27
  4. Brauche Hilfe bei einem Menü-Script - Dringend
    Von SKAdi im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 1
    Letzter Beitrag: 23.03.2005, 08:37
  5. Antworten: 2
    Letzter Beitrag: 21.08.2004, 20:55

Stichworte

Berechtigungen

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