Accordion bitte biite um Hilfe absoluter Anfänger****** Vielen Dank, Danke

A

akrenn

Mitglied
Hallo an alle!
Hallo liebe User,

Habe nun die letzten Tage fast Durchgearbeitet und bin auf die meisten lösungen gekommen. Nun sind es " nur" mehr 2 Dinge:

Das eine ist, das er beim Klicken auf Wer ist ...., oder Was macht..., immer ein eigenes Fenster aufmacht, statt im bestehenden.
Was dadurch passiert ist, dass die andern beiden Menüs überdeckt werden.

Das andere ist, das die Einrückung der Menüs nicht funktioniert und auch der Abstand vom eingeblendeten Text zum Menü ist zu groß!

Anbei die letzte Version 22.12.2010 12:03!
Bitte um hilfe, für manche von euch sind das Minuten für mich Tage!

Vielen Dank
Liebe Grüße akrenn
HTML: 
<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>TEST GmbH</title>
<link href=site2c.css rel="stylesheet" type="text/css">
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="file:///C:/Users/akrenn/Desktop/jquery.min.js"></script>
<script type="text/javascript" src="file:///C:/Users/akrenn/Desktop/jquery-ui.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();
			})
	});
	$(document).ready( function() {
	$('.toggle_container').hide();
	$('.trigger').click( function() {
		var trig = $(this);
		if ( trig.hasClass('trigger_active') ) {
			trig.next('.toggle_container').slideToggle('slow');
			trig.removeClass('trigger_active');
		} else {
			$('.trigger_active').next('.toggle_container').slideToggle('slow');
			$('.trigger_active').removeClass('trigger_active');
			trig.next('.toggle_container').slideToggle('slow');
			trig.addClass('trigger_active');
		};
	return false;
	});
});
</script>
</head>

<body>

<div id="masthead"></div>

<div id="top_nav">
	<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><br><br><br>
					<p class="trigger">Wer ist die Test GmbH</p>
					<div class="toggle_container">
					<p>
					Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
					ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
					amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
					odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
					</p>
					</div>
					<p class="trigger">Was macht die Test Gmbh</p>
					<div class="toggle_container">
					<p>
					Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
					purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
					velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
					suscipit faucibus urna.
					</p>
					</div>
					<p class="trigger">Test GmbH und die Umwelt</p>
					<div class="toggle_container">
					<p>
					Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
					Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
					ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
					lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
					</p>
					</div>
					</div>
			<li><a href="">Produkte</a>
				<div style="left:-111px;"><!-- -112px -->
					<ul>
						<li class="oe_heading">Komposter</li>
						<li><a href="#">HAPPY</a></li>
					</ul>
					<ul>
						<li class="oe_heading">Zubehör</li>
						<li><a href="#">Gehäuse</a></li>
						<li><a href="#">Kücheneinbausatz</a></li>
					</ul>
				</div>
			</li>
			<li><a href="">Hilfe</a>
				<div style="left:-223px;"><!-- -112px -->
					<ul>
						<li class="oe_heading">Anleitung</li>
						<li><a href="#">HAPPY Deutsch</a></li>
						<li><a href="#">HAPPY Englisch</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 HAPPY</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">Die vielen Möglichkeiten</li>
						<li><a href="#">Kontaktformular</a></li>
						<li><a href="#">Adresse</a></li>
						<li><a href="#">Mail</a></li>
						<li><a href="#">Wie finde ich die TEST GmbH</a></li>
					</ul>
					<ul>
						<li class="oe_heading">Social Media</li>
						<li><a href="#">Facebook</a></li>
						<li><a href="#">Twitter</a></li>
					</ul>
				</div>
			</li>
		</ul>
	</div>
</div>

<div id="container">
	<div id="right_col"></div>
	<div id="page_content">	</div>
</div>
<div id="footer"></div>
</body>
</html>

CSS
Code: 
/* CSS layout */
body {
	background:#000;
	font-family:"Trebuchet MS", Helvetica, sans-serif;
	font-size:15px;
	color: #fff;
	text-transform:uppercase;
	overflow-x:hidden;
}

#masthead {
}

#top_nav {
}
.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:560px;
	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: relative;
	top: 0px;
	left: 1px;
	background: #fff;
	width: 498px;
	height: 200px;
	padding: 30px;
	display: none;
	color: #222;
	font-size: 11px;
	text-decoration: 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: 150px;
	margin-right: 10px;
	color: #222;
	font-size: 11px;
	text-decoration: none;
	font-weight: normal;
}
li.oe_heading{
	color:#aaa;
	font-size:16px;
	margin-bottom:10px;
	padding-bottom:6px;
	border-bottom:1px solid #ddd;
}
.trigger {
	text-decoration:none;
	color:#222;
	padding:2px 2px 2px 4px;
	margin:2px;
	display:block;
	font-size:12px;
}
.trigger_active {
	color:#333;
}
.toggle_container {
	position: absolute;
	top: 103px;
	left: 1px;
	background: #fff;
	width: 498px;
	height: auto;
	padding: 30px;
	display: none;
	color: #222;
	font-size: 12px;
	text-decoration: none;
}
#container {
	min-width: 600px;
}

#right_col {
	width: 200px;
	float: right;
}

#page_content {
	margin-right: 200px;
}

#footer {
	clear: both;
}
 
Zuletzt bearbeitet:
Hi

Was hast du den alles geändert?
Ist dies ein 2ter Thread zu einem Thema?
oder was meinst du in deinem ersten Satz mit, "Habe nun alles geändert, accordion eingefügt, sehe nun aber unter willkommen gar nichts mehr, auch kein accordion und schon gar keine Formatierung"

Gruss
 
Hallo liebe User, ich versuche es nun veständlich in Deutsch!

Ich habe eine html Datei. Im Menü gibt es:

WILLKOMMEN

Wer ist Test GmbH

Die TEST GmbH ist .....

Was macht die Test GmbH

Die Test GmbH macht....

.....

Nun möchte ich gerne nur die Überschriften sehen (Wer ist, Was macht) und den text verborgen. Wenn man dann auf Wer ist...., drückt soll der Text erscheinen, wenn man dann auf Was macht... drückt soll das was unter Wer ist.... steht verschwinden und das was unter Was macht steht erscheinen und so weiter.

Ist das nun verständlich und Deutsch?

Vielen Dank liebe Grüße
Moby
 
Zuletzt bearbeitet:
Ist nun auf letztem Stand, nur mehr wenig zu korrigieren, habe aktuellste Verion eingefügt (siehe erstes Posting!)!

Danke für eure Hilfe

akrenn
 
Bitte vermeide Mehrfachposts.
Die Netiquette solltest du nicht so schnell vergessen haben.

Nur weil einen Tag keiner antwortet, muss man nicht fünfmal pushen.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück