Как создать навигационное меню на странице сайта?

Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров.

Навигационное меню можно отнести к важнейшим элементам сайта. Оно, как правило, располагается на самом видном и удобном месте страницы, вверху, если меню горизонтальное и соответственно, слева-справа, если вертикальное. Это настоящий путеводитель по вашему ресурсу. Человек, пришедший на Ваш сайт в первую очередь обращается к меню навигации, поэтому его внешний вид имеет очень важное значение. Существует великое множество видов и типов меню, все рассмотреть практически невозможно, поэтому обратимся к нескольким видам. Я попытался представить варианты меню навигации с помощью такого же элемента, о котором идёт речь в названии страницы. Посмотрите некоторые из них:

Вертикальное меню

1. Вертикальное
раскрывающееся меню
2. Вертикальное меню во всплывающем окне
3. Вертикальное меню с использованием анимации
4. Вертикальное меню с закруглением правого края
5. Вертикальное меню с эффектом передвигающейся стрелки
6. Классическое вертикальное меню

Горизонтальное меню

1. Простое горизонтальное навигационное меню
2. Горизонтальное меню на CSS с применением изображений
3. Горизонтальное меню Раздвижные Двери
4. Горизонтальное меню с эффектами тени
5. Горизонтальное меню с внутренней тенью
6. Горизонтальное многоуровневое меню на CSS и jQuery

Другие виды меню

1. Привлекательное
флеш-меню
2. Меню с открытием и закрытием поясняющего текста при клике мышью
3. Меню вопросов и ответов
4. Горизонтальное меню с бегущей строкой в контейнере
5. Меню, открывающееся на весь экран

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

Пропишем стили между тегами head, или в файле стилей css:

Для выделения текста сделайте щелчок мышью.
Для увеличения окна, «подцепите» мышью правый нижний угол.

.mainDiv
{
  width: 200px;
}
.topItem
{
  width: 200px;
  height: 25px;
  cursor: pointer;
  background: #0D5F12;
  text-decoration: none;
  color: white; 
  font-weight: bold;
  font-family: Arial;
}

.dropMenu
{
  background: #D9D9D9;
  border-top: 1px solid #467BF2;
  border-left: 1px solid #92B1F8;
  border-right: 1px solid #92B1F8;
  border-bottom: 1px solid #92B1F8;
}

.subMenu
{
   display: none;
}
.subItem
{
   padding-left: 5px;
   cursor: pointer;
   font-weight: bold;
   text-decoration: none;
   color: black;
}

.subItem a
{
   text-decoration: none;
   color: black;
}

.subItemOver
{
   cursor: pointer;
   color: blue;
   text-decoration: underline;
   font-weight: bold;
   padding-left: 5px;
}

.subItemOver  a
{
   color: blue;
}


.drop
{
   border-left: 1px solid black;
   border-right: 1px solid black;	
}

Скопируем и вставим на страницу своего сайта или в отдельно созданный документ HTML между тегами head следующий скрипт:

Для выделения текста сделайте щелчок мышью.
Для увеличения окна, «подцепите» мышью правый нижний угол.

<script type="text/javascript">
// Slide Down Menu Bar 
// Uncle Jims Web Designs 
// www.jdstiles.com 

var TIMER_SLIDE = null;
var OBJ_SLIDE;
var OBJ_VIEW;
var PIX_SLIDE = 10; //this is the amount of slide/DELAY_SLIDE
var NEW_PIX_VAL;
var DELAY_SLIDE = 30; //this is the time between each call to slide
var DIV_HEIGHT = 22; //value irrelevant
var SUB_MENU_NUM =0;
var RE_INIT_OBJ = null;
var bMenu = document.getElementById("curMenu");
var MainDiv,SubDiv

document.write('<div id="tempcontainer" class="mainDiv" style="visibility: hidden; position: absolute;"></div>')

function Init(objDiv)
{
    if (TIMER_SLIDE == null)
    {
        SUB_MENU_NUM = 0;
        MainDiv = objDiv.parentNode;
        SubDiv =  MainDiv.getElementsByTagName("DIV").item(0);
        SubDiv.onclick = SetSlide;
        
        OBJ_SLIDE = MainDiv.getElementsByTagName("DIV").item(1)
        OBJ_VIEW = OBJ_SLIDE.getElementsByTagName("DIV").item(0);

				document.getElementById("tempcontainer").innerHTML=MainDiv.getElementsByTagName("DIV").item(2).innerHTML 
				DIV_HEIGHT=document.getElementById("tempcontainer").offsetHeight 
        
        for (i=0;i<OBJ_VIEW.childNodes.length;i++)
        {
            if (OBJ_VIEW.childNodes.item(i).tagName == "SPAN")
            {
                SUB_MENU_NUM ++;
                OBJ_VIEW.childNodes.item(i).onmouseover= ChangeStyle;
                OBJ_VIEW.childNodes.item(i).onmouseout= ChangeStyle;
            }
        }   
        
              NEW_PIX_VAL = parseInt(MainDiv.getAttribute("state")); 
    }

}
function SetSlide()
{   
			if (window.TIMER_SLIDE) clearInterval(TIMER_SLIDE) 
      if (TIMER_SLIDE == null && this.parentNode == MainDiv)
            TIMER_SLIDE = setInterval('RunSlide()', DELAY_SLIDE);
      else
      {
          RE_INIT_OBJ = this;
          setTimeout('ReInit()', 200);
      }
}

function ReInit(obj)
{
    Init(RE_INIT_OBJ);
    TIMER_SLIDE = setInterval('RunSlide()', DELAY_SLIDE);
    RE_INIT_OBJ = null;
}

