меню на JS

Agronom · Непрочитанное сообщение **Agronom** » 2007-06-05 10:34:26

Меню на JS инклудится на каждую страницу. Как мне сказать, чтобы на соответствующих страницах пункты меню были "подсвечены"? Делал в Дриме

Хостинг HostFood.ru · **Хостинг HostFood.ru**

Тарифы на хостинг в России, от 12 рублей: https://www.host-food.ru/tariffs/hosting/
Тарифы на виртуальные сервера (VPS/VDS/KVM) в РФ, от 189 руб.: https://www.host-food.ru/tariffs/virtualny-server-vps/
Выделенные сервера, Россия, Москва, от 2000 рублей (HP Proliant G5, Intel Xeon E5430 (2.66GHz, Quad-Core, 12Mb), 8Gb RAM, 2x300Gb SAS HDD, P400i, 512Mb, BBU):
https://www.host-food.ru/tariffs/vydelennyi-server-ds/
Недорогие домены в популярных зонах: https://www.host-food.ru/domains/

lexy · Непрочитанное сообщение **lexy** » 2007-06-05 10:51:17

ну примерно так

Код: Выделить всё

//menu.js.php
<div class="<?=menu_item_check($n)?'common_menu_item':'hilited_menu_item'?>">Menu Item</div>

где menu_item_check() - какой-то код, который проверяет, нужно ли выделять этот пункт. Точнее не сказать, ты ж кода не дал....

зы.... если делал стандартными дримовскими менюшками - заколебешься в код вписывать, могу дать красивую менюшку - прозрачную в плане кода, гибкую в тюнинге и красивую. Образец тута: _http://www.swissre.spb.ru/index.php

Agronom · Непрочитанное сообщение **Agronom** » 2007-06-05 12:22:57

Вот код:

Код: Выделить всё

<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_nbGroup(event, grpName) { //v6.0
  var i,img,nbArr,args=MM_nbGroup.arguments;
  if (event == "init" && args.length > 2) {
    if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
      img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
      if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
      nbArr[nbArr.length] = img;
      for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
        if (!img.MM_up) img.MM_up = img.src;
        img.src = img.MM_dn = args[i+1];
        nbArr[nbArr.length] = img;
    } }
  } else if (event == "over") {
    document.MM_nbOver = nbArr = new Array();
    for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
      if (!img.MM_up) img.MM_up = img.src;
      img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
      nbArr[nbArr.length] = img;
    }
  } else if (event == "out" ) {
    for (i=0; i < document.MM_nbOver.length; i++) {
      img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
  } else if (event == "down") {
    nbArr = document[grpName];
    if (nbArr)
      for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
    document[grpName] = nbArr = new Array();
    for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
      if (!img.MM_up) img.MM_up = img.src;
      img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
      nbArr[nbArr.length] = img;
  } }
}
//-->
</script>

........
........
........

<body onload="MM_preloadImages('./images/spo_press.gif','./images/spo_over.gif','./images/commut_press.gif','./images/commut_over.gif','./images/print_press.gif','./images/print_over.gif','./images/scan_press.gif','./images/scan_over.gif','./images/ibp_press.gif','./images/ibp_over.gif','./images/util_press.gif','./images/util_over.gif')">

м один из пунктов меню:

<td><a href="./spo.php" target="_top" onclick="MM_nbGroup('down','group1','spo','./images/spo_press.gif',1)" onmouseover="MM_nbGroup('over','spo','./images/spo_over.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="./images/spo_stat.gif" alt="СПО" name="spo" width="170" height="43" border="0" id="spo" onload="" /></a></td>

lexy · Непрочитанное сообщение **lexy** » 2007-06-05 13:00:39

я так и думал!

дримовская менюха!

1.но тем не менее - если определяешь на строне сервера, какой пункт меню подсвечивать - то делаешь menu.js.php в котром отмечаешь нужные пункты меню при помощи PHP if(){}else{}

2.если на стороне клиента, то каждый элемент меню снабжаешь атрибутом id="уникальное_имя_в_контексте_документа" и потом через JS document.getElementById выбираешь нужный тебе элемент и меняешь его оформление

Я больше люблю первый вариант - надежнее, хотя от дримовских стандартных менюх отказался, всеж рекомендую вот эту:

Код: Выделить всё

это в <head> документа
<style type="text/css" media="screen">
	@import url("menu.css");
</style>
<script type="text/javascript" src="/menu.js">
/***********************************************
* Chrome CSS Drop Down Menu- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>

это там, где хочешь менюху (внутри <body>):
как пример, деру из рабочего кода, контейнер меню с id="chromemenu"
элементы выпадающего с rel=id_менюхи (см. ниже)

<table width="100%" border="0" cellspacing="0" cellpadding="2" id="chromemenu">
          <tr>
            <td width="4" valign="top"><img src="img/menu-divider.jpg" width="4" height="38" border="0" /></td>
            <td><a href="#" class="topmenu" rel="topmenu_about">О Компании</a></td>
            <td width="4" valign="top"><img src="img/menu-divider.jpg" width="4" height="38" border="0" /></td>
            <td><a href="#" class="topmenu" rel="topmenu_projects">Проекты</a></td>
            <td width="4" valign="top"><img src="img/menu-divider.jpg" width="4" height="38" border="0" /></td>
            <td><a href="#" class="topmenu" rel="topmenu_news">Новости</a></td>
            <td width="4" valign="top"><img src="img/menu-divider.jpg" width="4" height="38" border="0" /></td>
            <td><a href="#" class="topmenu" rel="topmenu_dialog"> Диалог</a></td>
            <td width="4" valign="top"><img src="img/menu-divider.jpg" width="4" height="38" border="0" /></td>
            <td><a href="contact.htm" class="topmenu"> Контакты</a></td>
            <td width="4" valign="top"><img src="img/menu-divider.jpg" width="4" height="38" border="0" /></td>
          </tr>
        </table>


далее в любом месте страницы внутри <body>, собсно сами выпадающие менюхи (контейнеры <div> с уникальными id (привел не все, так, для ознакомления) ), вот с этими менюхами средствами пхп можешь воротить все, что хочешь

<div class="dropmenudiv" id="topmenu_about">
	<a href="/index.php">Общая информация</a>
	<a href="http://www.swissrei.com/" target="_blank">Холдинг</a>
	<a href="/feat.htm">Возможности</a>
	<a href="/pr.htm">PR</a></div>
<div class="dropmenudiv" id="topmenu_projects">
	<div class="menupart"><a href="/projects/moscow.htm"> Москва </a></div> 
	<a href="/projects/moscow.htm#place" class="topmenulevel2" > Местоположение </a> 
	<a href="/projects/moscow_tech.htm" class="topmenulevel2"> Технологии </a> 
	<a href="/projects/moscow.htm#podr" class="topmenulevel2"> Подрядчики </a> 
	<a href="/projects/moscow.htm#cust" class="topmenulevel2"> Заказчики </a> 

	<div class="menupart"><a href="/projects/petrodvorets.htm"> Петродворец </a></div> 
	<a href="/projects/petrodvorets.htm" class="topmenulevel2"> Историческая&nbsp;справка </a> 
	<a href="/projects/petrodvorets_tech.htm" class="topmenulevel2"> Технологии </a> 
	<a href="/projects/petrodvorets_infra.htm" class="topmenulevel2"> Инфраструктура </a> 
	<a href="/projects/petrodvorets_mesto.htm" class="topmenulevel2"> Местоположение </a>
	<a href="/projects/petrodvorets_plan.htm" class="topmenulevel2"> План&nbsp;производства&nbsp;работ </a> 
  <a href="/projects/petrodvorets_bank.htm" class="topmenulevel2"> Банкинг </a> 
  <a href="/projects/petrodvorets_podr.htm" class="topmenulevel2"> Подрядчики </a>
</div>
<div class="dropmenudiv" id="topmenu_news">
		<a href="news.php">Текущий месяц</a>
		<a href="news.php">Архив</a></div>
<div class="dropmenudiv" id="topmenu_dialog">
	<a href="question.php">Задать вопрос</a>  
	<a href="missing.html">F.A.Q.</a></div>
  
</div>

файлик menu.js, здесь в принципе править ничего не надо, просто копи-пасте-сэйв

Код: Выделить всё

//Chrome Drop Down Menu- Author: Dynamic Drive (http://www.dynamicdrive.com)
//Last updated: June 14th, 06'

var cssdropdown={
disappeardelay: 250, //set delay in miliseconds before menu disappears onmouseout
disablemenuclick: true, //when user clicks on a menu item with a drop down menu, disable menu item's link?
enableswipe: 1, //enable swipe effect? 1 for yes, 0 for no

//No need to edit beyond here////////////////////////
dropmenuobj: null, ie: document.all, firefox: document.getElementById&&!document.all, swipetimer: undefined, bottomclip:0,

getposOffset:function(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
},

swipeeffect:function(){
if (this.bottomclip<parseInt(this.dropmenuobj.offsetHeight)){
this.bottomclip+=10+(this.bottomclip/10) //unclip drop down menu visibility gradually
this.dropmenuobj.style.clip="rect(0 auto "+this.bottomclip+"px 0)"
}
else
return
this.swipetimer=setTimeout("cssdropdown.swipeeffect()", 10)
},

showhide:function(obj, e){
if (this.ie || this.firefox)
this.dropmenuobj.style.left=this.dropmenuobj.style.top="-500px"
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover"){
if (this.enableswipe==1){
if (typeof this.swipetimer!="undefined")
clearTimeout(this.swipetimer)
obj.clip="rect(0 auto 0 0)" //hide menu via clipping
this.bottomclip=0
this.swipeeffect()
}
obj.visibility="visible"
}
else if (e.type=="click")
obj.visibility="hidden"
},

iecompattest:function(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
},

clearbrowseredge:function(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=this.ie && !window.opera? this.iecompattest().scrollLeft+this.iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
this.dropmenuobj.contentmeasure=this.dropmenuobj.offsetWidth
if (windowedge-this.dropmenuobj.x < this.dropmenuobj.contentmeasure)  //move menu to the left?
edgeoffset=this.dropmenuobj.contentmeasure-obj.offsetWidth
}
else{
var topedge=this.ie && !window.opera? this.iecompattest().scrollTop : window.pageYOffset
var windowedge=this.ie && !window.opera? this.iecompattest().scrollTop+this.iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
this.dropmenuobj.contentmeasure=this.dropmenuobj.offsetHeight
if (windowedge-this.dropmenuobj.y < this.dropmenuobj.contentmeasure){ //move up?
edgeoffset=this.dropmenuobj.contentmeasure+obj.offsetHeight
if ((this.dropmenuobj.y-topedge)<this.dropmenuobj.contentmeasure) //up no good either?
edgeoffset=this.dropmenuobj.y+obj.offsetHeight-topedge
}
}
return edgeoffset
},

dropit:function(obj, e, dropmenuID){
if (this.dropmenuobj!=null) //hide previous menu
this.dropmenuobj.style.visibility="hidden" //hide menu
this.clearhidemenu()
if (this.ie||this.firefox){
obj.onmouseout=function(){cssdropdown.delayhidemenu()}
obj.onclick=function(){return !cssdropdown.disablemenuclick} //disable main menu item link onclick?
this.dropmenuobj=document.getElementById(dropmenuID)
this.dropmenuobj.onmouseover=function(){cssdropdown.clearhidemenu()}
this.dropmenuobj.onmouseout=function(e){cssdropdown.dynamichide(e)}
this.dropmenuobj.onclick=function(){cssdropdown.delayhidemenu()}
this.showhide(this.dropmenuobj.style, e)
this.dropmenuobj.x=this.getposOffset(obj, "left")
this.dropmenuobj.y=this.getposOffset(obj, "top")
this.dropmenuobj.style.left=this.dropmenuobj.x-this.clearbrowseredge(obj, "rightedge")+"px"
this.dropmenuobj.style.top=this.dropmenuobj.y-this.clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+1+"px"
}
},

contains_firefox:function(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
},

dynamichide:function(e){
var evtobj=window.event? window.event : e
if (this.ie&&!this.dropmenuobj.contains(evtobj.toElement))
this.delayhidemenu()
else if (this.firefox&&e.currentTarget!= evtobj.relatedTarget&& !this.contains_firefox(evtobj.currentTarget, evtobj.relatedTarget))
this.delayhidemenu()
},

delayhidemenu:function(){
this.delayhide=setTimeout("cssdropdown.dropmenuobj.style.visibility='hidden'",this.disappeardelay) //hide menu
},

clearhidemenu:function(){
if (this.delayhide!="undefined")
clearTimeout(this.delayhide)
},

startchrome:function(){
for (var ids=0; ids<arguments.length; ids++){
var menuitems=document.getElementById(arguments[ids]).getElementsByTagName("a")
for (var i=0; i<menuitems.length; i++){
if (menuitems[i].getAttribute("rel")){
var relvalue=menuitems[i].getAttribute("rel")
menuitems[i].onmouseover=function(e){
var event=typeof e!="undefined"? e : window.event
cssdropdown.dropit(this,event,this.getAttribute("rel"))
}
}
}
}
}

}

файлик menu.css, здесь наводятся все красивости и оформления менюх

Код: Выделить всё

.topmenu {
	font-family: "Times New Roman", Times, serif;
	font-size: 16px;
	font-weight: bold;
	color: #FFFFFF;
	text-decoration:none;
	display: block;
	text-align: center;
}
table#chromemenu img{display:inline;}
a.topmenu:visited{
	color: #FFFFFF;
	text-decoration: none;
}
/*filter: Shadow(Color=#FFFF00, Direction=270);*/
a.topmenu:hover{
	color: #FFFFCC;
}


