Меню на css или ....

ksonline · April 23, 2012

Всем привет !Сделал страничку одно меню написал на css , а второе сдела с помощью dreamweaver (dw написал его на javascript). Как лушче оставить как есть или сделать чтобы оба меню были однотипной технологии.И что лучше менюшка сделанная на css или JS?

wildhind · April 23, 2012

показывайте меню. Тогда скажем, лучше его сделать на css или js.

Вообще говоря, традиционно выпадающие менюшки делаются на css. js имеет смысл, когда выпадать должно с визуальным эффектом.

ksonline · April 23, 2012

показывайте меню. Тогда скажем, лучше его сделать на css или js.
Вообще говоря, традиционно выпадающие менюшки делаются на css. js имеет смысл, когда выпадать должно с визуальным эффектом.

Я извиняюсь забыл указать что менюшки, не выпадающие , а использующие смену графических файлов при наведении мыши,

использовал a:hover... как показать не знаю , нужно высылать index файл с граф элементами...

а html страничка вот )..


  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> </title>
<style type="text/css">
 BODY {
    margin : 0; 
 	padding: 0;
 }
.box {
	width:1146px;
	color: #FFF;
	height:960px;
	margin-left: auto;
	margin-right: auto;
	margin-top :0;
	margin-bottom:0;



	}

#banner {
	line-height: 0;
	margin-bottom:0;


	}

#v_menu
{
	height:661px;
	width:270px;
	float:left;
	margin-left:11px;
	padding-top:0;
	padding-top:4px;
	background:white;

}
a img {
    border: none;  
   }

a.link_main
{
 background: url(images/bt_h_main.gif);  
    display: block;  
    width: 111px; 
    height: 48px; 
    }
   a.link_main:hover {
    background: url(images/bt_h_on_main.gif);  
}

a.link_arhierey
{
	background: url(images/bt_h_arhierey.gif);  
    display: block;  
    width: 111px; 
    height: 48px;  
   }
  a.link_arhierey:hover {
    background: url(images/bt_h_on_arhierey.gif);  
}


a.link_eparhiya
{
	background: url(images/bt_h_eparhiya.gif);  
    display: block;  
    width: 94px; 
    height: 48px;  
   }
  a.link_eparhiya:hover {
    background: url(images/bt_h_on_eparhiya.gif);  
}

 a.link_struktura
{
	background: url(images/bt_h_struktura.gif);  
    display: block;  
    width: 175px; 
    height: 48px;  
   }
  a.link_struktura:hover {
    background: url(images/bt_h_on_struktura.gif);  
}

 a.link_katehiz
{
	background: url(images/bt_h_katehiz.gif);  
    display: block;  
    width: 135px; 
    height: 48px;  
   }
  a.link_katehiz:hover {
    background: url(images/bt_h_on_katehiz.gif);  
}

a.link_konferen
{
	background: url(images/bt_h_konferen.gif);  
    display: block;  
    width: 145px; 
    height: 48px;  
   }
  a.link_konferen:hover {
    background: url(images/bt_h_on_konferen.gif);  
}



a.link_konkursy
{
	background: url(images/bt_h_konkursy.gif);  
    display: block;  
    width: 110px; 
    height: 48px;  
   }
  a.link_konkursy:hover {
    background: url(images/bt_h_on_konkursy.gif);  
}

a.link_video
{
	background: url(images/bt_h_video.gif);  
    display: block;  
    width: 80px; 
    height: 48px;  
   }
  a.link_video:hover {
    background: url(images/bt_h_on_video.gif);  
}

 a.link_voprosy
{
	background: url(images/bt_h_voprosy.gif);  
    display: block;  
    width: 145px; 
    height: 48px;  
   }
  a.link_voprosy:hover {
    background: url(images/bt_h_on_voprosy.gif);  
}

#info_area
{
width:auto;
height:659px;
margin-left:277px;
margin-top: 0;
background:white;
padding-top:4px;

}
#slideshow {
	height: 296px;
	width:822px;
	background-color:white;
	border: 4px solid #debd8a;
	margin-left:10px;
    padding-top:7px;
-webkit-box-shadow: 7px 7px 5px  #E0DFE4;
-moz-box-shadow:    7px 7px 5px  #E0DFE4;
box-shadow:         7px 7px 5px  #E0DFE4;
}

#bottom_menu
{
 height:45px;
 background-color:#6799ca;
 margin-left:11px;
 margin-top:8px;
}
#news_area {
width:830px;
height:332px;
margin-left:10px;
margin-top:18px;
background-color:white;


}
#head_news {
	background-color: #8bbbf1;
	height: 48px;
}
#anons_head {
	background-color: #8bbbf1;
	height: 47px;
	width:263px;
	margin-left:4px;
	margin-top:3px;
}

body,td,th {
	font-family: Verdana, Geneva, sans-serif;
	color: #333;
}
.searh_box {
	position: relative;
	z-index: 200;
    margin-top: 12px;
	margin-left:76px;
	padding:0;
}
</style>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
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_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>

<body background="images/background.gif" topmargin="0" onLoad="MM_preloadImages('images/bt_on_prav_obrz.gif','images/bt_on_vosk_ school.gif','images/bt_on_eparh_kurs.gif','images/bt_on_prav_gimn.gif','images/bt_on_osn_kultury.gif','images/bt_on_vyshee_obrz.gif','images/bt_on_shcool_obrz.gif','images/bt_on_do_shcool_obrz.gif')">
<div class="box" id="box">
<div class="banner" id="banner"><img src="images/upper_banner.gif" width="1148" height="188">
<table  border="0" cellspacing="0" cellpadding="0" >
  <tr>
    <td><a href="index.html"   class="link_main"></a> </td>
    <td><a href="arhierey.html" class="link_arhierey"></a> </td>
    <td><a href="/eparhiya.htm" class="link_eparhiya"></a> </td>
    <td><a href="/struktura_otdela.htm" class="link_struktura"></a> </td>
    <td><a href="/katehizacia.htm" class="link_katehiz"></a> </td>
    <td><a href="/konferen.htm" class="link_konferen"></a> </td>
    <td><a href="/konkursy.htm" class="link_konkursy"></a> </td>
    <td><a href="/video.htm" class="link_video"></a> </td>
    <td><img src="images/h_vstavka.gif" width="42" height="48"></td><td><a href="/voprosy.htm" class="link_voprosy"></a> </td>
  </tr>
</table>




</div>


  <div class="v_menu" id="v_menu">

<a href="./prav_obrz.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image13','','images/bt_on_prav_obrz.gif',1)"><img src="images/bt_prav_obrz.gif" alt="Православное образование" name="Image13" width="270" height="55" border="0"></a><a href="vosk_school.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','images/bt_on_vosk_ school.gif',1)"><img src="images/bt_vosk_ school.gif" alt="Воскресные школы" name="Image5" width="270" height="53" border="0"></a><a href="eparh_kursy.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image6','','images/bt_on_eparh_kurs.gif',1)"><img src="images/bt_eparh_kurs.gif" alt="Епархиальные курсы" name="Image6" width="270" height="54" border="0"></a><a href="prav_gimnz.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image7','','images/bt_on_prav_gimn.gif',1)"><img src="images/bt_prav_gimn.gif" alt="Православная гимназия" name="Image7" width="270" height="53" border="0"></a><a href="osn_kultury.html " onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image8','','images/bt_on_osn_kultury.gif',1)"><img src="images/bt_osn_kultury.gif" alt="Основы православной культуры" name="Image8" width="270" height="53" border="0"></a><a href="vyshee_obrz.html " onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image9','','images/bt_on_vyshee_obrz.gif',1)"><img src="images/bt_vyshee_obrz.gif" alt="Высшее образование" name="Image9" width="270" height="51" border="0"></a><a href="scholl_obrz.html " onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image10','','images/bt_on_shcool_obrz.gif',1)"><img src="images/bt_shcool_obrz.gif" alt="Школьное образование" name="Image10" width="270" height="53" border="0"></a><a href="do_school" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image11','','images/bt_on_do_shcool_obrz.gif',1)"><img src="images/bt_do_shcool_obrz.gif" alt="Дошкольное образование" name="Image11" width="270" height="51" border="0"></a><br>


<div class="anons_head " id="anons_head"><img src="images/bt_anonsy.gif" width="91" height="66" alt="Анонсы"></div>


  </div>

  <div class="info_area" id="info_area"> 
    <div class="slideshow" id="slideshow"> </div>
    <div class="news_area" id="news_area">
      <div class="head_news" id="head_news"><img src="images/bt_news.gif" width="104" height="66" alt="Новости">




      </div>
    </div>
  </div>







  <div class="bottom_menu" id="bottom_menu">
   <img src="images/search.gif" width="76" height="52">
  <input type="search" name="search" id="search" class="search"></div> 


</div>





</div>

</div>
</body>
</html>

br3t · April 24, 2012

Для простого hover'а достаточно css

И засуньте все картинки в один спрайт, меняйте только background-position

ksonline · April 24, 2012

Для простого hover'а достаточно css
И засуньте все картинки в один спрайт, меняйте только background-position

Благодарю за ответ! Проблему решил.Тему можно закрыть

rus · April 24, 2012

Благодарю за ответ! Проблему решил.Тему можно закрыть

о майн гад! :facepalmxd:

а была ли она вообще я че-то не понял? :blink:

Sign In

Меню на css или ....

Question

ksonline

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

wildhind

Link to comment

Share on other sites

ksonline

Link to comment

Share on other sites

br3t

Link to comment

Share on other sites

ksonline

Link to comment

Share on other sites

rus

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information