Навигационное меню

Для удобства навигации по сайту добавим в нашу тему многоуровневое навигационное меню.

В файле theme.html cразу после строки

 <{includeq file="$theme_name/tpl/header.html"}>

добавляем

  <{includeq file="$theme_name/tpl/navmenu.html"}>

 

Создаем файл  tpl/navmenu.html

 

tpl/navmenu.html 

<div id="navmenu">
<ul id="nav" class="green">
  <li><a href="#">Главная</a></li>
  <li class="sub"><a href="#">Профиль</a>
    <ul>
      <li><a href="#">Вход</a></li>
      <li><a href="#">Регистрация</a></li>
    </ul>
  </li>
  <li class="sub"><a href="#">Форум</a>
    <ul>
      <li><a href="#">Раздел форума 1</a></li>
      <li><a href="#">Раздел форума 2</a></li>
      <li><a href="#">Раздел форума 3</a></li>
      <li><a href="#">Раздел форума 4</a></li>
      <li><a href="#">Раздел форума 5</a></li>
    </ul>
  </li>
  <li class="sub"><a href="#">Новости</a>
    <ul>
      <li><a href="#">Новости 1</a>
	    <ul class="sub2">
          <li><a href="#">подраздел 1</a>
            <ul>
              <li><a href="#">третий 1</a></li>
              <li><a href="#">третий 2</a></li>
            </ul>
          </li>
          <li><a href="#">подраздел 2</a></li>
          <li><a href="#">подраздел 3</a></li>
        </ul>
	  </li>
      <li><a href="#">Новости 2</a></li>
      <li><a href="#">Новости 3</a></li>
      <li><a href="#">Новости 4</a></li>
      <li><a href="#">Новости 5</a></li>
    </ul>
  </li>
  <li class="sub"><a href="#">Скачать</a>
    <ul>
      <li><a href="#">Скачать 1</a></li>
      <li><a href="#">Скачать 2</a></li>
      <li><a href="#">Скачать 3</a></li>
      <li><a href="#">Скачать 4</a></li>
      <li><a href="#">Скачать 5</a></li>
    </ul>
  </li>
  <li><a href="#">Видео</a></li>
  <li><a href="#">Ссылки</a></li>
  <li><a href="#">Инструкции</a></li>
  <li><a href="#">О нас</a></li>
  <li><a href="#">Контакты</a></li>
</ul>
</div>

 

Добавляем стили

css/navmenu.css

ol,ul{list-style:none}
#navmenu {
    background: none repeat scroll 0 0 #888888;
}
#nav {
    color: #FFFFFF;
    display: block;
    height: 36px;
    width: 1024px;
    margin: 0 auto;
}
#nav li { float: left; }
#nav li:hover { position: relative }
#nav li a {
    color: #FFFFFF;
    display: block;
    font-size: 12px;
    font-weight: bold;
    padding: 10px;
    text-decoration: none;
}
#nav li a:hover {
    background: #FFFFFF;
    color: #DB0C90;
}        
#nav li:hover ul {
     display:block; 
     position:absolute; 
}
#nav li ul {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #000000;
    display: none;
    padding: 10px 5px;
    width: 140px;
}
#nav li ul li a, #nav li ul li a:hover {
    background: none repeat scroll 0 0 transparent;
    color: #555555;
    font-size: 0.95em;
    font-weight: normal;
    width: 120px;
}
#nav li ul li a:hover { 
    background: #EEEEEE;
	color: #DB0C90;
	text-decoration: none; 
}
#nav li ul li .sub2 {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #555555;
    display: none;
    margin: -30px 0 0 130px;
    padding: 10px 5px;
}
#nav li ul li:hover > ul{
    display: block;
}	
#nav li ul .sub2 li ul{
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #555555;
    display: none;
    padding: 10px 5px;
	margin:-30px 0 0 130px;
	}
#nav li ul li ul li:hover > ul{
    display: block;
}

 

Подключаем стили

@import url(navmenu.css);

 

Многоуровневое навигационное меню

многоуровневое навигационное меню

<< Меню >>  
Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити