Accordion einfügen wie, funktioniert einfach nicht!

A

akrenn

Mitglied
Hallo an alle,

Entschuldigung das ich das thema neu aufgreife, hat sich aber soviel geändert, dass ich das mit dem alten Eintrag nicht mehr hinbekomme kann gelöscht werden, oder geschlossen:

Ich habe folgendes Problem:

HTML: 
<div class="oe_wrapper">
			<div id="oe_overlay" class="oe_overlay"></div>
			<ul id="oe_menu" class="oe_menu">
				<li><a href="">Willkommen</a>
					<div>
						<ul>
							<li class="oe_heading">TEST GmbH</li>
						</ul>
                                        </div>

HIER SOLLTE EIN ACCORDION REIN

                                <li><a href="">Suchen</a>
					<div style="left:-559px;">
						<ul>
							<li class="oe_heading">Durchsuchen Sie diese Seite,                                   oder die Welt</li>
						</ul>
					</div>

Ich möchte nun wie oben geschrieben zwischen den beiden ein Accordion einfügen! Bekomme es einfach nicht hin, entweder es steht garnichts, oder es öffnet sich nicht....
Bin am verzweiflen!

Habe die ganzen Files angehängt!

Vielen Dank für eure Hilfe******! Danke!

Danke akrenn
 

Anhänge

Ich glaube dein Code ist ungültig oder ist das nur ein Ausschnitt?
Das erste <li>-Element wird nicht geschlossen.

Zeig doch mal deine Versuche.
 
Danke für deine Antwort, hier die vollen Codes:

HTML: 
<!doctype html>
<html lang=en>

<head>
<meta charset="UTF-8">

<!--/// TITEL ///-->
<title>TEST GmbH | die Firma die sich um die Welt kümmert</title>

<!--// IE9 HACK ///-->
<!--[if lt IE 9]>
   <script src="../html5.js"></script>
<![endif]-->

