Обо всём мне близком и далёком

Лучше скажи мало,
но хорошо. Козьма Прутков

Как я самостоятельно создавал этот сайт.

Принимаясь за дело, соберись с духом. Козьма Прутков

Страница "Помощь садоводу" с подменю в пунктах вертикального меню

Навигация по сайту

Главные страницы сайта
Таблица стилей в отдельном файле
Страница "О товариществе"
Страница "Законодательство"
Страница "Помощь садоводу"
Страница "Интересные ссылки"
Страница "Главная"

В тексте файла help.html я добавил в вертикальное меню подменю, добавленный текст я выделил жёлтым фоном.

В таблицу стилей my_style.css я вставил следующие классы стилей:
.vertical_menu_item div { margin-bottom: 2px; height: 26px; width: 150px; color: #3f5c97; position: relative; top:-31px; left:200px; display: none;} - блок размещается (позиционируется - атрибут position: relative; ) относительно позиции, в которую Web-браузер поместил бы элемент, если бы он был позиционирован статически (по умолчанию положение элемента определяется его положением в тексте HTML-документа). В моём случае блок сдвигается вверх (атрибут top:-31px;) и вправо (атрибут left:200px;) от той позиции, в которую поместил бы этот блок браузер, если бы я не указал, что позиция относительная. Атрибутом display: none; я указал браузеру, чтобы он не выводил в своё окно этот блок (скрыл его).
.vertical_menu_item:hover div {display: block;} - когда курсор находится на блоке с классом оформления .vertical_menu_item:, то браузер должен отобразить скрытый блок <div>.

Ещё в таблице стилей я задал оформление ссылок в пунктах подменю:
a.submenu:link {background-color: #fff9bd; height: 26px; text-decoration: none; color: #3f5c97; font-weight: bold; border: 1px; border-color: #3f5c97; border-style: solid; border-radius: 9px; display: block;}
a.submenu:hover {bbackground-color: #3f5c97; color: #fff9bd; border: 1px; border-color: #fff9bd; border-style: solid; border-radius: 9px; display: block;}

Текст файла help.html теперь выглядит так:

<html>
    <head>
       <title> Моя третья страница сайта </title>
       <link rel = "stylesheet" type = "text/css" href = "my_style.css">
    </head>
    <body>
    <center>
       <div class = "page">


<div style = "background-color: #557bac; font-style: bold; font-size: 15px; color: #fff; border-bottom-width: 2px; border-bottom-color: #fff9bd; border-bottom-style: solid;">
<img style = "width: 500px; padding-right: 40px; float: left;" src="images/lblSadovoe.jpg" alt="Заголовок сайта">
<p style = "padding-top: 2px;">Ленинградская область, Всеволожский район, Лесколовская волость, район деревни Верхние Осельки, ж/с Пери </p>
</div>


    <div class = "chief_menu">
          <div class = "chief_menu_item"><a class = "chief" href = "main.html">О товариществе</a> </div>
          <div class = "chief_menu_item"><a class = "chief" href = "main.html">Законодательство</a> </div>
          <div class = "chief_menu_item_click"> Помощь садоводу </div>
          <div class = "chief_menu_item"> <a class = "chief" href = "ssilki.html">Интересные ссылки</a> </div>
   </div>


<div class ="aux_menu">
          <a class = "home" href = "index.html"> </a> > Помощь садоводу
          <div>

!!! Здесь будет счётчик !!!
          </div>
     </div>

<div class = "vertical_menu">
          <div class = "vertical_menu_item"> <a class = "vertical" href = ""> Советы агронома </a>
             <div> <a class = "submenu" href = "Файл о цветах"> Цветы</a></div>
             <div> <a class = "submenu" href = "Файл о ягодах"> Ягоды</a></div>
             <div> <a class = "submenu" href = "Файл об овощах"> Овощи</a></div>
          </div>
          <div class = "vertical_menu_item"> <a class = "vertical" href = "1"> Украшение сада </a>
             <div> <a class = "submenu" href = "Файл о прудах"> Пруд</a></div>
          </div>
          <div class = "vertical_menu_item"> <a class = "vertical" href = ""> Шутки садоводов </a>
             <div> <a class = "submenu" href = "Файл c анекдотами"> Анекдоты</a></div>
             <div> <a class = "submenu" href = "Файл с байками"> Байки</a></div>
          </div>
</div>

<div class = "content">
       <h3> В этом разделе советы агрономов, дизайнеров и шутки садоводов СНТ "Садовое": </h3>
<p> <span class= "epig"> По размеру сад должен быть таким,
чтобы за ним могла ухаживать твоя жена. </span>
<span class= "avtor">Томас Эверетт </span><p>
   <div class = "one_column">
          <p style ="background-color: pink; font-size: 15pt; font-family: 'Arial';"> Здесь подборка законов и постановлений о товариществах</p>
    </div>
</div>


<div class = "bottom_menu">
|  <a class = "bottom" href = "index.html">Главная</a>  |
|  <a class = "bottom" href = "main.html">О товариществе</a>  |
|  <a class = "bottom" href = "lows.html">Законы о СНТ</a>   |
|  <a class = "bottom" href = "help.html">Помощь садоводу</a>  |
|  <a class = "bottom" href = "ssilki.html">Интересные ссылки</a>  |
</div>

<div class = "bottom">
Сайт основан в августе 2012 - 2015 г. © Все права на материалы сайта принадлежат Правлению СНТ «Садовое».
Плагиат не преследуется!
</div>

      </div>
    </center>
    </body>
</html>

Я сохранил этот текст в файле help_submenu.html в папке I make site, и открыл этот файл в браузере Firefox. На экране появилась cтраница "Помощь садоводу" с подменю. Если навести курсор на пункт вертикального меню, то справа от пункта появится ("всплывёт") подменю.

Наверное, с остальными тегами и их стилями я тоже справлюсь, если будет нужно!

Сайт основан в августе 2012 - 2024 г. © Все права на материалы сайта принадлежат Правлению садоводческого некоммерческого товарищества «Садовое».
Ленинградская область, Всеволожский район, Лесколовская волость, район деревни Верхние Осельки, ж/с Пери
Плагиат не преследуется!