Едно меню от дата.бг

[2SHAE]

Незнаех къде да я пусна тази тема за това ако съм объркал категорията преместете я и сега по въпроса може ли някой да ми даде същото меню като това във дата.бг което стои в ляво и като минеш върху новината се изкарва снимка и текст?

 

[Anonymous]

Става с малко Ajax и събитието onMouseover

 

[I_V_O]

Може да направя урок за това ако се съберат много желаещи

За сега http://dynamicdrive.com !

 

[tysonlkr]

Може да направя урок за това ако се съберат много желаещи

За сега http://dynamicdrive.com !

Ми ако не те мързи направи едно уроче :roll:
И аз искам да знам как става :?

 

[jaffy]

Моя милост ще се помъчи малко по късно също да видим до къде съм с знанията иначе мога да ти кажа как са направили ерор страницата мислех и аз да ползвам такава ама така ше изглежда се едно копирам сичко от тях

 

[2SHAE]

Ами братлета ако не ва затруднявам моля ви направете по едно уроче мн искам да разбера как се прави това плс

 

[I_V_O]

Ами братлета ако не ва затруднявам моля ви направете по едно уроче мн искам да разбера как се прави това плс

Имаш ли поне базови познания по javascript, защото точно такива са ти нужни за да направиш това меню? Ако отговора е не никога няма да разбереш как става, а само ще копираш кода. И така се губи целия смисъл от урока и по-добре да го пусна в кодовете.

 

[2SHAE]

Ами нямам ама ше го науча ся уча флаш след това ше науча javascript

 

[I_V_O]

Ето направо кода. Който има желание да го разгледа... не е труден за разбиране Ако има проблеми пишете в темата.

Само няколко вметки:

1.На мястото на съдържанието в <li> таговете поставете вашето съдържание.

2.Можете да променяте цветовете от масива colors

3.Гледайте броя на елментите в масива colors, <span> таговете в #buttons и <li> тата да е равен.

4.Височината на целия панел се генерира автоматично от боря на бутоните!

Това е дано ви е полезен !

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>...::: Menu :::...</title>
		
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		
		<style type="text/css">
			#glaven{
				width: 600px; border: solid 2px #ddd;
				position: relative;
			}
			#buttons{
				width: 200px; float: left;
				
			}
			#buttons span{
				display: block; text-align: center;
				border-right: 3px solid black;
			}
			#content{
				float: left;
				width: 400px; height: 100%;
				overflow: auto;
			}
		</style>
		
		<script type="text/javascript">
			function changeContent(obj, cont){
				for(i=0;i<but.length;i++){
					but[i].style.borderRight = '3px solid black';
				}
				obj.style.borderRight = 'none';
				content.style.background = obj.style.background;
				content.innerHTML = cont.innerHTML;
			}
		</script>
		
	</head>
	
	<body>
		
		<div id="glaven">
			<div id="buttons">
				<span onmouseover="changeContent(this, sydyrjaniq[0])">A</span>
				<span onmouseover="changeContent(this, sydyrjaniq[1])">B</span>
				<span onmouseover="changeContent(this, sydyrjaniq[2])">C</span>
				<span onmouseover="changeContent(this, sydyrjaniq[3])">D</span>
				<span onmouseover="changeContent(this, sydyrjaniq[4])">E</span>
			</div>
			<div id="content">
				<div style="padding: 5px;">
					sddsgsdgsg<br />
					sddsgsdgsg<br />
					sddsgsdgsg<br />
					sddsgsdgsg<br />
				</div>
			</div>
		</div>
		
		<ul id="contManager" style="display: none">
			<li>
				<div style="padding: 5px;" >
					1<br />
					1<br />
					1<br />
				</div>
			</li>
			<li>
				<div style="padding: 5px;" >
					2<br />
					2<br />
					2<br />
				</div>
			</li>
			<li>
				<div style="padding: 5px;" >
					3<br />
					3<br />
					3<br />
				</div>
			</li>
			<li>
				<div style="padding: 5px;" >
					4<br />
					4<br />
					4<br />
				</div>
			</li>
			<li>
				<div style="padding: 5px;" >
					5<br />
					5<br />
					5<br />
				</div>
			</li>
		</ul>
		
		<script type="text/javascript">
			var glaven = document.getElementById('glaven');
			var buttons = document.getElementById('buttons');
			var content = document.getElementById('content');
			
			var colors = new Array("red", "blue", "yellow", "green", "orange");
			
			glaven.style.height = buttons.offsetHeight + 'px';
			content.style.height = buttons.offsetHeight + 'px';
			var but = new Array();
			for(var i=0;i<buttons.childNodes.length;i++){
				
				if(buttons.childNodes[i].nodeName.toLowerCase()  == "span"){
					but[but.length] = buttons.childNodes[i];	
				}
				
			}
			
			for(i=0;i<but.length;i++){
				but[i].style.background = colors[i];
			}
			
			var sydyrjaniq = new Array();
			var myUl = document.getElementById('contManager');
			
			for(var i=0;i<myUl.childNodes.length;i++){
				
				if(myUl.childNodes[i].nodeName.toLowerCase()  == "li"){
					sydyrjaniq[sydyrjaniq.length] = myUl.childNodes[i];	
				}
				
			}
		</script>
	</body>
	
</html>

 

[jaffy]

Златен си бе ей! Още не съм го тествал, но след малко ще видя що за чудо е

 

[2SHAE]

Ами добре обаче как е направено във датата като минаваш върху новината отляво да излиза едно такова като замаглено има малко текст и отдолу виж още?

 

[I_V_O]

Направено е с картинки и малко js анимация, но основата е това което ти дадох.