Ergebnis 1 bis 4 von 4
  1. #1
    Moby ist offline Mitglied
    registriert
    19-12-2010
    Beiträge
    29

    Show and Hide Untermenü (mit Code)

    Hallo Liebe User,

    Versuche nun seit zwei Tagen eine Funktion integrieren was ich aber nicht schaffe. Ich habe eine html Datei und eine CSS Datei Funktioniert alles toll, möchte baer unter den Untermenüs wie zum Beispiel unter willkommen -> wer ist TEST wenn ich darauf klicke ein Text eingeblendet wird und sich das Fenster dementsprechend erweitert. Bei nochmaligen daraufklicken, soll es wieder verschwinden. Das möchte ich auf der ganzen Seite machen wo nicht soviel Text ist das ich eine neue Seite öffnen müßte

    VIelen Dank für Eure Hilfe. Bin ANfänger und würde mich über euer Untesrstüzung sehr freuen. Warum ich hier danach Frage, bin leider Arbeitslos, und habe das Geld nicht dass ich jemand prof. beauftrage. Ist so schon schwer mit Familie.

    Vielen Dank, Vielen Dank
    Moby

    HTML-Code:
    <!DOCTYPE html>
    <html>
    
    <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <title>XELAK GmbH</title>
    <link href="site2c.css" rel="stylesheet" type="text/css">
    
    </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">Willkommen</li>
    							<li><a href="#">Wer ist die TEST</a></li>
    							<li><a href="#">Was macht die TEST</a></li>
    							<li><a href="#">TEST und die Umwelt</a></li>
    						</ul>
    					</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">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="#">TEST Deutsch</a></li>
    							<li><a href="#">TEST 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 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">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</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>
    
            <!-- 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>
    <div id="container">
    	<div id="right_col">
    	</div>
    	<div id="page_content">
    	</div>
    </div>
    <div id="footer">
    </div>
    und eine CSS Datei

    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:absolute;
    	top:103px;
    	left:1px;
    	background:#fff;
    	width:498px;
    	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: 150px;
    	margin-right:10px;
    }
    li.oe_heading{
    	color:#aaa;
    	font-size:16px;
    	margin-bottom:10px;
    	padding-bottom:6px;
    	border-bottom:1px solid #ddd;
    }
    
    #container {
    	min-width: 600px;
    }
    
    #right_col {
    	width: 200px;
    	float: right;
    }
    
    #page_content {
    	margin-right: 200px;
    }
    
    #footer {
    	clear: both;
    }
    Geändert von Moby (19-12-2010 um 15:41 Uhr)

  2. #2
    Avatar von Arcsinh
    Arcsinh ist offline Kaiser
    registriert
    03-06-2010
    Beiträge
    1.392

    AW: Show and Hide Untermenü

    Da du schon jQuery benutzt: such mal nach toggle() bzw. slideToggle()
    Wenn du eine weise Antwort verlangst, musst du vernünftig fragen. (Goethe)

  3. #3
    Moby ist offline Mitglied
    registriert
    19-12-2010
    Beiträge
    29

    AW: Show and Hide Untermenü (Code includiert)

    Vielen Dank Arcsinh

    Habe es nun versucht und eingefügt, irgendwas funktionert aber nicht! Was ist falsch? Ich verzweifle! Bitte, Bitte hilfe! Vielen, Vielen Dank!
    Moby

    HTML-Code:
    <!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">
    
    </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>
    			<dl class="v_show_hide">
      			<dt>Wer ist die TEST GmbH</dt>
      			<dd>These are a simple chocolate cupcake, with a dusting of powdered sugar for a topping.  The bat and ghost shapes were made by placing paper cut-outs over the cupcake before dusting on the powdered sugar.  </dd>
      			<dt>Was macht die TEST GmbH</dt>
      			<dd>Start with a tube of premade sugar cookie dough.  Press a cookie-sized amount into mini-muffin pans and then bake as directed.  Dust the cookie cups with powdered sugar.  Microwave some jam (raspberry and mint) and spoon it into the cookie cups.  Melted some chocolate chips, scoop them into a platic baggie, cut off the corner of the baggie, and drizzle the chocolate on the cookies.</dd>
      			<dt>TEST GmbH und die Umwelt</dt>
      			<dd>These are chocolate cupcakes, with a cream-cheese frosting, and fall harvest leaf sprinkles.</dd>
    			</dl>
    				</div>	
    				</li>
    				<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>
    
            <!-- 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>
            <script type="text/javascript">
       		$(document).ready(function(){
    
    	//  Get height of all dds before hide() occurs.  Store height in heightArray, indexed based on the dd's position.
    	heightArray = new Array();
    	$("dl.v_show_hide dd").each(function(i) {
    	  theHeight = $(this).height();
    	  heightArray[i] = theHeight;
    	});
    
    	// Hide all dds
    	$("dl.v_show_hide dd").hide();
    
    	//  When a dt is clicked, 
    	$("dl.v_show_hide dt").click(function () {
    	  //  Based on the dt's position in the dl, retrieve a height from heightArray, and re-assign that height to the sibling dd.
    	  $(this).next("dd").css({height: heightArray[$("dl.v_show_hide dt").index(this)]});
    	  //  Toggle the slideVisibility of the dd directly after the clicked dt
    	  $(this).next("dd").slideToggle("slow")
    		//  And hide any dds that are siblings of that "just shown" dd.
    		.siblings("dd").slideUp("slow");
    	});
    
     }); </script>
    <div id="container">
    	<div id="right_col">
    	</div>
    	<div id="page_content">
    	</div>
    </div>
    <div id="footer">
    </div>
    Und hier das CSS. muss ich das auch ändern?

    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:absolute;
    	top:103px;
    	left:1px;
    	background:#fff;
    	width:498px;
    	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: 150px;
    	margin-right:10px;
    }
    li.oe_heading{
    	color:#aaa;
    	font-size:16px;
    	margin-bottom:10px;
    	padding-bottom:6px;
    	border-bottom:1px solid #ddd;
    }
    
    #container {
    	min-width: 600px;
    }
    
    #right_col {
    	width: 200px;
    	float: right;
    }
    
    #page_content {
    	margin-right: 200px;
    }
    
    #footer {
    	clear: both;
    }
    Geändert von Moby (19-12-2010 um 15:38 Uhr)

  4. #4
    Avatar von Arcsinh
    Arcsinh ist offline Kaiser
    registriert
    03-06-2010
    Beiträge
    1.392

    AW: Show and Hide Untermenü

    Ohne den CSS-Teil geht bei mir alles, also musst du dort was überdenken.
    Wenn du eine weise Antwort verlangst, musst du vernünftig fragen. (Goethe)

Ähnliche Themen

  1. hide/show script
    Von tenyks im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 25-11-2009, 14:48
  2. Show Hide Text
    Von mave im Forum JavaScript
    Antworten: 6
    Letzter Beitrag: 09-10-2008, 22:29
  3. Hide/Show Problematik
    Von selfownd97 im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 30-07-2008, 19:23
  4. Show hide Multilayer
    Von Lommel im Forum JavaScript
    Antworten: 0
    Letzter Beitrag: 16-12-2006, 09:20
  5. Show, Hide Layer ?!?!?!
    Von lOsEr im Forum Allgemeines
    Antworten: 1
    Letzter Beitrag: 14-05-2001, 11:22

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •