Jump to content
  • 0

положение меню

Talexandria

Asked by Talexandria,

 Share

Question

2 answers to this question

Recommended Posts

  • 0
Talexandria Explorer

Talexandria

Posted
  • Author
Posted

Пжалуйста и код:

html:

 
<html>
<head>
	<title>Menu Test</title>
	<script src="dbMenu.js" type="text/javascript"></script>
	<link href="global.css" type="text/css" rel="stylesheet" media="screen">
	<link href="collapse.css" type="text/css" rel="stylesheet" media="screen">
	</head>

<body>

<table width="100%" height="100%" border="1" cellpacing="0" cellpadding="0">

<tr height="20%" >
<td width="20%" > 
<table cellpacing="0" cellpadding="0"><tr><td></td></tr></table>

</td>

<td colspan="2" width="40%" ><p>Название</p></td>
<td colspan="2" width="40%" ><p>фото</p></td>

</tr>


<tr height="5%">

<td width="20%"><p>Пусто</p></td>
<td width="15%" align="center">
</td>
<td colspan="2"><p>Поиск</p></td>
<td width="13%" align="center">




</td>

</tr>


<tr height="65%">

<td width="20%" >
<table width="100%" height="100%" border="2" cellpacing="0" cellpadding="0">
<tr><td>
	<ul id="menu" class="dbMenu">
 <li><a href="./1.html">Главная</a></li>
		<li>О компании
		<ul>
			<li><a href="../collapse/index.html">История </a></li>
			<li><a href="./2.html">Структура</a></li>
			<li><a href="../side/index.html">Политика </a></li>
			<li><a href="../side/index.html">Конференции,</a></li>
			<li><a href="../side/index.html">Награды</a></li>
			<li><a href="../side/index.html">Программы</a></li>
			<li><a href="../side/index.html">Общество</a></li>
			<li><a href="../side/index.html">СМИ</a></li>
		</ul>
		</li>
		<li>Система 


		<ul>
			<li><a href="./1.html">О СМК</a></li>
			<li><a href="collapse.html">Политика </a></li>
			<li><a href="collapse.html">Сертификаты</a></li>
		</ul>
</li>


				<li>деятельность
		<ul>
			<li><a href="common.html">Услуги</a></li>
			<li><a href="collapse.html">Проекты</a></li>
		</ul>
		</li>
		<li><a href="script.html">Новости</a></li>
		<li><a href="script.html">Контакты</a></li>
	</ul>	
</td></tr>
</table>
</td>
<td width="80%" colspan=4"><p>Основное</p></td>
</tr>


<tr height="10%">

<td width="100%" colspan="5"><p>ярлычки</p></td>
</tr>


</table>


</body>
</html>

global.css

#menu{
	position:absolute;
	z-index:1;
	top:30%;
	left:1%;
	padding:1%;
	margin:2%;
	list-style:none;

}
body>#menu{
	position:fixed;
}
li ul{
	position:relative;
	display:none;
	padding:12px;	
	margin:0px;
	list-style:none;
}
li{
	position:relative;

	background-color:#6666ff;
	border:1px solid black;
	padding:2px;
	margin:0px;
	color:#99ffff;

}
.subMenu{
	background-repeat:no-repeat
}
.click{
	background-color:#6666cc;
	color:#99ffff;
}
.click ul{
	display:block;
}
.hover, ul li a:hover{
	cursor:pointer;
	background-color:#6699ff;
	color:#000099;
}
li ul li.hover, li ul li.hover a:hover{
	background-color:#6699ff;
}
li a{
	width:100%
}
li a, li ul li a, li.hover ul li a{
	text-decoration:none;
	color:white;
}
li.hover a, li ul li.hover a{
	color:#660033;
	text-decoration:none;

}

collapse.css

#menu{
	width:16em;/*ширина строки*/
	font-size:10pt;
	font-family:verdana;
}
.subMenu{
	background-image:url('./images/down.gif');
	background-position:bottom right;
}
.click{
/*	background-image:none;	*/
	background-image:url('./images/top.gif');	
}

js:

