Dobrovoi Master
сделано с душой

В состоянии постоянного подключения...
Главная » Уроки » Создаем меню для сайта

Создаем меню для сайта

Создаем меню для сайта

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

Данный блок с интересным эффектом при наведении курсора мыши на элемент меню, может пригодится на Вашем сайте.

Как всегда посмотрите как будет выглядеть ваше меню:

Итак , давайте теперь все по порядку.

Шаг 1.

Между тегами необходимо вставить код скрипта:
 

<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>

Шаг 2.

Создайте основу навигации и поместите этот код в то место страницы, где Вы хотели бы видеть своё меню. Фарш кода таков:
 

<table WIDTH=202 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<tr>
<td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image29','','images/mn11.jpg',1)"><img src="images/mn1.jpg" name="Image29" width="202" height="27" border="0"/></a></td>
</tr>
<tr>
<td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image30','','images/mn21.jpg',1)"><img src="images/mn2.jpg" name="Image30" width="202" height="22" border="0"/></a></td>
</tr>
<tr>
<td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image31','','images/mn31.jpg',1)"><img src="images/mn3.jpg" name="Image31" width="202" height="22" border="0"/></a></td>
</tr>
<tr>
<td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image32','','images/mn41.jpg',1)"><img src="images/mn4.jpg" name="Image32" width="202" height="22" border="0"/></a></td>
</tr>
<tr>
<td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image33','','images/mn51.jpg',1)"><img src="images/mn5.jpg" name="Image33" width="202" height="22" border="0"/></a></td>
</tr>
<tr>
<td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image34','','images/mn61.jpg',1)"><img src="images/mn6.jpg" name="Image34" width="202" height="23" border="0"/></a></td>
</tr>
</table>

 
В архиве с исходниками находятся файлы изображений,исполненные в виде шаблонов пунктов меню, Вам остается только прописать свои названия пунктов.Для наглядности заполнил лишь первый пункт блока. Так же Вы можете добавлять большее количество пунктов,только не забывайте создавать дополнительные изображения и присваивать им соответствующие номера в названии,что бы небыло путаницы (mn7.jpg , mn71.jpg и так далее ...).

На этом процесс создания меню закончен, проверяйте результат во всех браузерах, всё должно работать как надо.

Всем удачи!

С Уважением, Андрей .

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »

Рейтинг@Mail.ru