Сайтостроительство (8)

PHP-кодинг (25)

Веб-дизайн (9)

DHTML/JavaScript (8)

Подкастинг (1)

Безопасность в PHP (3)

Секретный раздел

Карта блога

Регистрация пользователей на PHP+MySQL

Скрипт гостевой книги с красивым дизайном

Галерея на jQuery

Простая система регистрации пользователей на сессиях

Галерея на php+jquery

Форма обратной связи с защитой типа капча

Шаблоны запросов и placeholders

Быстрое перенаправление средствами php

Flash плеер для вашего сайта

Сортировка столбцов в таблице на php+mysql

Регистрация пользователей на PHP+MySQL

Каскадные листы стилей

Быстрая смена скина сайта на php

Ссылки для начинающих веб-разработчиков

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

За весь период

За 2010-11

За 2009-06

За 2009-05

За 2009-04

За 2009-03

За 2009-02

За 2008-08

Бегун контекстная реклама

Ruseller видеоуроки

Letitbit файлообменник

Tak.Ru $$$ вебмастеру

WMmail почтовые рассылки

WMlink продажа трафика

Sape.Ru продажа ссылок

Главная » DHTML/JavaScript

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

Это меню будет полезно, если у вас на сайте нужно сэкономить место и при этом сделать доступным вывод множества разделов, которые можно увидеть щелкнув по ссылке-закладке в меню. Демо версию примера можете посмотреть тут. Скачать все исходники здесь.

Создайте файл map.js. JavaScript код этого меню выглядит следующим образом:


function toggle(objId, togId)
{
      var o = document.getElementById(objId), 
      t = document.getElementById(togId);
      if (o.style.display == 'none') 
      {
          o.style.display = 'block';
          t.innerHTML = '-';
      }
      else
      {
          o.style.display = 'none';
          t.innerHTML = '+';
      }
}

Подключите этот скрипт в вашем документе, заключив его между тэгами head следующий html-код:


<script type="text/javascript" src="map.js"></script>

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


<div id="border">
<span id="rc1-toggle" class="toggle" onclick="toggle('rc1-list', 'rc1-toggle')">+</span>
<b>Школьный музей</b>
<ul id="rc1-list" style="display:none; list-style-type:none">
<li><a href="#">Истории создания и развитие школы</a></li>
<li><a href="#">Педагогические династии</a></li>
<li><a href="#">Выпускники</a></li></ul><br>
</div>

Обратите внимание на значения атрибута id тэга span. Он должен быть разным для каждого пункта меню. Например для второго он будет иметь значение rc2-toggle и соответственно в значении атрибута-обработчика onclick тоже измените значения на ('rc2-list', 'rc2-toggle'). Для остальных пунктов по аналогии.

И в завершении приведу файл стилей. В частности для блока с уникальным идентификатором #border и класса toggle для стиля закладок.


#border {border:solid 1px #000; padding:0px; margin:3px;}
.toggle {padding-left:.3em;padding-right:.3em; border:none;
background:#000; cursor:hand; margin:0px; color:#fff;}
.toggle:hover {background:#fff; color:#000}
.toggle ul {margin:0px; padding:0px;}

Вот и всё. Очень простое и надежное меню для вашего сайта готово! Надеюсь вы найдете достойное приминение этого меню на вашем сайте.

Комментировать

Автор: admin | Добавлена: 10.04.2009 | Просмотров: 9187
Рейтинг: 5 | Голосов: 1

Оцените заметку: 1 2 3 4 5

Последние обновления в категории: DHTML/JavaScript

Комментарии (0)

Комментариев пока нет!

Только авторизованные пользователи могут добавлять комментарии. Зарегистрироваться.

Логин:
Пароль:
 

Регистрация

: Тема:

Заметок в базе: 56
Комментариев: 0
Всего юзеров: 114
Сейчас онлайн: 1