<!--/// META TAGS ///-->
<meta name="keywords" content="TEST, TEST, Kompost, Indoor, Outdoor">
<meta name="description" content="Erfinder, Produzent und Vertrieb des TEST Komposters">
<meta name="author" content="TEST Krenn">
<meta name="copyright" content="Copyright TEST Krenn 2011">
<link href="style.css" rel="stylesheet" type="text/css">
<link href="images/favicon.ico" rel="favcion" type="image/x-icon">

		<script src="js/cufon-yui.js" type="text/javascript"></script>
		<script src="js/Aller.font.js" type="text/javascript"></script>
		<script type="text/javascript">
			Cufon.replace('ul.oe_menu div a',{hover: true});
			Cufon.replace('h1,h2,.oe_heading');
		</script>
        <style type="text/css">
			span.reference{
				position:fixed;
				left:0px;
				bottom:0px;
				background:#000;
				width:100%;
				font-size:10px;
				line-height:20px;
				text-align:right;
				height:20px;
				-moz-box-shadow:-1px 0px 10px #000;
				-webkit-box-shadow:-1px 0px 10px #000;
				box-shadow:-1px 0px 10px #000;
			}
			span.reference a{
				color:#aaa;
				text-transform:uppercase;
				text-decoration:none;
				margin-right:10px;
				
			}
			span.reference a:hover{
				color:#ddd;
			}
			.bg_img img{
				width:100%;
				position:fixed;
				top:0px;
				left:0px;
				z-index:-1;
			}
			h1{
				font-size:65px;
				text-align:right;
				position:absolute;
				right:40px;
				top:20px;
				font-weight:normal;
				/*text-shadow:  0 0 3px #0096ff, 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #0096ff, 0 0 70px #0096ff, 0 0 80px #0096ff, 0 0 100px #0096ff, 0 0 150px #0096ff;
			*/}
			h1 span{
				display:block;
				font-size:15px;
				font-weight:bold;
			}
			h2{
				position:absolute;
				top:220px;
				left:50px;
				font-size:40px;
				font-weight:normal;
				/*text-shadow:  0 0 3px #f6ff00, 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #f6ff00, 0 0 70px #f6ff00, 0 0 80px #f6ff00, 0 0 100px #f6ff00, 0 0 150px #f6ff00;
*/}
		</style>
    </head>

    <body>
		<div class="bg_img"><img src="http://www.htmldrive.net/edit_media/2010/201009/20100906/advanced_bgimg_slideshow/images/work.jpg" alt="background"></div>
		<h1>TEST<span>TEST GmbH</span></h1>
		<h2>Willkommen in einer besseren Welt!</h2>

		<div class="oe_wrapper">
			<div id="oe_overlay" class="oe_overlay"></div>
			<ul id="oe_menu" class="oe_menu">
				<li><a href="">Willkommen</a>
					<div>
						<ul>
							<li class="oe_heading">TEST GmbH</li>
						</ul>
			<div class="accordionButton"><h3>Hörspiele</h3></div>
			<div class="accordionContent">
			<ul>
			<li><a title="Prof. Van Dusen (Michael Koser)" 
			href="http://blog.funkygog.de/hoerspiele/prof-van-dusen/">Prof. Van Dusen</a></li>
			<li><a title="Jonas - der letzte Detektiv (Michael Koser)" 
			href="http://blog.funkygog.de/hoerspiele/jonas-der-letzte-detektiv/">Jonas (der letzte Detektiv)</a></li>
			<li><a title="Hörspiel Links" 
			href="http://blog.funkygog.de/hoerspiele/">weitere Links</a></li>
			</ul>
			</div>
		</div>
				</li>
				<li><a href="">Produkte</a>
					<div style="left:-111px;"><!-- -112px -->
						<ul>
							<li class="oe_heading">Komposter</li>
						</ul>
						<ul>
							<li class="oe_heading">Accessoire</li>
						</ul>
					</div>
				</li>
				<li><a href="">Hilfe</a>
					<div style="left:-223px;">
						<ul>
							<li class="oe_heading">Beschreibung</li>
						</ul>
						<ul>
							<li class="oe_heading">Kompostieren</li>
						</ul>
						<ul>
							<li class="oe_heading">Fragen</li>
						</ul>
					</div>
				</li>
				<li><a href="">Neuigkeiten</a>
					<div style="left:-335px;">
						<ul>
							<li class="oe_heading">Info 2011</li>
						</ul>
						<ul>
							<li class="oe_heading">Blog</li>
						</ul>
					</div>
				</li>
				<li><a href="">Kontakt</a>
					<div style="left:-447px;">
						<ul>
							<li class="oe_heading">TEST GmbH</li>
						</ul>
						<ul>
							<li class="oe_heading">Social Media</li>
						</ul>
						<ul>
							<li class="oe_heading">So finden Sie uns</li>
						</ul>
					</div>
				</li>
				<li><a href="">Suchen</a>
					<div style="left:-559px;">
						<ul>
							<li class="oe_heading">Durchsuchen Sie diese Seite, oder die Welt</li>
						</ul>
					</div>
				</li>

			</ul>	
		</div>
        <div>
            <span class="reference">
                <a href="http://tympanus.net/codrops/2010/11/25/overlay-effect-menu/">AGB</a>
				<a href="http://www.flickr.com/photos/duke9042004/" target="_blank">Impressum</a>
				<a href="http://www.flickr.com/photos/duke9042004/" target="_blank">Ãœber uns</a>
            </span>
		</div>

        <!-- The JavaScript -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
        <script type="text/javascript">
            $(function() {
				var $oe_menu		= $('#oe_menu');
				var $oe_menu_items	= $oe_menu.children('li');
				var $oe_overlay		= $('#oe_overlay');

                $oe_menu_items.bind('mouseenter',function(){
					var $this = $(this);
					$this.addClass('slided selected');
					$this.children('div').css('z-index','9999').stop(true,true).slideDown(200,function(){
						$oe_menu_items.not('.slided').children('div').hide();
						$this.removeClass('slided');
					});
				}).bind('mouseleave',function(){
					var $this = $(this);
					$this.removeClass('selected').children('div').css('z-index','1');
				});

				$oe_menu.bind('mouseenter',function(){
					var $this = $(this);
					$oe_overlay.stop(true,true).fadeTo(200, 0.6);
					$this.addClass('hovered');
				}).bind('mouseleave',function(){
					var $this = $(this);
					$this.removeClass('hovered');
					$oe_overlay.stop(true,true).fadeTo(200, 0);
					$oe_menu_items.children('div').hide();
				})
            });
        </script>
    </body>
</html>

CSS CODE

