The MoveUp Menu

Ich habe vor einiger Zeit eine E-Mail von Dirk Tucholski erhalten, der mir eine Website namens FLOWmarket gezeigt hat. Er fragte sich, wie das Menüsystem funktionierte. Ich fand es raffiniert und beschloss, es so zu bauen, wie ich es tun würde. Die Idee ist, dass es ein langes vertikales Menü von Links gibt, von denen nicht alle sichtbar sind. Wenn Sie Ihre Maus nach oben und unten über den sichtbaren Bereich bewegen, scrollt das Menü selbst, um weitere Menüpunkte anzuzeigen und den Link hervorzuheben, über dem sich die Maus gerade befindet.

Demo ansehen   Dateien herunterladen

HTML

Ein typisches Menü

<div id="menu">

	<ul>

		<li><a href="#">Nature</a></li>
		<li><a href="#">Receivability</a></li>
		<li><a href="#">Alone time</a></li>

 		<!-- etc -->

	</ul>

</div>

Starter CSS

Wir setzen eine feste Höhe, also stellen wir sicher, dass der `overflow`-Wert vorerst auf `overflow: auto;` gesetzt ist. So wird das Menü gescrollt und ist unabhängig von JavaScript zugänglich. Ansonsten nur grundlegendes Styling.

#menu { 
  height: 360px;
  overflow: auto;
}

#menu ul { 
  list-style: none; 
}

#menu a { 
  text-decoration: none; 
  display: block; 
  color: black; 
}

Starter JavaScript

Die Idee ist hier, darauf zu warten, dass über die Menülinks gefahren wird, und entsprechend zu reagieren. Wir wenden eine Hover-Klasse für das Styling an, bewegen dann ein inneres Div (das wir anhängen werden) nach oben oder unten, um den Effekt zu erzielen. Aber wie weit nach oben oder unten? Dafür müssen wir genau wissen, über welchen Link wir fahren. Ein höher positionierter Link (weiter unten in der Liste) muss die Liste weiter scrollen als ein tiefer positionierter Link. Wir nehmen diese Position und wenden einen Geschwindigkeitsmultiplikator an, um die Distanz zu erhalten, um die wir verschieben. Um die Position zu erhalten, werden wir einfach durch sie iterieren und ein Datenattribut anwenden.

$("#menu").css("overflow", "hidden").wrapInner("<div id='mover' />");

var $el,
    speed = 13.5,    // needs to be manually tinkered with
    items = $("#menu a");
    				
items
.each(function(i) {
	$(this).attr("data-pos", i);
})
.hover(function() {

	$el = $(this);
	$el.addClass("hover");	
	
	$("#mover").css("top", -($el.data("pos") * speed - 40));
	// 40 is the top padding for the fadeout
						
}, function() {
	$(this).removeClass("hover");
});

Beachten Sie, dass Sie auf HTML5-Datenattribute (z. B. `<div data-pos=1>`) wie `$("div").data("pos");` zugreifen können, was prägnant und cool ist.

Ausblendungen

Wenn Sie die Demo in einem WebKit-Browser betrachten, sehen Sie, wie das Menü oben und unten beim Scrollen ausblendet. Das habe ich einfach erreicht, indem ich :before und :after Pseudoelemente verwendet habe, die oben und unten am Menü absolut positioniert sind und weiße zu transparente Farbverläufe haben.

#menu:before { 
  content: " "; 
  position: absolute; 
  top: 0; 
  left: 0; 
  height: 50px;
  width: 100%; 
  z-index: 2; 
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, rgba(255,255,255,100)),color-stop(1, rgba(255,255,255,0))); 
}

#menu:after { 
  content: " "; 
  position: absolute; 
  bottom: 0; 
  left: 0; 
  height: 50px; 
  width: 100%; 
  z-index: 2;
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, rgba(255,255,255,0)),color-stop(1, rgba(255,255,255,100))); }

Verwenden Sie bei Bedarf andere Browser-Präfixe.

Dieses „Geschwindigkeits“-Geschäft

Die Menge, um die das Menü pro Menüpunkt verschoben wird, wird von einem Geschwindigkeitsmultiplikator beeinflusst. Sie sehen in der obigen JavaScript-Datei, dass dieser auf einen eher willkürlich aussehenden Wert von 13,5 gesetzt ist. Ich habe eine Weile damit verbracht, eine mathematische Methode zu finden, um den perfekten Geschwindigkeitsmultiplikator basierend auf der Anzahl der Menüpunkte und Höhen usw. zu berechnen, aber nichts Gutes gefunden. Wenn Ihnen etwas einfällt, lassen Sie es mich wissen. Es wäre definitiv besser, diesen Multiplikator nicht jedes Mal anpassen zu müssen, wenn sich das Menü ändert.

Tastaturnavigation

Dieses Menü ist bei der aktuellen Geschwindigkeit etwas schwierig, um einen bestimmten Menüpunkt präzise auszuwählen. Um dies zu unterstützen, können wir eine kleine Tastaturnavigation hinzufügen. Dies geschieht, indem wir auf `keydown`-Ereignisse auf dem `document` lauschen und eine Funktion auslösen. Um das Umschreiben von Code zu reduzieren, verfolgen wir einfach den aktuell aktiven Menüpunkt, passen ihn je nachdem, ob die Pfeiltaste nach oben oder unten gedrückt wurde, nach oben oder unten an, und lösen dann die `mouseenter`- oder `mouseleave`-Ereignisse entsprechend aus, die bereits eingerichtet sind, um die Menüfunktionalität zu handhaben.

$(document).keydown(function(event) {

	cur = $(".hover").attr("data-pos");
				
	// Down arrow
	if (event.keyCode == 40) {
									
		$("[data-pos=" + cur + "]").trigger("mouseleave");
		if (cur != max) { cur++; }
		$("[data-pos=" + cur + "]").trigger("mouseenter");
		
	}
	
	// Up arrow
	if (event.keyCode == 38) {
	
		$("[data-pos=" + cur + "]").trigger("mouseleave");
		if (cur > 0) { cur--; }
		$("[data-pos=" + cur + "]").trigger("mouseenter");
		
	}
	
});

Die einzigen Teile, die hier nicht gezeigt werden, sind, wo wir die Variable `cur` einrichten und sie in der Hover-Funktion setzen, aber all das ist in der Live-Demo vorhanden.

Demo ansehen   Dateien herunterladen

Rabble rabble usability!

Der Kern dieser Idee, ein Menü schneller zu scrollen, als ein Benutzer es erwarten würde, ist schlecht für die Benutzerfreundlichkeit. Es ist schwieriger, den genauen Link, den man ansteuern möchte, auszuwählen, wegen der ungewohnten und empfindlichen Bewegung. Mir ist das bewusst. Die Tastaturnavigation hilft da etwas, aber das ist auch potenziell eine ungewohnte Idee.

Dies ist keine Lösung für jedes lange Menü der Welt (siehe auch hier). Dies ist eher ein lustiger Effekt. Vielleicht für eine Website, bei der das Menü nicht allzu wichtig ist. Vielleicht als Möglichkeit, ein Gedicht darzustellen. Es ist eine nette Erfahrung, es zu benutzen, also wenn diese Erfahrung wirklich für die Website funktioniert, ist vielleicht ein kleiner Zugeständnis an die Zugänglichkeit in Ordnung. Ich finde die FLOWmarket-Website, von der dies stammt, großartig.