И снова меню

Kiman · April 28, 2008

Посмотрев на форуме много тем по меню понял что помогать не всем охотно хотят, но вс? же я наш?л в инете меню вклеил себе, переделал что мог, а дальше не оч то нормально вс? пошло... Мне нужно сделать чтобы при наведении на ссылки они подствечивались цветом и учеличивались я пробовал использовать псевдоклассы http://htmlbook.ru/content/?id=57] не совсем видимо понимаю что куда вставлять, в css b js времени расбираться покаместь нету, прошу помочь.

	<style type="text/css">
	html{
		height:100%;
	}
	body{
		font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
		font-size:0.8em;
		margin:0px;
		padding:0px;
		background-color:#121212;
		height:100%;
		text-align:center;
	}
	.clear{
		clear:both;
	}
	#mainContainer{
		width:160px;
		text-align:left;
		margin:0 auto;
		background-color: #121212;
		height:100%;
	}

	#topBar{
		width:160px;
		height:100px;
	}
	#leftMenu{
		width:200px;
		padding-left:10px;
		padding-right:10px;
		float:left;
	}
	#mainContent{
		width: 160px;
		padding-right:10px;	
		float:left;
	}
	/*
	General rules
	*/

	#dhtmlgoodies_slidedown_menu li{
		list-style-type:none;
		position:relative;
	}
	#dhtmlgoodies_slidedown_menu ul{
		margin:0px;
		padding:0px;
		position:relative;

	}

	#dhtmlgoodies_slidedown_menu div{
		margin:0px;
		padding:0px;
	}
	/* 	Layout CSS */
	#dhtmlgoodies_slidedown_menu{		
		width:205px;
	}

	/* All A tags - i.e menu items. */
	#dhtmlgoodies_slidedown_menu a{
		color: #B3B3B3;
		text-decoration:none;	
		display:block;
		clear:both;
		width:170px;	
		padding-left:2px;	

	}

	/*
	A tags 
	*/
	#dhtmlgoodies_slidedown_menu .slMenuItem_depth1{	/* Main menu items */
		margin-top:1px;
		font-weight:bold;
	}	
	#dhtmlgoodies_slidedown_menu .slMenuItem_depth2{	/* Sub menu items */
		margin-top:1px;
	}	
	#dhtmlgoodies_slidedown_menu .slMenuItem_depth3{	/* Sub menu items */
		margin-top:1px;
		font-style:italic;
		color:blue;
	}	
	#dhtmlgoodies_slidedown_menu .slMenuItem_depth4{	/* Sub menu items */
		margin-top:1px;
		color:red;
	}	
	#dhtmlgoodies_slidedown_menu .slMenuItem_depth5{	/* Sub menu items */
		margin-top:1px;
	}

	#dhtmlgoodies_slidedown_menu .slideMenuDiv1 ul{
		padding:1px;
	}
	#dhtmlgoodies_slidedown_menu .slideMenuDiv2 ul{
		margin-left:5px;
		padding:1px;
	}
	#dhtmlgoodies_slidedown_menu .slideMenuDiv3 ul{
		margin-left:10px;
		padding:1px;
	}
	#dhtmlgoodies_slidedown_menu .slMenuItem_depth4 ul{
		margin-left:15px;
		padding:1px;
	}
	</style>
	<script type="text/javascript">
var expandFirstItemAutomatically = false;	// Expand first menu item automatically ?
var initMenuIdToExpand = false;	// Id of menu item that should be initially expanded. the id is defined in the <li> tag.
var expandMenuItemByUrl = true;	// Menu will automatically expand by url - i.e. if the href of the menu item is in the current location, it will expand


var initialMenuItemAlwaysExpanded = true;	// NOT IMPLEMENTED YET

var dhtmlgoodies_slmenuObj;
var divToScroll = false;
var ulToScroll = false;	
var divCounter = 1;
var otherDivsToScroll = new Array();
var divToHide = false;
var parentDivToHide = new Array();
var ulToHide = false;
var offsetOpera = 0;
if(navigator.userAgent.indexOf('Opera')>=0)offsetOpera=1;	
var slideMenuHeightOfCurrentBox = 0;
var objectsToExpand = new Array();
var initExpandIndex = 0;
var alwaysExpanedItems = new Array();

function popMenusToShow()
{
	var obj = divToScroll;
	var endArray = new Array();
	while(obj && obj.tagName!='BODY'){
		if(obj.tagName=='DIV' && obj.id.indexOf('slideDiv')>=0){
			var objFound = -1;
			for(var no=0;no<otherDivsToScroll.length;no++){
				if(otherDivsToScroll[no]==obj){
					objFound = no;		
				}					
			}	
			if(objFound>=0){
				otherDivsToScroll.splice(objFound,1);	
			}		
		}	
		obj = obj.parentNode;
	}	
}

function showSubMenu(e,inputObj)
{

	if(this && this.tagName)inputObj = this.parentNode;
	if(inputObj && inputObj.tagName=='LI'){
		divToScroll = inputObj.getElementsByTagName('DIV')[0];
		for(var no=0;no<otherDivsToScroll.length;no++){
			if(otherDivsToScroll[no]==divToScroll)return;
		}			
	}
	hidingInProcess = false;
	if(otherDivsToScroll.length>0){
		if(divToScroll){				
			if(otherDivsToScroll.length>0){
				popMenusToShow();
			}
			if(otherDivsToScroll.length>0){	
				autoHideMenus();
				hidingInProcess = true;
			}
		}	
	}		
	if(divToScroll && !hidingInProcess){
		divToScroll.style.display='';
		otherDivsToScroll.length = 0;
		otherDivToScroll = divToScroll.parentNode;
		otherDivsToScroll.push(divToScroll);	
		while(otherDivToScroll && otherDivToScroll.tagName!='BODY'){
			if(otherDivToScroll.tagName=='DIV' && otherDivToScroll.id.indexOf('slideDiv')>=0){
				otherDivsToScroll.push(otherDivToScroll);

			}
			otherDivToScroll = otherDivToScroll.parentNode;
		}			
		ulToScroll = divToScroll.getElementsByTagName('UL')[0];
		if(divToScroll.style.height.replace('px','')/1<=1)scrollDownSub();
	}	


}



function autoHideMenus()
{
	if(otherDivsToScroll.length>0){
		divToHide = otherDivsToScroll[otherDivsToScroll.length-1];
		parentDivToHide.length=0;
		var obj = divToHide.parentNode.parentNode.parentNode;
		while(obj && obj.tagName=='DIV'){			
			if(obj.id.indexOf('slideDiv')>=0)parentDivToHide.push(obj);
			obj = obj.parentNode.parentNode.parentNode;
		}
		var tmpHeight = (divToHide.style.height.replace('px','')/1 - slideMenuHeightOfCurrentBox);
		if(tmpHeight<0)tmpHeight=0;
		if(slideMenuHeightOfCurrentBox)divToHide.style.height = tmpHeight  + 'px';
		ulToHide = divToHide.getElementsByTagName('UL')[0];
		slideMenuHeightOfCurrentBox = ulToHide.offsetHeight;
		scrollUpMenu();		
	}else{
		slideMenuHeightOfCurrentBox = 0;
		showSubMenu();			
	}
}


function scrollUpMenu()
{

	var height = divToHide.offsetHeight;
	height-=15;
	if(height<0)height=0;
	divToHide.style.height = height + 'px';

	for(var no=0;no<parentDivToHide.length;no++){	
		parentDivToHide[no].style.height = parentDivToHide[no].getElementsByTagName('UL')[0].offsetHeight + 'px';
	}
	if(height>0){
		setTimeout('scrollUpMenu()',5);
	}else{
		divToHide.style.display='none';
		otherDivsToScroll.length = otherDivsToScroll.length-1;
		autoHideMenus();			
	}
}	

function scrollDownSub()
{
	if(divToScroll){			
		var height = divToScroll.offsetHeight/1;
		var offsetMove =Math.min(15,(ulToScroll.offsetHeight - height));
		height = height +offsetMove;
		divToScroll.style.height = height + 'px';

		for(var no=1;no<otherDivsToScroll.length;no++){
			var tmpHeight = otherDivsToScroll[no].offsetHeight/1 + offsetMove;
			otherDivsToScroll[no].style.height = tmpHeight + 'px';
		}			
		if(height<ulToScroll.offsetHeight)setTimeout('scrollDownSub()',5); else {
			divToScroll = false;
			ulToScroll = false;
			if(objectsToExpand.length>0 && initExpandIndex<(objectsToExpand.length-1)){
				initExpandIndex++;

				showSubMenu(false,objectsToExpand[initExpandIndex]);
			}
		}
	}
}

function initSubItems(inputObj,currentDepth)
{		
	divCounter++;		
	var div = document.createElement('DIV');	// Creating new div		
	div.style.overflow = 'hidden';	
	div.style.position = 'relative';
	div.style.display='none';
	div.style.height = '1px';
	div.id = 'slideDiv' + divCounter;
	div.className = 'slideMenuDiv' + currentDepth;		
	inputObj.parentNode.appendChild(div);	// Appending DIV as child element of <LI> that is parent of input <UL>		
	div.appendChild(inputObj);	// Appending <UL> to the div
	var menuItem = inputObj.getElementsByTagName('LI')[0];
	while(menuItem){
		if(menuItem.tagName=='LI'){
			var aTag = menuItem.getElementsByTagName('A')[0];
			aTag.className='slMenuItem_depth'+currentDepth;	
			var subUl = menuItem.getElementsByTagName('UL');
			if(subUl.length>0){
				initSubItems(subUl[0],currentDepth+1);					
			}
			aTag.onclick = showSubMenu;				
		}			
		menuItem = menuItem.nextSibling;						
	}		
}