Code: 
*{
	margin:0;
	padding:0;
}
body{
	background:#000;
	font-family:"Trebuchet MS", Helvetica, sans-serif;
	font-size:15px;
	color: #fff;
	text-transform:uppercase;
	overflow-x:hidden;
}
.oe_overlay{
	background:#000;
	opacity:0;
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
}
ul.oe_menu{
	list-style:none;
	position:relative;
	margin:30px 0px 0px 40px;
	width:860px;
	float:left;
	clear:both;
}
ul.oe_menu > li{
	width:112px;
	height:101px;
	padding-bottom:2px;
	float:left;
	position:relative;
}
ul.oe_menu > li > a{
	display:block;
	background-color:#101010;
	color:#aaa;
	text-decoration:none;
	font-weight:bold;
	font-size:12px;
	width:90px;
	height:80px;
	padding:10px;
	margin:1px;
	text-shadow:0px 0px 1px #000;
	opacity:0.8;
}
ul.oe_menu > li > a:hover,
ul.oe_menu > li.selected > a{
	background:#fff;
	color:#101010;
	opacity:1.0;
}
.oe_wrapper ul.hovered > li > a{
	background:#fff;
	text-shadow:0px 0px 1px #FFF;
}
ul.oe_menu div{
	position:absolute;
	top:103px;
	left:1px;
	background:#fff;
	width:610px;
	height:180px;
	padding:30px;
	display:none;
}
ul.oe_menu div ul li a{
	text-decoration:none;
	color:#222;
	padding:2px 2px 2px 4px;
	margin:2px;
	display:block;
	font-size:12px;
}
ul.oe_menu div ul.oe_full{
	width:100%;
}
ul.oe_menu div ul li a:hover{
	background:#000;
	color:#fff;
}
ul.oe_menu li ul{
	list-style:none;
	float:left;
	width: 180px;
	margin-right:30px;
}
li.oe_heading{
	color:#aaa;
	font-size:16px;
	margin-bottom:10px;
	padding-bottom:6px;
	border-bottom:1px solid #ddd;
}
.accordionButton {
cursor: pointer;
background: #fff url("images/close.gif") center right no-repeat;
border: 1px solid #ddd;
margin-bottom:10px;
padding:5px 15px;
}
.accordionContent {
background: #fff;
}
#sidebar .accordionContent {
background: transparent;
}
.on {
background: #f1fafa url("images/open.gif") center right no-repeat;
border: 1px solid #ddd;
}
.over {
color: #c00;
background: url("images/hover.jpg") repeat-x scroll left top #FFFFFF;
border: 1px solid #ccc;
}

Es erscheint einfach nichts, Javascripts habe ich in js folder!

Vielen dank!
akrenn
 
Also deine beiden Codes sind laut W3C-Validator valide.
Was mir aber auffällt ist, dass du nicht die jQuery UI einbindest!
 
Danke dir ComFreek,

Könntest du mir deine Antwort erklären, zeigen, bin Anfänger, brauche eine Lösung damit ich an meiner Rückkehr in die Arbeitswelt, weiterarbeiten kann! Vielen Dank akrenn
 
Erstmal würde ich mir das jQuery UI-Komplettpaket downloaden.
Das kann man hier tun. Wenn du möchtest kannst du einzelne Komponenten deaktivieren, wenn du sie nicht brauchst und außerdem ein Design wählen (rechts).

Dann kannst du jQuery, jQuery UI und jQuery UI CSS einbinden:
HTML: 
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.7.custom.min.js"></script>

<!-- Das hier in den Kopf der Seite (<head>) -->
<link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui-1.8.7.custom.css" />
Die Dateinamen könnten bei dir anders heißen!
Und dann dein Code an dieses Schema anpassen.


Eine Frage: Hattest du überhaupt vor dein Accordion mit jQuery zu machen?
Sonst schreibe ich hier was hin, was du sowieso nicht gebrauchen kannst ;)
 
Hallo ComFreek, danke, versuche ich mal hast du einen anderen lösungsvorschlag, wie ich eine sich auf und zu klappenden Text zu verwirklichen? Wenn ja, ersuche ich dich um eine Lösung auf anderen weg. Möchte es sauber, nicht zu groß und durch das Accordion für jeden Menschen übersichtlich, auch für ältere! Soll auch alles auf iPHone und iPad funktionieren!

Danke, Danke
LG akrenn
 
Nein, ich kenne nur jQuery UI Accordion, aber das kannst du auch später selber mit CSS anpassen für iPhone oder für Layouts mit größeren Schriften.
 
