✔ Hife für Menü

[Lord-Knud]

Hallo Gemeinde,
ich habe folgendes Menü:

´function initMenu() {
  $('#menu ul').hide();
  $('#menu ul:first').show();
  $('#menu li a').click(
    function() {
      var checkElement = $(this).next();
      if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
        return false;
        }
      if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
        $('#menu ul:visible').slideUp('normal');
        checkElement.slideDown('normal');
        return false;
        }
      }
    );
  }
$(document).ready(function() {initMenu();});

Der Effekt ist, dass wenn man auf das Listenelement klickt, die darunterliegenden Unterlistenelement aufklappen.
Jetzt möchte ich aber zusätzlich, dass wenn ich auf das Listenelement klicke, auch zu dem Anker gescrollt wird.

Z. Bspl:

<li>
			<a href="#comfort">Comfort Apartments</a>

			<ul>
				<li><a href="http://www.meineWebseite.de/atelier.html">Atelier Apartment</a></li>
				<li><a href="http://www.meineWebseite.de">da Vinci Apartment</a></li>
				<li><a href="http://www.meineWebseite.de/hardy.html">Hardy Apartment</a></li>
			</ul>
		</li>

Hat jemand eine Idee, wie ich das verwirklichen kann?
Danke

 

[CPoly]

Was hast du von der slide-Animation, wenn man ohnehin direkt runter scrollt? Nichts desto trotz, hier mal der Code. Habe deinen Code auch gleich mal komprimiert.

function initMenu() {
	$('#menu').find('ul').hide().filter(':first').show().end().end().find('> li > a').click(
		function(e) {
			e.preventDefault();
			
			var checkElement = $(this).next();
			
			if(checkElement.is('ul:hidden')) {
				$('#menu ul:visible').slideUp('normal');
				checkElement.slideDown('normal');
			}
			
			//Zum Anker scrollen
			var hash = $(this).attr('href');
			
			if(/^#\w$/.test(hash)) {
				var anchor = $(hash);
				$(window).scrollTop( anchor.offset().top );
			}
			
		}
	);
}

 

[Lord-Knud]

Hallo CPoly,
das Menü befindet sich in einem Layer, der mitsrollt, also "fixed" ist.

Wenn ich deine Variante nehme, scrollt es zwar schön zum Anker, das Menü ist aber ständig offen.

Wenn ich

$(document).ready(function() {initMenu();});

dazunehme, ist das Menü wieder geschlossen, scrollt aber nicht zum Anker.

Hast du vielleicht noch ne Idee?
Danke.

 

[CPoly]

Das document-ready muss weiterhin da sein. Irgendwie muss die Funktion ja aufgerufen werden.

Ich hab meinen Code nochmal verändert, weil eigentlich scroll der Browser ja von selbst zum Anker, nur hast du das mit dem return false unterbunden.

function initMenu() {
	$('#menu').find('ul').hide().filter(':first').show().end().end().find('> li > a').click(
		function(e) {
			var checkElement = $(this).next();
			
			if(checkElement.is(':visible')) {
				e.preventDefault();
				return false;
			}
			
			if(checkElement.is('ul:hidden')) {
				$('#menu ul:visible').slideUp('normal');
				checkElement.slideDown('normal');
			}
			
			return true;
		}
	);
}

$(document).ready(function() {initMenu();});

 

[Lord-Knud]

So geht's ;-)
Vielen Dank.