var dbMenu = {
 init: function(){
 var uls = document.getElementsByTagName('ul');
 for(var i = 0; i < uls.length; i++){
 if(uls[i].className.search(/bdbMenub/) == -1)
 continue;
 var menu = uls[i];

 dbMenu.styleSubMenus(menu);

 addEvent(menu, 'mouseover', dbMenu.hover, false);
 addEvent(menu, 'mouseout', dbMenu.hover, false);
 addEvent(menu, 'click', dbMenu.click, false);
 addEvent(menu, 'click', dbMenu.nav, false);
 }

 addEvent(document, 'click', dbMenu.removeClick, false);

 },

 hover: function(e){
 var target = (window.event)? window.event.srcElement : (e)? e.target : null;

 if(target){
 target = dbMenu.getTarget(target, 'li');
 if(!target) return;
 }else{
 return;
 }

 if(target.className.search(/bhoverb/) == -1){
 target.className += ' hover';
 }else{
 target.className = target.className.replace(/hover/g, '');
 }
 },

 click: function(e){
 if(window.event){
 window.event.cancelBubble = true;
 }
 if(e && e.stopPropagation){
 e.stopPropagation();
 }
 var target = (window.event)? window.event.srcElement : (e)? e.target : null;

 if(target){
 target = dbMenu.getTarget(target, 'li');
 if(!target) return;
 }else{
 return;
 }

 if(target.className.search(/bclickb/) == -1){
 dbMenu.removeClick();
 target.className += ' click';
 }else{
 target.className = target.className.replace(/click/g, '');
 }
 },

 removeClick: function(){
 var uls = document.getElementsByTagName('ul');
 for(var i = 0; i < uls.length; i++){
 if(uls[i].className.search(/bdbMenub/) == -1)
 continue;
 var menu = uls[i];
 for(var j = 0; j < menu.childNodes.length; j++){
 var node = menu.childNodes[j];
 if(node.nodeName.toLowerCase() == 'li'){
 node.className = node.className.replace(/click/g, '');
 }
 }
 } 
 },


 nav: function(e){
 if(window.event){
 window.event.cancelBubble = true;
 }
 if(e && e.stopPropagation){
 e.stopPropagation();
 }
 var target = (window.event)? window.event.srcElement : (e)? e.target : null;

 if(target){
 target = dbMenu.getTarget(target, 'li');
 if(!target) return;
 }else{
 return;
 }

 for(var i = 0; i < target.childNodes.length; i++){
 var node = target.childNodes[i];
 if(node.nodeName.toLowerCase() == 'a'){
 window.location = node.href;
 break;
 }
 }
 },

 getTarget: function(target, elm){
 if(target.nodeName.toLowerCase() != elm && target.nodeName.toLowerCase() != 'body'){
 return dbMenu.getTarget(target.parentNode, elm);
 }else if(target.nodeName.toLowerCase() == 'body'){
 return null;
 }else{
 return target;
 }
 },

 styleSubMenus: function(menu){
 var uls = document.getElementsByTagName('ul');
 for(var i = 0; i < uls.length; i++){
 if(uls[i].className.search(/bdbMenub/) == -1)
 continue;
 var menu = uls[i];
 for(var j = 0; j < menu.childNodes.length; j++){
 var node = menu.childNodes[j];
 if(node.nodeName.toLowerCase() == 'li'){
 for(var l = 0; l < node.childNodes.length; l++){
 var nd = node.childNodes[l];
 if(nd.nodeName.toLowerCase() == 'ul'){
 node.className += " subMenu";
 break;
 }
 }
 }
 }

 }
 }
}

function addEvent(elm, evType, fn, useCapture){ //cross-browser event handling for IE5+, NS6+, and Mozilla/Gecko By Scott Andrew
	if(elm.addEventListener){
		elm.addEventListener(evType, fn, useCapture);
		return true;
	}else if(elm.attachEvent){
		var r = elm.attachEvent('on' + evType, fn);
		return r;
}else{
		elm['on' + evType] = fn;
	}
}

addEvent(window, 'load', dbMenu.init, false);

Link to comment
Share on other sites
Guest
This topic is now closed to further replies.
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept