Wysuwane menu CSS3 i JavaScript nie działa

0

witam mam pytanie a bardziej prosbe o pomoc czy moze mi ktos powiedziec co zrobilem zle ze nie uzyskalem takie efektu menu jak tutaj: http://www.developphp.com/view.php?tid=1379.

Ogolnie moj problem polega na tym ze to menu nie dziala i nie mam pojecia dlaczego i pewnie ktos z was moglby mi powiedziec co zle zrobilem i doradzic cos poczatkujacemu :) bylbym szczegolnie wdzieczny bo to na uniwerek musze zrobic :) z gory dziekuje i przepraszam za kod bo pewnie jest ladny w nim balagan.

Jestem zielony w tych sprawach i dopiero co zaczalem i musialem cos pogmatwac i od kilku godzin usilowalem cos znalezc ale nie dalem rady nic wskurac :( jesli ktos bylby w stanie pomoc bylbym wdzieczny. Plik css wraz z java i html sa w zalaczniku poniewaz plik css byl dlugi na 200 linijek postanowilem go nie publikowac w poscie oto co ja stworzylem jak na razie:

code type = Javascript

<script type="text/javascript">
 function toggleNavPanel(x){
 var panel = document.getElementById(x), 
 navarrow = document.getElementById("navarrow"), maxH="300px"; 
 if(panel.style.height == maxH)
 { panel.style.height = "0px"; navarrow.innerHTML = "&#9662;"; 
 } else { panel.style.height = maxH; navarrow.innerHTML = "&#9652;"; } }
</script>

code type = HTML

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="script.css" type="text/css" />
</head>
<body>
<div id="logo">
	<div class="container">
		<form id="login">
			
		<div class="header">
			<h3>Log in </h3>
			<p> Fill in the fields to log in</p>
		</div> <!-- This is the div for discription of log in box -->
		<div class="sep"></div>
		
			<div class="inputs">
				<input type="email" placeholder="E-mail address" autofocus />
				<!-- the filed for email after typing the text will disappear -->
				<input type="password" placeholder="Password" autofocus />
				<div class="remember">
					<input name="checkin" id="checkin" value="1" type="checkbox">
					<label class="terms"> Remember me</label>
				</div> <!-- The make this button work php script needed -->
				<a id="submit" href="#">Log in</a>
		
		</form>
	</div>
</div>
</div>
<div id="Menu" >
	<div id="Marketing">
		<button onclick="toggleNavPanel('Marketing_panel')">Marketing<span id="navarrow">&#9662;</span></button>
	</div>
	<div id="marketing_panel"> <div id="markcont">pop up menu content</div>
	</div>

</div>

<div class="content">
	 <p>div content</p>
 
</div>
<div class="ac" >
<div id="menu2">
   <ul>
      <li><a href="#" title="aboutus">About us</a></li>
      <li><a href="#" title="contactus" class="active">Conct us</a></li>
      <li><a href="#" title="FAQ>FAQ</a></li>
      <li><a href="#" title="links">Other websites</a></li>
      <li><a href="#" title="copyrights">copyrights</a></li>
   </ul>
</div>
<div id="mainac">
   <h3>Main content header</h3>
   <p>Main content</p>
</div>
</div>
</body>		
</html>
1

na pierwszy rzut oka, dałeś w akcji onclick takie coś: toggleNavPanel('sections_panel'), tylko że diva o takim id sections_panel nie ma w tym kodzie html, a robisz w js na nim coś tam...

0

okej to teraz mam kolejny problem zwiazany z tym menu a mianowicie nie moge zmienic pozycji tego boxa ktorego stworzylem i pozniej ukrylem ponizej dalem elementy css ktore oddzialowuja na elementy tego menu :) jesli ktos moglby cos doradzic byloby super :D

#Menu  {
	width:400px;
	height:350px; 
	border-width:2px;
	border-style:solid;  
	position: fixed;
	top:10px;
	left: 5px;
	padding:1px;
	float:left; 
#marketing_btn_holder {
	float: left;
	width: 114px;
	height: 46px;
	padding-top: 2em;
}
#btn1 {background: blue;}

#marketing_panel {
	Position: absolute;
	height:0em;
	width: 550px;
	background: #000;
	top:1px;
	left:20px;
	border-radius: 8px 8px 8px 8px;
	overflow: hidden;
	z-index: 10000;
	transition: height 0.3s inear 0s;
/*I have chosen this method to create a nice menu as its fairly simple and it meets my needs as i wanted to have 'dropdown' menu to put more informations inside.
 the height is 0 and javascript make it 'pop out' as well as overflow: hidden which make customers no to see the div. transition exclude the java script animation to be written*/	
}

#markcont {
	background: #333;
	padding: 10px;
	height: 238px;
	margin: 10px;
	color: #FC0;
}
0

w #marketing_panel zmieniasz pozycję przez: left, top, bottom, right

0

dzieki bardzo za pomoc skonczylem stronke i az sie pochwale efektem koncowym :D

temat jest w sumie do zamkniecia :)

1 użytkowników online, w tym zalogowanych: 0, gości: 1