Untermenü bei Vertikalenmenü ausfahren und aktiv setzen

htmler · #1 (**permalink**) 08.11.2012, 17:07

Hallo liebe Leute,

ich habe folgendes Problem.
Ich bin gerade dabei ein Template zu bauen für ein Projekt.
Ich habe auf dem Template (http://www.rkv-rudolstadt.de.vu/neu/) ein Vertikales Menü wenn man über "Neu" oder "Yahoo" fährt öffnet sich das Untermenü. Nun möchte ich wenn man auf einen Untermenüpunkt klickt das dieses Untermenü dann geöffnet bleibt und so blad man einen anderen Übermenüpunkt anklickt es sich wieder ein fährt.

Ich habe keine idee wie ich es am besten um setzen kann. Hättet Ihr für mich vllt. einen Rat? bzw könnt Ihr mir helfen?

vielen Dank! schon mal im Voraus

lg
htmler

Tobi Berlin · #2 (**permalink**) 10.11.2012, 03:51

Hallo htmler,

also ich bin nicht der web-Experte, aber bei solchen Akkordeon-Menüs sollte man glaube ich immer aufpassen, dass es für den Benutzer nicht zu unübersichtlich wird, wenn alles (oder Teile) rauf und runter rutschen. Auf jeden Fall müsstes Du imho die Haupt- und die Submenüs optisch viel mehr voneinander abheben.

Dann eine Interpretationsfrage zur Steuerung: geh mal von "Neu" direkt auf "Yahoo". Das geht nicht, denn wenn man bei "Yahoo" angekommen ist, ist es schonwieder nach oben gerutscht, und du musst mit der Maus hinterher.

Deshalb würde ich die Untermenüs nicht auf hover öffnen sondern auf click. Dann kann der Bentzer entscheiden, wo er weiter hin geht, ohne dass sich was verändert.

Hier mal ganz auf die Schnelle etwas css, um die beiden Ebnen mehr voneinander abzuheben:

Code:

ul { list-style:none; }
#navleft { display:inline-block; background:#f4f4ff; }
#navleft a { text-decoration:none; display:block; line-height:150%; padding:0 1em;}
#navleft a:hover { background:darkorange; color:white; }
#navleft > ul > li { border-bottom:1px solid #ccf; }
#navleft li>ul { font-size:0.9em; margin-left:2em; background:#ddf; }

Das Öffnen und Schließen macht man dann glaube ich am einfachsten mit etwas jQuery:

Code:

<script type="text/javascript">
$(function() {
  $('#navleft li>ul').hide();
  $('#navleft li a').click(function(){
     $(this).parent().children('ul').slideToggle(100);
  });
});
 </script>

Die "100" gibt die Animationszeit in ms an. Das ist die einfache Variante, bei der jedes Menü für sich agiert. Wenn beim Öffnen von einem alle anderen offenen geschlossen werden sollen, würde ich es so machen:

Code:

<script type="text/javascript">
$(function() {
  $('#navleft li>ul').hide();
  $('#navleft li').click(function(){
     $('#navleft li').not(this).children('ul').slideUp(200);
     if ($(this).children('ul').is(':visible')){
	   $(this).children('ul').slideUp(200);
	 } else {
	   $(this).children('ul').slideDown(200);
	 }
  });
});
</script>

Damit das überhaupt laufen kann, musst du davor noch jQuery im HTML referenzieren, also in etwa:

Code:

 <script type="text/javascript" src="javascriptverzeichnis/jquery.1.8.2.js"></script>

Dieses file kann man hier runterladen.

Vielleicht ist Dir damit ja schon etwas geholfen.

Sonst google mal nach Akkordeon-Menüs. Es gibt immer viele verschiedene Lösungen.

Grüße,
tobi

htmler · #3 (**permalink**) 10.11.2012, 11:45

Ok schon mal vielen dank für die große Hilfe. ich habe das nun so ein gebunden in meine HTML

Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Test</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="./jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function() {
  $('#navleft li>ul').hide();
  $('#navleft li a').click(function(){
     $(this).parent().children('ul').slideToggle(100);
  });
});
</script>
</head>

