|
|||
Untermenü bei Vertikalenmenü ausfahren und aktiv setzen
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 |
Sponsored Links |
|
||||
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; } Code:
<script type="text/javascript"> $(function() { $('#navleft li>ul').hide(); $('#navleft li a').click(function(){ $(this).parent().children('ul').slideToggle(100); }); }); </script> 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> Code:
<script type="text/javascript" src="javascriptverzeichnis/jquery.1.8.2.js"></script> 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 |
Sponsored Links |
|
|||
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> 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? |
|
|||
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] |
|
||||
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). |
|
|||
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;"> </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> 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> wenn ich das so mache kommt das ja dann wieder in den <head>script</head> wieder rein. |
|
|||
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" |
Sponsored Links |
Stichwörter |
menü aktiv, untermenü problem, vertikale menüs |
Themen-Optionen | |
Ansicht | |
|
|
Ä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 |