it-swarm.com.de

Wie kann ich angeben, dass das Menü der obersten Ebene nicht anklickbar ist?

Arbeiten sehr Testbeispiel hier:
http://learntango.webfactional.com/

Ich arbeite daran, meine argentinische Tango-Website für neue Geräte benutzerfreundlicher zu gestalten

  • handy, Mobiltelefon
  • touchpad
  • usw

Ich (der Tangolehrer) mache das selbst für mein kleines Tangogeschäft

  • lösungen sollten so einfach wie möglich sein
  • derzeit werden fast nur CSS und XHTML verwendet
  • da ich bald viele Videos hosten werde, lerne ich, wie das geht in Django (weshalb meine Links brauchen zum Beispiel keine .html).

Ich habe festgestellt, dass meine Suckerfish-Dropdowns auf meinem Handy funktionieren, wenn ich sie ändere

<li><a href="Home">Home</a>
    <div class="drop_down"><ul>
        <li><a href="/">Home</a></li>
        <li><a href="About_Us">About Us</a></li>
        <li><a href="What_Students_Say">What Students Say</a></li>
    </ul></div></li>
<li><a href="Instruction">Classes</a> 
    <div class="drop_down"><ul>
        <li><a href="Instruction">Classes / Performance Group</a></li>
        <li><a href="Privates">Privates / Semi Privates</a></li>
        <li><a href="Intensive">Tango Intensive</a></li>
    </ul></div></li>

->

<li><a href="#">Home</a>
    <div class="drop_down"><ul>
        <li><a href="/">Home</a></li>
        <li><a href="About_Us">About Us</a></li>
        <li><a href="What_Students_Say">What Students Say</a></li>
    </ul></div></li>
<li><a href="#">Classes</a> 
    <div class="drop_down"><ul>
        <li><a href="Instruction">Classes / Performance Group</a></li>
        <li><a href="Privates">Privates / Semi Privates</a></li>
        <li><a href="Intensive">Tango Intensive</a></li>
    </ul></div></li>

Mit anderen Worten, wenn ich den Link der obersten Ebene in einen On-Page-Link (#) verwandle. Auf diese Weise kann die oberste Ebene auf einem Mobiltelefon aktiv werden/den Fokus haben und die Dropdown-Liste anzeigen, ohne Sie tatsächlich wegzuleiten.
Aus Sicht der Benutzeroberfläche möchte ich jedoch sicherstellen, dass Benutzer erkennen, dass die meisten dieser Links der obersten Ebene nicht anklickbar sind.

Ich habe die Hervorhebung, die Unterstreichung und die Änderung des Mauszeigers entfernt, aber ich denke, dass dies für Benutzer auf einem PC möglicherweise nicht intuitiv genug ist. Gibt es einen anderen visuellen Hinweis, den ich hinzufügen kann, damit der Benutzer nicht vergeblich auf das Menü der obersten Ebene klickt?

  • pfeile, die nach oben/unten zeigen
  • eine einheitlichere Farbgebung zwischen dem Menü der obersten Ebene und den Dropdowns
  • den Text auf der obersten Ebene verschwinden lassen, wenn er mit der Maus darüber bewegt wird und nur die folgenden Wörter anzeigt?
  • die Wörter "grau" aus?

Grundsätzlich denke ich, dass mir diese Lösung gefällt (für mich einfach und wahrscheinlich geräteübergreifend einigermaßen browserübergreifend kompatibel). Ich möchte jedoch die "normalen" Benutzer nicht verwirren.

Irgendein Rat?

Eine Möglichkeit, die ich sehen kann, besteht darin, lediglich das Menüelement der obersten Ebene gleichzeitig mit der Anzeige des Dropdowns auszublenden.

Das heißt, anfangs sieht der Benutzer die Menüleiste. Wenn er auf einen Menüpunkt zeigt, wird das Dropdown-Menü angezeigt und der Menüpunkt wird ausgeblendet. Dadurch wird der Fokus des Benutzers vom Menüpunkt auf das Dropdown-Menü verschoben. Dadurch wird ihm effektiv mitgeteilt, was "aktiv" ist und was nicht. Bei Bedarf kann ich hier einige Bilder posten, um den Punkt zu verdeutlichen.

Stellen Sie einfach sicher, dass das Dropdown-Menü zuerst angezeigt wird und der Menüpunkt sofort danach ausgeblendet wird.

2
Kris

Berücksichtigen Sie Erschwinglichkeit und Rückmeldung für den Schwebezustand .

Die Erschwinglichkeit (visueller Aspekt) des Menüelements sollte nicht vermitteln, dass er anklickbar ist, sondern "schwebbar". Machen Sie es optisch ähnlich zu anderen Menüelementen, aber vielleicht mit einem einfacheren Aspekt, wie einer verblassten Sättigung oder Alpha.

Das Feedback zum Hover sollte den Standardcursor anzeigen (arrow cursor) anstelle der klickenden Hand ( clicking cursor ) und lassen Sie das Untermenü fallen, aber keine Reaktion auf den Menüpunkt selbst.

0
Naoise Golden