Ankündigung

Einklappen
Keine Ankündigung bisher.

[Erledigt] Menü - Ideensammlung

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • [Erledigt] Menü - Ideensammlung

    Guten Morgen,

    Ich muss zur Zeit ein Menü umsetzen, wo mir die Realisierungsideen fehlt, bzw. meine nicht fruchten wollten...


    So ist das Menü aufgebaut:


    -Im Top-Bereich wird pro Menü-Item ein Image eingeblendet (wenn möglich nicht als BG).
    Bei .active-Class, oder bei einem Hover ändert sich dieses Hintergrundbild
    -Im Center-Bereich kann die Seite navigiert werden
    -Im Bottom-Bereich ändert sich die Farbe, bei .active, oder bei einem Hover.


    Als Voraussetzung ist gegeben:
    -Für alle verbreitete Browser korrekte Anzeige (IE >= 7, Firefox, Safari)
    -Für JavaScript-Interaktion JQuery
    -Möglichst einfach wartbar.


    Meine Ansätze waren:
    a) Umsetzung als komplette List (ul mit CSS gestaltet).
    Border-Top und Bottom für Top- und Bottom-Bereich.
    Problem: Image bei Border erst mit CSS3 möglich
    b) Umsetzung als Hybrid List & Table:
    Top-Bereich als Table, Middle- und Bottom-Bereich mit List.
    Problem: praktisch alle Browser haben eine schlechte Darstellung je nach Zoom:
    c) Menü als Table.
    Problem: extrem mühsame Wartung.
    Ich wollte mit JQuery einen mehr oder weniger praktischen Selector basteln, endet aber immer mit der Ausgabe "undefinied":
    Code:
            <table>
                <tr class="banner">
                    <td id="mt_1" class="active"></td>
                    <td id="mt_2"></td>
                    <td id="mt_3"></td>
                    <td id="mt_4"></td>
                    <td id="mt_5"></td>
                </tr>
                <tr class="menu">
                    <td id="mc_1"><a href="#" title="" class="active">Profil</a></td>
                    <td id="mc_2"><a href="#" title="">Messages</a></td>
                    <td id="mc_3"><a href="#" title="">Favoriten</a></td>
                    <td id="mc_4"><a href="#" title="">Events</a></td>
                    <td id="mc_5"><a href="#" title="">Einstellungen</a></td>
                </tr>
                <tr class="line">
                    <td id="mb_1" class="active"></td>
                    <td id="mb_2"></td>
                    <td id="mb_3"></td>
                    <td id="mb_4"></td>
                    <td id="mb_5"></td>          
                </tr>
            </table>
    Code:
            <script language="JavaScript">
                $(document).ready(function () {
                    $("#header .menu").mouseover(function () {
                        alert($(this).id);
                    });
                });
            </script>

    Hat jemand noch eine gute Idee?


    Vielen Dank.

    Gruss,
    Richard


  • #2
    Mach mal bitte eine Zeichnung, in der die ganzen Bereiche gekennzeichnet sind.

    Kommentar


    • #3
      Ungefähr so vielleicht (quick & dirty).

      HTML-Code:
      <!DOCTYPE html>
      
      <html>
      
          <head>
              <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
              <title>New</title>
              <style type="text/css">
      
      * { margin: 0; padding: 0; }
      
      #menu li {
          float: left;
          list-style: none;
      }
      
      #menu li a {
          display: block;
          background: top left repeat-x #B5E61D;
          padding: 160px 0 10px 0;
          width: 80px;
          border-right: 1px solid black;
      }
      
      #menu li a span {
          background: #FF7F27;
          border-top: 1px solid black;
          border-bottom: 1px solid black;
          display: block;
      }
      
      #menu li a:hover, #menu li a.active {
          background-color: #22B14C;
      }
      
      /* Hintergrundbilder, nicht aktiv */
      
      #menu #menu1 {
          background-image: url('http://www.google.com/logos/2010/chinesevalentines2010-hp.jpg');
      }
      #menu #menu2 {
          background-image: url('http://www.google.com/logos/2010/chinesevalentines2010-hp.jpg');
      }
      #menu #menu3 {
          background-image: url('http://www.google.com/logos/2010/chinesevalentines2010-hp.jpg');
      }
      #menu #menu4 {
          background-image: url('http://www.google.com/logos/2010/chinesevalentines2010-hp.jpg');
      }
      
      /* Hintergrundbilder, aktiv */
      
      #menu #menu1:hover, #menu #menu1.active {
          background-image: url('http://www.google.de/intl/en_com/images/srpr/logo1w.png');
      }
      
      #menu #menu2:hover, #menu #menu2.active {
          background-image: url('http://www.google.com/logos/2010/teachersday10-hp.gif');
      }
      
      #menu #menu3:hover, #menu #menu3.active {
          background-image: url('http://www.google.com/logos/2010/firstdayofschool10-hp.gif');
      }
      
      #menu #menu4:hover, #menu #menu4.active {
          background-image: url('http://www.google.com/logos/2010/indonesia_ind10-hp.gif');
      }
      
              </style>
          </head>
      
          <body>
              <ul id="menu">
                  <li><a id="menu1" href="./"><span>Item</span></a></li>
                  <li><a id="menu2" href="./"><span>Item</span></a></li>
                  <li><a class="active" id="menu3" href="./"><span>Item</span></a></li>
                  <li><a id="menu4" href="./"><span>Item</span></a></li>
              </ul>
          </body>
      
      </html>

      Kommentar


      • #4
        Zitat von xm22 Beitrag anzeigen
        Mach mal bitte eine Zeichnung, in der die ganzen Bereiche gekennzeichnet sind.



        in meinem Beispiel ist Menü II mit der Klasse .active ausgestattet.
        Gleicher Effekt sollte dann bei einem Hover-Effekt auftreten.

        Kommentar


        • #5
          Zitat von richardf Beitrag anzeigen
          -Im Top-Bereich wird pro Menü-Item ein Image eingeblendet (wenn möglich nicht als BG).
          Warum nicht - transportieren die Bilder Inhalt?

          -Im Center-Bereich kann die Seite navigiert werden
          Nur den kleinen Bereich klickbar zu machen, wenn der große Bereich darüber beim Hovern visuelles Feedback liefert, wäre m.E. unklug.

          a) Umsetzung als komplette List (ul mit CSS gestaltet).
          Border-Top und Bottom für Top- und Bottom-Bereich.
          Problem: Image bei Border erst mit CSS3 möglich
          In deinem Bildchen ist für mich nicht erkennbar, wofür du Border-Images brauchen würdest.


          Edit: Auch noch wichtig: Sind die Maße fest oder variabel, soll die Schriftgröße relativ sein oder absolut?

          Kommentar


          • #6
            Ohne bg-Images musst Du das mit Javascript machen - davon würde ich nur abraten. Auch :hover bzw. :active fallen dann natürlich aus.

            Mit Rahmen macht man das natürlich auch nicht.
            --

            „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
            Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“


            --

            Kommentar


            • #7
              Zitat von nikosch Beitrag anzeigen
              Ohne bg-Images musst Du das mit Javascript machen
              Muss man nicht unbedingt ... aber bei den bisher genannten Anforderungen sehe ich noch keine Notwendigkeit, JS zu verwenden.

              CSS Sprites bieten sich an (nein, drängen sich auf), um das ganze mit akzeptabler Ladezeit-Performance umzusetzen.

              Kommentar


              • #8
                Doch, muss man.
                Bei .active-Class, oder bei einem Hover ändert sich dieses Hintergrundbild
                Aktive Komponenten sind entweder CSS-Pseudoklassen (was wohl auf BG-Images hinausläuft) oder Javascript. Vielleicht könnte man noch Images unsichtbar schalten, aber naja..
                --

                „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
                Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“


                --

                Kommentar


                • #9
                  Zitat von nikosch Beitrag anzeigen
                  Doch, muss man.
                  Nein, muss man nicht.
                  Die (bzw. eine) potentielle Möglichkeit nennst du ja schon selber.

                  Dass diese Möglichkeiten nicht das Gelbe vom Ei sind, ist klar.
                  Wie gesagt, ich würde auch Hintergrundbilder empfehlen, wenn die Grafiken Verzierung sind und keinen Inhalt transportieren sollen.

                  Kommentar


                  • #10
                    super, vielen Dank an alle, insbesondere an mermshaus!

                    gegen den Einsatz von JS spricht prinzipiell nichts, ist natürlich mit CSS schon viel einfacher zum Warten.

                    Danke nochmals

                    Kommentar

                    Lädt...
                    X