.chromestyle{
width: 99%;
font-weight: bold;
}

.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}

.chromestyle ul{
border: 1px solid #BBB;
width: 100%;
background: url(chromebg.gif) center center repeat-x; /*THEME CHANGE HERE*/
padding: 4px 0;
margin: 0;
text-align: center; /*set value to "left", "center", or "right"*/
}

.chromestyle ul li{
display: inline;
}

.chromestyle ul li a{
color: #494949;
padding: 4px 7px;
margin: 0;
text-decoration: none;
border-right: 1px solid #DADADA;
}

.chromestyle ul li a:hover{
background: url(chromebg-over.gif) center center repeat-x; /*THEME CHANGE HERE*/
}

.chromestyle ul li a[rel]:after{ /*HTML to indicate drop down link*/
content: " v";
/*content: " " url(downimage.gif); /*uncomment this line to use an image instead*/
}


/* ######### Style for Drop Down Menu ######### */

.dropmenudiv{
	position:absolute;
	top: 0; /*THEME CHANGE HERE*/
	border-bottom-width: 0;
	line-height:18px;
	z-index:100;
	background-color: #6F839B;
	width: 200px;
	visibility: hidden;


filter: progid:DXImageTransform.Microsoft.Shadow(color=#CACACA,direction=135,strength=4); /*Add Shadow in IE. Remove if desired*/
	font-family: "Times New Roman", Times, serif;
	font-size: 16px;
	font-style: normal;
	font-weight: bold;
	font-variant: normal;
	color: #FFFFff;
	border-width: 1px 1px 0px;
	border-style: solid;
	border-color: #BBB;
	padding: 4px;
	text-align: left;
}


.dropmenudiv a{
	width: auto;
	display: block;
	text-indent: 3px; /*THEME CHANGE HERE*/
	padding: 2px 0;
	text-decoration: none;
	font-weight: bold;
	color: #000000;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #999999;
}

* html .dropmenudiv a{ /*IE only hack*/
	width: 100%;
}

.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
	color: #FFFFFF;
	background-color: #52637B;
}

.dropmenudiv a:visited{ /*THEME CHANGE HERE*/
	text-decoration: none;
}

.menupart{ /*by lexy*/
	border-bottom: 2px solid #666666;
}
.topmenulevel2{
	padding-left:16px !important;
}

горазно легче и гибче дримвюверовского монстра

Agronom · Непрочитанное сообщение **Agronom** » 2007-06-05 14:23:06

Спасибо, попробую!

forum.lissyara.su

меню на JS

меню на JS

Услуги хостинговой компании Host-Food.ru