nur fährt der mir das Menü beim klicken nicht aus??? entweder bin ich jetzt blöd xD oder keine ahnung

weil bei neu zeigt der das untermneü an und bei yahoo nicht xD vor allem
auf dem lokalen pc ist das menü auch eingefahren von neu nur wenn ich es hochlade ist das eine ausgefahren? :/

und kurz noch ne andere frage ich hatte shcon mal unterschiedliche script mit css probiert dir mir im menü einen punkt anklicke das dieser dann auch hervorgehoben wird wenn die seite aktiv ist aber es hat auhc alles nicht funktioniert...und das geht dann wohl nur mit php ? oder uahc js? wenn ja könntest du mir helfen?

inta · #4 (**permalink**) 10.11.2012, 11:49

Dein Javascript wird ausgeführt bevor das DOM geladen ist. Entweder du nutzt das domready-Event, oder (grundsätzlich eh für alle Javascripte zu empfehlen da performanter) du bindest dein Javascript erst direkt vor dem schließenden body-Tag ein.

htmler · #5 (**permalink**) 10.11.2012, 12:04

ok also das das eine menü noch ausgeklappt war war mein eblöd heit hatte auif dem FTP vergessen das jquery hoch zu laden .___.

aber es fährt trotzdem nicht aus das menü

wie würde das ausa sehen mit dem "domready-event"?
bzw wenn ich es vor dem schließenden <body< tag machen müsste würde es ja dann so sein:

HTML-Code:

[CODE]
<body> 
weiterer quelltext
.....
....
hier das schript
</body>
[/CODE]

ich sehe das glaube irgend wie falsch oder? ich bin grad echt etwas durch einander.

inta · #6 (**permalink**) 10.11.2012, 12:08

Nein, das siehst du schon richtig, genau da kommen die script-Element hin.

Bei jQuery heißt die Methode „ready“, schau am besten in die Doku, wenn du das verwenden möchtest (ich nutze kein jQuery, daher bin ich nicht so fit in dessen Funktionen).

Manfred62 · #7 (**permalink**) 10.11.2012, 12:20

Code:

<script type="text/javascript">
$(document).ready(function(){
.......
});
</script>

htmler · #8 (**permalink**) 10.11.2012, 12:26

HTML-Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Test</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="./jquery-1.8.2.js"></script>

</head>
<body>
<div id="wrapper">
	<div id="logo">
		<!--<h1>Your <span>Company Name</span></h1>
		<p>nice company slogan here</p>    --->
	</div>
	<hr />
	<!-- end #logo -->
	<div id="header">
		<div id="menu">
			<ul>
				<li><a href="./index.html">Home</a></li>
				<li><a href="./neu1.html">About</a></li>
				<li><a href="./neu2.html">Services</a></li>
				<li><a href="#">Support</a></li>
				<li></li>
				<li><a href="#">Contact</a></li>
			</ul>
		</div>
		<!-- end #menu -->
		<div id="search">
			<form method="get" action="">
				<fieldset>
				<input type="text" name="s" id="search-text" size="15" />
				<input type="submit" id="search-submit" value="Suche" />
				</fieldset>
			</form>
		</div>
		<!-- end #search -->
	</div>
	<!-- end #header -->
	<!-- end #header-wrapper -->
	<div id="page">
	<div id="page-bgtop">
    <div id="page-bg">
    <div id="sidebar">
      <!-- ###NAVACTIVE### start-->
      <ul>
      <li>
      <h2>VMENU</h2>
      <!-- ###NAVACTIVE### ende-->
        <div id="navleft">
          <ul>
          <li><a href="">Haupt</a></li>
          <li><span><a href="">Neu</a></span>
                <ul>
                <li><a href="./neu1.html">Neu01</a></li>
                <li><a href="./neu2.html">Neu02</a></li>
                <li><a href="#">Unterpunkt 03</a></li> 
                </ul>
          </li>    
          <li><a href="">Yahoo</a></li>
                <ul>
                <li><a href="./neu1.html">Neu01</a></li>
                <li><a href="./neu2.html">Neu02</a></li>
                <li><a href="#">Unterpunkt 03</a></li>
                </ul>
          <li><a href="">MSN</a></li>
          </ul> 
         </div>
         </li>
         </ul>
      <ul>
				<li>
					<h2>Latest news</h2>
					<p>Thank you for downloading this template. This or any other template  is  free for personal use, but you must leave our link on this page. To use a template without a link to our website please purchase a license for $30.00USD <a href="http://www.rickyswebtemplates.com/linkfree_license.htm" target="_blank">here</a>.</p>
				</li>
				<li>
					<h2>Partners</h2>
					<ul>
						<li><a href="#">Some link here</a></li>
						<li><a href="#">Some link here</a></li>
						<li><a href="#">Some link here</a></li>
						<li><a href="#">Some link here</a></li>
						<li><a href="#">Some link here</a></li>
					</ul>
				</li>
			</ul>
</div>
		<!-- end #sidebar -->
     
		<div id="content">
     <div id="breadcrumb">text</div>
			<div class="post1">
				<h2 class="title"><a href="#">Welcome to OUR SITE</a></h2>
				<div class="entry">
			    <p>Thank you for downloading this template. This or any other template  is  free for personal use, but you must leave our link on this page. To use a template without a link to our website please purchase a license for $30.00USD <a href="http://www.rickyswebtemplates.com/linkfree_license.htm" target="_blank">here</a>.</p>
			    <p>Here you will find help about editing our templates and empty buttons and logos for editing: </p>
<p><a href="http://www.rickyswebtemplates.com/members/login.php">http://www.rickyswebtemplates.com/members/login.php</a>.</p>
			    <p>For more informations, contact us : webmaster@rickyswebtemplates.com</p>
			    <p> We have created user guide with step by step instructions.</p>
			    <p>If you don't know how to edit our free templates, or you don't have time we can do  that for you. For only $30 USD  we will edit logo, buttons and create few pages the way you like it. You only have to put your text  in it and your web page  is done.</p>
			    <p>For more informations, contact us : webmaster@rickyswebtemplates.com</p>
			    <p> We have created user guide with step by step instructions.</p>
			    <p>If you don't know how to edit our free templates, or you don't have time we can do  that for you. For only $30 USD  we will edit logo, buttons and create few pages the way you like it. You only have to put your text  in it and your web page  is done.</p>
			    <p>For more informations, contact us : webmaster@rickyswebtemplates.com</p>
			    <p>For more FREE web templates and other graphics visit our site: </p>
			    <p><a href="http://www.rickyswebtemplates.com">http://www.rickyswebtemplates.com</a></p>
                </div>
			</div>
			<div class="post">
			  <h2 class="title"><a href="#">Lorem ipsum dolor</a></h2>
			  <p class="meta">Monday, January 26, 2011 00:00 AM Posted by <a href="#">Your name</a></p>
				<div class="entry">
				  <p>Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum vel, tempor at, varius non, purus. Mauris vitae nisl nec   consectetuer. Donec ipsum. Proin imperdiet est. Phasellus <a href="#">dapibus semper urna</a>. Pellentesque ornare, orci in consectetuer hendrerit, urna elit eleifend nunc, ut consectetuer nisl felis ac diam. Etiam non felis. Donec ut ante. In id eros.</p>
			  </div>
			</div>
            <div class="post">
			  <h2 class="title"><a href="#">Lorem ipsum dolor</a></h2>
			  <p class="meta">Monday, January 26, 2011 00:00 AM Posted by <a href="#">Your name</a></p>
				<div class="entry">
				  <p>Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum vel, tempor at, varius non, purus. Mauris vitae nisl nec   consectetuer. Donec ipsum. Proin imperdiet est. Phasellus <a href="#">dapibus semper urna</a>. Pellentesque ornare, orci in consectetuer hendrerit, urna elit eleifend nunc, ut consectetuer nisl felis ac diam. Etiam non felis. Donec ut ante. In id eros.</p>
			  </div>
			</div>
</div>
		<!-- end #content -->
        
        <div id="sidebar">
			<ul>
				<li>
					<h2>Latest news</h2>
					<p>Thank you for downloading this template. This or any other template  is  free for personal use, but you must leave our link on this page. To use a template without a link to our website please purchase a license for $30.00USD <a href="http://www.rickyswebtemplates.com/linkfree_license.htm" target="_blank">here</a>.</p>
				</li>
				<li>
					<h2>Partners</h2>
					<ul>
						<li><a href="#">Some link here</a></li>
						<li><a href="#">Some link here</a></li>
						<li><a href="#">Some link here</a></li>
						<li><a href="#">Some link here</a></li>
						<li><a href="#">Some link here</a></li>
					</ul>
				</li>
			</ul>
</div>
		<!-- end #sidebar -->
        

		
		<div style="clear: both;">&nbsp;</div>
	</div>
	</div>
  </div>
	<!-- end #page -->
	<div id="footer-bgcontent">
	<div id="footer">

        

	</div>
	</div>
	<!-- end #footer --> 
</div>  
<script type="text/javascript">

$(function() {
  $('#navleft li>ul').hide();
  $('#navleft li a').click(function(){
     $(this).parent().children('ul').slideToggle(100);
  });
}); 
</script> 
 
</body>
</html>

so sieht mein HTML aus und mir fällt gerade auf. das bei yahoo wo drunter steht neu1,neu2, unterpunkt03 das das ja unterpnkte von yahoo sind.

Lustiger weise wenn man auf Neu2 klickt (was eig ein untermenüpunkt von yahho ist) öffnet sich das menü beim "Neu"

und dieses hatte ich shcon probiert gehabt:

Code:

<script type="text/javascript">
$(document).ready(function(){
$(function() {
  $('#navleft li>ul').hide();
  $('#navleft li a').click(function(){
     $(this).parent().children('ul').slideToggle(100);
  });
}); 
}); <-- aller dings hatte ich hier nur die geschweifte klammer und das simikolon xD
</script>

kann es sein das es deswegen nicht ging?
wenn ich das so mache kommt das ja dann wieder in den <head>script</head> wieder rein.

Manfred62 · #9 (**permalink**) 10.11.2012, 12:37

Code:

<script type="text/javascript">
$(document).ready(function(){
$(function() {

du rufst es 2x auf...?
BTW: das ganze Thema gehört mittlerweile eher unter javascript.

htmler · #10 (**permalink**) 10.11.2012, 12:59

ja irgend wie schon.
ich ändere es aber wenn ich das darüber aufrufe kommt es ja wieder in den head bereich. und die folgenden probleme bleiben immer noch:

bei yahoo wo drunter steht neu1,neu2, unterpunkt03 das sindu ja unterpnkte von yahoo.

Lustiger weise wenn man auf Neu2 klickt (was eig ein untermenüpunkt von yahho ist) öffnet sich das menü bei "Neu"

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Gelöst: Hauptmenü aktiv wenn im Untermenü navigiert wird	soigroeg	CSS	3	25.06.2012 10:52
mehrer aktive links auf einer Seite als aktiv setzen?	Luziefer	CSS	5	02.02.2012 10:14
Haupt-und Untermenü gleichzeitig aktiv	Antje-Gesine	CSS	1	15.08.2007 18:10
Problem mit Dastellung in IE7 und FF	ConiKost	CSS	1	05.07.2006 12:59