Danke bin zu blöd es richtig einzufügen wie es aussieht!

Bitte Schaut mal!

HTML: 
<!doctype html>
<html lang=en>

<head>
<meta charset="UTF-8">

<!--/// TITEL ///-->
<title>TEST GmbH | die Firma die sich um die Welt kümmert</title>

<!--// IE9 HACK ///-->
<!--[if lt IE 9]>
   <script src="../html5.js"></script>
<![endif]-->

<!--/// META TAGS ///-->
<meta name="keywords" content="TEST, TEST, Kompost, Indoor, Outdoor">
<meta name="description" content="Erfinder, Produzent und Vertrieb des TEST Komposters">
<meta name="author" content="TEST Krenn">
<meta name="copyright" content="Copyright TEST Krenn 2011">
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="images/favicon.ico" rel="favcion" type="image/x-icon">
<link href="css/ui-lightness/jquery-ui-1.8.7.custom.css" rel="stylesheet" type="text/css">
		
		<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
		<script src="js/jquery-ui-1.8.7.custom.min.js"type="text/javascript"></script>
		<script src="js/cufon-yui.js" type="text/javascript"></script>
		<script src="js/Aller.font.js" type="text/javascript"></script>
		<script type="text/javascript">
			Cufon.replace('ul.oe_menu div a',{hover: true});
			Cufon.replace('h1,h2,.oe_heading');
		</script>
		<script type="text/javascript">
			$(function(){

				// Accordion
				$("#accordion").accordion({ header: "h3" });			
			});
		</script>

        <style type="text/css">
			span.reference{
				position:fixed;
				left:0px;
				bottom:0px;
				background:#000;
				width:100%;
				font-size:10px;
				line-height:20px;
				text-align:right;
				height:20px;
				-moz-box-shadow:-1px 0px 10px #000;
				-webkit-box-shadow:-1px 0px 10px #000;
				box-shadow:-1px 0px 10px #000;
			}
			span.reference a{
				color:#aaa;
				text-transform:uppercase;
				text-decoration:none;
				margin-right:10px;
				
			}
			span.reference a:hover{
				color:#ddd;
			}
			.bg_img img{
				width:100%;
				position:fixed;
				top:0px;
				left:0px;
				z-index:-1;
			}
			h1{
				font-size:65px;
				text-align:right;
				position:absolute;
				right:40px;
				top:20px;
				font-weight:normal;
				/*text-shadow:  0 0 3px #0096ff, 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #0096ff, 0 0 70px #0096ff, 0 0 80px #0096ff, 0 0 100px #0096ff, 0 0 150px #0096ff;
			*/}
			h1 span{
				display:block;
				font-size:15px;
				font-weight:bold;
			}
			h2{
				position:absolute;
				top:220px;
				left:50px;
				font-size:40px;
				font-weight:normal;
				/*text-shadow:  0 0 3px #f6ff00, 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #f6ff00, 0 0 70px #f6ff00, 0 0 80px #f6ff00, 0 0 100px #f6ff00, 0 0 150px #f6ff00;
*/}
		</style>
    </head>

    <body>
		<div class="bg_img"><img src="http://www.htmldrive.net/edit_media/2010/201009/20100906/advanced_bgimg_slideshow/images/work.jpg" alt="background"></div>
		<h1>TEST<span>TEST GmbH</span></h1>
		<h2>Willkommen in einer besseren Welt!</h2>

		<div class="oe_wrapper">
			<div id="oe_overlay" class="oe_overlay"></div>
			<ul id="oe_menu" class="oe_menu">
				<li><a href="">Willkommen</a>
					<div>
						<ul>
							<li class="oe_heading">TEST GmbH</li>							
						</ul>
					<!-- Accordion -->
		<h2 class="demoHeaders">Accordion</h2>
		<div id="accordion">
			<div>
				<h3><a href="#">First</a></h3>
				<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
			</div>
			<div>
				<h3><a href="#">Second</a></h3>
				<div>Phasellus mattis tincidunt nibh.</div>
			</div>
			<div>
				<h3><a href="#">Third</a></h3>
				<div>Nam dui erat, auctor a, dignissim quis.</div>
			</div>
		</div>

						</div>
				</li>
				<li><a href="">Produkte</a>
					<div style="left:-111px;"><!-- -112px -->
						<ul>
							<li class="oe_heading">Komposter</li>
							<li><a href="#">TEST</a></li>
						</ul>
						<ul>
							<li class="oe_heading">Accessoire</li>
							<li><a href="#">TEST Verkleidung</a></li>
							<li><a href="#">Einbausatz</a></li>
						</ul>
					</div>
				</li>
				<li><a href="">Hilfe</a>
					<div style="left:-223px;">
						<ul>
							<li class="oe_heading">Beschreibung</li>
							<li><a href="#">TEST Deutsch</a></li>
							<li><a href="#">TEST Englisch</a></li>
							<li><a href="#">TEST Spanisch</a></li>
						</ul>
						<ul>
							<li class="oe_heading">Kompostieren</li>
							<li><a href="#">Wie kompostiere ich richtig</a></li>
							<li><a href="#">Wie reinige ich den TEST</a></li>
						</ul>
						<ul>
							<li class="oe_heading">Fragen</li>
							<li><a href="#">Wie reinige ich den TEST</a></li>
						</ul>
					</div>
				</li>
				<li><a href="">Neuigkeiten</a>
					<div style="left:-335px;">
						<ul>
							<li class="oe_heading">Info 2011</li>
							<li><a href="#">Presse</a></li>
							<li><a href="#">Magazine</a></li>
							<li><a href="#">Auszeichnungen</a></li>
						</ul>
						<ul>
							<li class="oe_heading">Blog</li>
							<li><a href="#">Aktuelles</a></li>
						</ul>
					</div>
				</li>
				<li><a href="">Kontakt</a>
					<div style="left:-447px;">
						<ul>
							<li class="oe_heading">TEST GmbH</li>
							<li><a href="#">Kontaktdaten</a></li>
							<li><a href="#">Kontaktformular</a></li>
							<li><a href="#">Impressum</a></li>
							<li><a href="#">AGB</a></li>
						</ul>
						<ul>
							<li class="oe_heading">Social Media</li>
							<li><a href="#">Facebook</a></li>
							<li><a href="#">Twitter</a></li>
							<li><a href="#">RSS</a></li>
						</ul>
						<ul>
							<li class="oe_heading">So finden Sie uns</li>
							<li><a href="#">Hier ist die TEST GmbH zuhause</a></li>
						</ul>
					</div>
				</li>
				<li><a href="">Suchen</a>
					<div style="left:-559px;">
						<ul>
							<li class="oe_heading">Durchsuchen Sie diese Seite, oder die Welt</li>
							<li><a href="#">Bing</a></li>
							<li><a href="#">Google</a></li>
						</ul>
					</div>
				</li>

			</ul>	
		</div>
        <div>
            <span class="reference">
                <a href="http://tympanus.net/codrops/2010/11/25/overlay-effect-menu/">AGB</a>
				<a href="http://www.flickr.com/photos/duke9042004/" target="_blank">Impressum</a>
				<a href="http://www.flickr.com/photos/duke9042004/" target="_blank">Ãœber uns</a>
            </span>
		</div>

        <!-- The JavaScript -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
        <script type="text/javascript">
            $(function() {
				var $oe_menu		= $('#oe_menu');
				var $oe_menu_items	= $oe_menu.children('li');
				var $oe_overlay		= $('#oe_overlay');

                $oe_menu_items.bind('mouseenter',function(){
					var $this = $(this);
					$this.addClass('slided selected');
					$this.children('div').css('z-index','9999').stop(true,true).slideDown(200,function(){
						$oe_menu_items.not('.slided').children('div').hide();
						$this.removeClass('slided');
					});
				}).bind('mouseleave',function(){
					var $this = $(this);
					$this.removeClass('selected').children('div').css('z-index','1');
				});

				$oe_menu.bind('mouseenter',function(){
					var $this = $(this);
					$oe_overlay.stop(true,true).fadeTo(200, 0.6);
					$this.addClass('hovered');
				}).bind('mouseleave',function(){
					var $this = $(this);
					$this.removeClass('hovered');
					$oe_overlay.stop(true,true).fadeTo(200, 0);
					$oe_menu_items.children('div').hide();
				})
            });
        </script>
    </body>
</html>

CSS Brauche ich nicht ändern, da er auf die eigene zugreift, habe auch den CSS Folder und den LS folder in meine Umgebung kopiert, die auch funktionieren!

Danke liebe Grüße
akrenn
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück