%%** - начало внешнего блока содержания веб-страницы. - **%%

%%** - начало контейнера веб страницы,где располагается логотип, название сайта, поисковая форма, навигационные ссылки и др. - **%%

%%** - начало контейнера меню веб-страницы. - **%%

%%** - сам контернер с название сайта, слоганом и кнопкой меню - **%%

%%** - начало контейнера названия сайта - **%%

Notebook

%%** - Название сайта в виде ссылки. - **%%

%%** - начало блок слогана. - **%%

Наша записная книга

%%** - текст слогана. - **%%

%%** - начало блока скрытого меню. - **%%

%%** - блок ссылок-кнопок скрытого меню. - **%% Контакт %%** - Кнопки - ссылка. - **%%

%%** - начало контейнера кнопки выпадающего меню. onclick="myFunction()" задает функцию кнопке при нажатии . href="javascript:void(0);" указывает, что ссылка ничего не делает в данный момент - **%%%%** - полоски на кнопке. :# ====4. Стили блока header====


/* стили верхнего колонтитула header
----------------------------------------- */
#header-wrapper {
background:url(../images/notebook_header_ch.png) no-repeat;
height:110px;
padding:24px 50px 0 75px;
position:relative;}
#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;}
#header {
margin: 0px;
color:#666666;}
#header h1 {
margin: 0px;
font-family:Droid Serif, Georgia, serif;
font-weight:bold;
font-size:30px;
color:#0C211A;
text-shadow:1px 1px #fff;
letter-spacing:-2px;
padding:0;
line-height:40px;}
#header a {
color:#666666;
text-decoration:none;border:none;  }
#header a:hover {  color:#666666;  }

/* стили слогана
----------------------------------------- */
#header .description {
margin: 0px;
padding:0px;
font-size:10px;
color:#666;
text-transform:uppercase;
font-family:Arial, Helvetica, sans-serif; }


   
   
/* стили кнопка навигации
----------------------------------------- */

.topnav #myLinks {
  display: none;
  position: absolute;         /* позиционируется относительно ближайшего родительского элемента */
  cursor: pointer;            /* форму курсора, когда он находится в пределах элемента. */
  height:42px;                /* высота кнопки*/
  border-radius: 3px;         /* радиус углов кнопки */
  right: 136px;               /* отступ справа совпадает с началом кнопки */
  top: 31px;                  /* отступ сверху кнопки */


}

.topnav a {
  float: right;
  padding: 10px 12px;         /*высота от верха кнопки и растояние между кнопками*/
  font-size: 20px;            /*высота шрифта*/
  border-radius: 3px;         /* радиус углов кнопки */
  background-color:#c0c0c0;   /* Цвет символа */
}

/* настройка кнопки меню */
.openbtn {
  position: absolute;          /* позиционируется относительно ближайшего родительского элемента */
  background:#696969;          /*Цвет кнопки серый*/
  cursor: pointer;             /* форму курсора, когда он находится в пределах элемента. */
  width: 50px;                 /* ширина кнопки */
  height:42px;                 /* высота кнопки*/
  border-radius: 3px;          /* радиус углов кнопки */
  right: 90px;                 /* отступ справа кнопки */
  top: 31px;                   /* отступ сверху кнопки */
}

/* настройка полос кнопки меню */
.openbtn span{
    display: inline-block;     /* разрешение устанавливать ширину и высоту элемента */
    position: absolute;        /* позиционируется относительно ближайшего родительского элемента */
    height:3.5px;              /* ширина полосы */
    width: 30px;               /* длина полосы */
    background: #fff;          /* цвет полосы */
    left: 10px;                /* отступ от края кнопки слева */
  }

/* span (1)расположение первой полосы относитель верхней границы кнопки */
.openbtn span:nth-of-type(1) {
    top:10px;	
}

/* span (2)расположение второй полосы относитель верхней границы кнопки */
.openbtn span:nth-of-type(2) {
    top:20px;
}

/* span (3)расположение третей полосы относитель верхней границы кнопки */
.openbtn span:nth-of-type(3) {
    top:30px;
}

====5. Код javascript кнопки меню==== В данный блок поместим логотип, слоган, меню (в нашем случае кнопку скрытого меню) и верхнюю часть картинки- тела нашей веб-страницы и открыв "Пояснительную записку блока main" разберем данный код:


function myFunction() {
  var x = document.getElementById("myLinks");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}

#:Пояснительная записка блока header: - **%%%%** - начало блока видимой части веб-страницы. - **%%

%%** - начало внешнего блока содержания веб-страницы. :# ===Пример верхнего колонтитула=== {{:software:development:demo:notebook_site_4.png?|}} =====Ссылки и Дополнения===== * {{ :software:development:demo:font-awesome-6.x.rar |папка шрифтов «Font Awesome»}} * {{ :software:development:demo:jquery.rar |библиотеки с набором функций JavaScript}} * {{ :software:development:demo:prefixfree.rar |плагин prefixfree}} * {{ :software:development:demo:images.rar |папки images с иконками, картинкой фона и т.д. }} * {{ :software:development:demo:notebook.rar |архив папки примера notebook}}