function RunSlide()
{

    if (OBJ_VIEW.getAttribute("state") == 0)
    {

        NEW_PIX_VAL += PIX_SLIDE;
        OBJ_SLIDE.style.height = NEW_PIX_VAL;

        if (NEW_PIX_VAL >= DIV_HEIGHT) 
        {
            clearInterval(TIMER_SLIDE);
            TIMER_SLIDE = null;
            OBJ_VIEW.style.display = 'inline';
            OBJ_VIEW.setAttribute("state","1")
            MainDiv.setAttribute("state",NEW_PIX_VAL);
        }
    } else
    {
        OBJ_VIEW.style.display = 'none';
        NEW_PIX_VAL -= PIX_SLIDE;
        if(NEW_PIX_VAL > 0)OBJ_SLIDE.style.height = NEW_PIX_VAL;
        if (NEW_PIX_VAL <= 0)
        {
            NEW_PIX_VAL = 0;
            OBJ_SLIDE.style.height = NEW_PIX_VAL
            clearInterval(TIMER_SLIDE);
            TIMER_SLIDE = null;
            OBJ_VIEW.setAttribute("state","0")
            MainDiv.setAttribute("state",NEW_PIX_VAL);
        }
    }
}

function ChangeStyle()
{
    if (this.className == this.getAttribute("classOut"))
        this.className = this.getAttribute("classOver");
    else
        this.className = this.getAttribute("classOut");
}
</script>

А этот код меню разместим в body. Здесь необходимо проставить свои ссылки, а так же их названия. Можно увеличить количество верхних вкладок или ссылок путём простого действия - «клонирования» любой вкладки.

Для выделения текста сделайте щелчок мышью.
Для увеличения окна, «подцепите» мышью правый нижний угол.

<table align="center">
<tr>
<td width="200" valign="top">

<!--Меню_1-->
<div class="mainDiv" state="0">
<div class="topItem" classOut="topItem" classOver="topItemOver" onMouseOver="Init(this)" >название_1</div>        
<div class="dropMenu">
<div class="subMenu" state="0">

<span class="subItem" classOut="subItem" classOver="subItemOver">
<a href="http://www.yandex.ru">название ссылки_1</a></span><BR>

<span class="subItem" classOut="subItem" classOver="subItemOver">
<a href="http://www.yandex.ru">название ссылки_2</a></span><BR>

<span class="subItem" classOut="subItem" classOver="subItemOver">
<a href="http://www.yandex.ru">название ссылки_3</a></span><BR>

<span class="subItem" classOut="subItem" classOver="subItemOver">
<a href="http://www.yandex.ru">название ссылки_4</a></span><BR>

<span class="subItem" classOut="subItem" classOver="subItemOver">
<a href="http://www.yandex.ru">название ссылки_5</a></span><BR>

<span class="subItem" classOut="subItem" classOver="subItemOver">
<a href="http://www.yandex.ru">название ссылки_6</a></span>

</div></div></div>
<!--/Меню_1-->


</td>
<td width="200" valign="top">


<!--Меню_2-->
<div class="mainDiv" state="0">
<div class="topItem" classOut="topItem" classOver="topItemOver" onMouseOver="Init(this)" >название_2</div>        
<div class="dropMenu">
<div class="subMenu" state="0">

<span class="subItem" classOut="subItem" classOver="subItemOver">
<a href="http://www.yandex.ru">название ссылки_1</a></span><BR>

<span class="subItem" classOut="subItem" classOver="subItemOver">
<a href="http://www.yandex.ru">название ссылки_2</a></span><BR>

<span class="subItem" classOut="subItem" classOver="subItemOver">
<a href="http://www.yandex.ru">название ссылки_3</a></span><BR>

<span class="subItem" classOut="subItem" classOver="subItemOver">
<a href="http://www.yandex.ru">название ссылки_4</a></span><BR>

<span class="subItem" classOut="subItem" classOver="subItemOver">
<a href="http://www.yandex.ru">название ссылки_5</a></span><BR>

<span class="subItem" classOut="subItem" classOver="subItemOver">
<a href="http://www.yandex.ru">название ссылки_6</a></span>

</div></div></div>
<!--/Меню_2-->



</td>
<td width="200" valign="top">



<!--Меню_3-->
<div class="mainDiv" state="0">
<div class="topItem" classOut="topItem" classOver="topItemOver" onMouseOver="Init(this)">название_3</div>        
<div class="dropMenu">
<div class="subMenu" state="0">

<span class="subItem" classOut="subItem" classOver="subItemOver">
<a href="http://www.yandex.ru">название ссылки_1</a></span><BR>

<span class="subItem" classOut="subItem" classOver="subItemOver">
<a href="http://www.yandex.ru">название ссылки_2</a></span><BR>

<span class="subItem" classOut="subItem" classOver="subItemOver">
<a href="http://www.yandex.ru">название ссылки_3</a></span><BR>

<span class="subItem" classOut="subItem" classOver="subItemOver">
<a href="http://www.yandex.ru">название ссылки_4</a></span><BR>

<span class="subItem" classOut="subItem" classOver="subItemOver">
<a href="http://www.yandex.ru">название ссылки_5</a></span><BR>

<span class="subItem" classOut="subItem" classOver="subItemOver">
<a href="http://www.yandex.ru">название ссылки_6</a></span>

</div></div></div>
<!--/Меню_3-->

</td></tr></table>

Меню на первый взгляд простенькое, но код у него достаточно объёмный. Действия по установке не представляют особых трудностей, так как Вам нужно всего лишь ввести названия своих ссылок. Удачи! L.M.

Ваше мнение по материалу, изложенному на сайте

Служба поддержки