Меню с открытием и закрытием поясняющего текста при клике мышью

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

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


Демо-пример Исходники (23 кб)

Если возникают проблемы при скачивании файлов, например, через браузер, скопируйте ссылку (правая кнопка мыши → копировать адрес ссылки) и скачайте файл через Download Master.



Установка кода меню на страницу сайта

меткаСкачиваем и распаковываем учебный материал.
Открываем папку menu_opening_text.
В ней находятся:
- папка js с файлом ява-скрипта
и два HTML-файла:
- page1.html и page2.html.
Откройте один из HTML-файлов и насладитесь просмотром.

Демо-пример будет работать только при включенном Интернете, так как файл последней версии библиотеки jQuery загружается удаленно с сайта Google API. О подключении библиотеки прочтите здесь.

Для корректной работы меню папка js всегда должна находиться в той же директории, что и файлы HTML.


меткаПодключаем jQuery и скрипт в разделе head:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery01.js"></script>

Если у Вас уже подключена библиотека jQuery последней или более поздней версии (на сегодняшний день - версия 3.1.1) или Вы используете удаленное подключение последней версии с сайта jQuery или Google API, разумеется, вторично подключать её не стоит.


меткаВ body cоздаём обычную таблицу-обрамление. Ширина этой таблицы (в примере 70%) определяет ширину меню:

<table align="center" width="70%" border="0" gellspacing="0" gellpadding="0">
<tr><td>
------------------------------------------
Здесь будет размещен весь код меню 
------------------------------------------
</td></tr></table>

меткаЭтот скрипт вставляем в таблицу в самом её начале:

<script type="text/javascript">
$(document).ready(function(){
      $("#news").slideDown(1500);
});
function read_news(id){
   $("#read_news_"+id).slideToggle();
}
</script>

          Id блока DIV.

          Значение, определяющее скорость открытия основного меню. Чем меньше значение, тем больше скорость.


меткаПишем заголовок меню (например, Новости-начало):

<span style="font: Tahoma;"><font size="5">Новости-начало</font>

меткаВсе пункты меню размещаем в блоке DIV с id="news":

<div id="news" style="display: none;">Все пункты меню</div>

меткаСоздаём таблицы и блок DIV для заголовков и поясняющего текста. Этот участок кода можно клонировать и получать нужное количество заголовков:

<table width="100%" bgcolor="#FFCC99" style="margin-bottom: 10px;font: 13px Verdana;">
</tr><td style="padding: 10px 0 10px 23px;">
<font color="#0e8db7" size="2"><b>01.01.2015</b></font> - <a title="новости" href="javascript:;"
onclick="read_news(0);"><b>Заголовок №1</b></a>
<div id ="read_news_0" style="display: none;"><table width="100%" bgcolor="#FFCC99" style="font: 13px Verdana;">
<tr><td style="padding: 10px 10px 10px 53px;">
<p><br>

--------------------------------------------------------------
Здесь размещается поясняющий текст
или расшифровка вашего заголовка
--------------------------------------------------------------
<br></p>
</td></tr></table>
</div>
</td></tr></table>

          Фоны основной таблицы заголовка и таблицы с текстом пояснений.

          Цвет шрифта даты.

          Дата заголовка.

          Ваше название заголовка.

          Id блока DIV (см. код скрипта в начале таблицы).


метка Если планируется создание обширного меню с большим количеством заголовков и дополнительного текста, можно сделать перенос на другую страницу, как сделано в демо-примере:

меню

Для этого примените следующие шаги:

На первой странице после закрывающего DIV (div id="news") разместите код:

<div align="left">
<span style="background:#e7e7e7;font: Bold 14px Verdana;color:#399e10;padding:3px 8px;">1</span> 
<span><a href="page2.html">2</a></span> 
</div>

На второй странице в том же месте разместите этот код:

<div align="left">
<span><a href="page1.html">1</a></span> 
<span style="background:#e7e7e7;font: Bold 14px Verdana;color:#399e10;padding:3px 8px;">2</span>
</div>

Надеюсь, что объяснил понятно, успехов в реализации всех ваших планов! Ваш Л.М.


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




  © 2015–2024  dynamic-site.olerant.ru  L.M. Служба поддержки Яндекс.Метрика