function initSlideDownMenu()
{
	dhtmlgoodies_slmenuObj = document.getElementById('dhtmlgoodies_slidedown_menu');
	dhtmlgoodies_slmenuObj.style.visibility='visible';
	var mainUl = dhtmlgoodies_slmenuObj.getElementsByTagName('UL')[0];		
	var mainMenuItem = mainUl.getElementsByTagName('LI')[0];
	mainItemCounter = 1;
	while(mainMenuItem){			
		if(mainMenuItem.tagName=='LI'){
			var aTag = mainMenuItem.getElementsByTagName('A')[0];
			aTag.className='slMenuItem_depth1';	
			var subUl = mainMenuItem.getElementsByTagName('UL');
			if(subUl.length>0){
				mainMenuItem.id = 'mainMenuItem' + mainItemCounter;
				initSubItems(subUl[0],2);
				aTag.onclick = showSubMenu;
				mainItemCounter++;
			}				
		}			
		mainMenuItem = mainMenuItem.nextSibling;	
	}		

	if(location.search.indexOf('mainMenuItemToSlide')>=0){
		var items = location.search.split('&');
		for(var no=0;no<items.length;no++){
			if(items[no].indexOf('mainMenuItemToSlide')>=0){
				values = items[no].split('=');
				showSubMenu(false,document.getElementById('mainMenuItem' + values[1]));	
				initMenuIdToExpand = false;				
			}
		}			
	}else if(expandFirstItemAutomatically>0){
		if(document.getElementById('mainMenuItem' + expandFirstItemAutomatically)){
			showSubMenu(false,document.getElementById('mainMenuItem' + expandFirstItemAutomatically));
			initMenuIdToExpand = false;
		}
	}

	if(expandMenuItemByUrl)
	{
		var aTags = dhtmlgoodies_slmenuObj.getElementsByTagName('A');
		for(var no=0;no<aTags.length;no++){
			var hrefToCheckOn = aTags[no].href;				
			if(location.href.indexOf(hrefToCheckOn)>=0 && hrefToCheckOn.indexOf('#')<hrefToCheckOn.length-1){
				initMenuIdToExpand = false;
				var obj = aTags[no].parentNode;
				while(obj && obj.id!='dhtmlgoodies_slidedown_menu'){
					if(obj.tagName=='LI'){							
						var subUl = obj.getElementsByTagName('UL');
						if(initialMenuItemAlwaysExpanded)alwaysExpanedItems[obj.parentNode] = true;
						if(subUl.length>0){								
							objectsToExpand.unshift(obj);
						}
					}
					obj = obj.parentNode;	
				}
				showSubMenu(false,objectsToExpand[0]);
				break;					
			}			
		}
	}

	if(initMenuIdToExpand)
	{
		objectsToExpand = new Array();
		var obj = document.getElementById(initMenuIdToExpand)
		while(obj && obj.id!='dhtmlgoodies_slidedown_menu'){
			if(obj.tagName=='LI'){
				var subUl = obj.getElementsByTagName('UL');
				if(initialMenuItemAlwaysExpanded)alwaysExpanedItems[obj.parentNode] = true;
				if(subUl.length>0){						
					objectsToExpand.unshift(obj);
				}
			}
			obj = obj.parentNode;	
		}

		showSubMenu(false,objectsToExpand[0]);

	}



}
	window.onload = initSlideDownMenu;
	</script>

ну и

<div id="mainContainer">
	<div id="leftMenu">
<ul>
				<li><a href="#">Products</a>
					<ul>
						<li><a href="#">Menus</a>
							<ul>
								<li><a href="http://www.dhtmlgoodies.com">Download</a></li>
								<li><a href="http://www.dhtmlgoodies.com">Demo</a></li>
							</ul>
						</li>
						<li><a href="#">Calendar scripts</a>
							<ul>
								<li><a href="http://www.dhtmlgoodies.com">Download</a></li>
								<li><a href="http://www.dhtmlgoodies.com">Demo</a></li>

								<li><a href="#">Is it cross browser?</a>
									<ul>
										<li><a href="http://www.dhtmlgoodies.com">yes it is</a></li>
									</ul>
								</li>
							</ul>
						</li>
						<li><a href="#">Window scripts</a>
							<ul>
								<li><a href="http://www.dhtmlgoodies.com">Download</a></li>
								<li><a href="http://www.dhtmlgoodies.com">Demo</a></li>
							</ul>
						</li>
						<li><a href="#">Form widgets</a>
							<ul>
								<li><a href="http://www.dhtmlgoodies.com">Download</a></li>
								<li><a href="http://www.dhtmlgoodies.com">Demo</a></li>
							</ul>
						</li>
					</ul>
				</li>
				<li><a href="#">Support</a>
					<ul>
						<li><a href="http://www.dhtmlgoodies.com">Phone</a></li>
						<li><a href="http://www.dhtmlgoodies.com">Email</a></li>
						<li><a href="http://www.dhtmlgoodies.com">QnA</a></li>
					</ul>		
				</li>
				<li><a href="#">History</a>
					<ul>
						<li><a href="http://www.dhtmlgoodies.com">1900 - 1940</a></li>
						<li><a href="http://www.dhtmlgoodies.com">1941 - 1980 </a></li>
						<li><a href="http://www.dhtmlgoodies.com">1981 - Present time</a></li>
					</ul>
				</li>
				<li><a href="#">The team</a>
					<ul>
						<li><a href="#">Person A</a>
							<ul>
								<li><a href="#">CV</a>
									<ul>
										<li><a href="http://www.dhtmlgoodies.com">Job 1</a></li>
										<li><a href="http://www.dhtmlgoodies.com">Job 2</a></li>
										<li><a href="http://www.dhtmlgoodies.com">Job 3</a></li>
									</ul>
								</li>
								<li><a href="http://www.dhtmlgoodies.com">Education</a></li>
								<li><a href="#">Experience</a>
									<ul>
										<li><a href="#">Job 1</a>
											<ul>
												<li><a href="http://www.dhtmlgoodies.com">Accomplished this</a></li>
												<li><a href="http://www.dhtmlgoodies.com">Accomplished that</a></li>
											</ul>								
										</li>
										<li><a href="http://www.dhtmlgoodies.com">Job 2</a></li>
										<li><a href="http://www.dhtmlgoodies.com">Job 3</a></li>
									</ul>
								</li>
							</ul>	
						</li>
						<li><a href="http://www.dhtmlgoodies.com">Person B</a></li>
						<li><a href="http://www.dhtmlgoodies.com">Person C</a></li>
						<li><a href="http://www.dhtmlgoodies.com">Person D</a></li>
						<li><a href="http://www.dhtmlgoodies.com">Person E</a></li>

					</ul>		
				</li>
				<li><a href="#">Locations</a>
					<ul>
						<li><a href="http://www.dhtmlgoodies.com">Norway</a></li>
						<li><a href="http://www.dhtmlgoodies.com">United States</a></li>
						<li><a href="http://www.dhtmlgoodies.com">United Kingdom</a></li>
						<li><a href="http://www.dhtmlgoodies.com">Sweden</a></li>
						<li><a href="http://www.dhtmlgoodies.com">Denmark</a></li>
						<li><a href="http://www.dhtmlgoodies.com">Finland</a></li>
					</ul>			
				</li>
			</ul>
		</div>
		<!-- END OF MENU -->
</div>
	<div id="mainContent">
	</div>
	<div class="clear"></div>
</div>

ICQ:383232985 MSN:sj.serj@gmail.com

Надеюсь на вашу помощь.

Dimitry Wolotko · April 28, 2008

Что вы не поняли с псевдоклассами?

Kiman · April 28, 2008

Ну не выходит сделать ссылку подсвечиваемой при наведении на не? мышкой, использовал A:hover но никак...

rus · April 28, 2008

Если вам нужно меню именно на js (dhtml) и вы не знаете и не разбираетесь в этом, то скачайте программу "Sothink_ DHTML", проста как три копейки и взаимодействует с программой "Dreamweaver", она в этой программе появится после установки в меню.

Kiman · April 28, 2008

Ну ясно В общем, да я наверно сделаю меню чисто на css точнее доделаю... Просто понравилась менюшка мне решил впаять. Ну спасибо и на перенаправлении мысли, а то б пришлось 2 дня читать доки по js и дочитывать по css

Kiman · April 29, 2008

Да и кстате ставил я меню сотника, там именно на js мо? с использованием js что мне и нужно, вставив себе код и посмотрев на меню думаю вы б поняли меня, по коду не судят ведь (что наверно и делалось)

Sign In

И снова меню

Question

Kiman

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

Dimitry Wolotko

Link to comment

Share on other sites

Kiman

Link to comment

Share on other sites

rus

Link to comment

Share on other sites

Kiman

Link to comment

Share on other sites

Kiman

Link to comment

Share on other sites

Обсуждения

Forums

Important Information