• Шрифт

  • 14

  • 16

  • 18

  • 20

  • 22

02 Октября 2020Сайт

Как сделать сайт

Пять способов сделать сайт

Первый способ

Заказать сайт в вебстудии или у фрилансеров. В этом случае нужно найти хорошего, но недорогого исполнителя. А это зачастую две взаимоисключающих характеристики. Но плюс в этом варианте в том, что за деньги хороший исполнитель реализует любую функциональность, любой дизайн и воплотит любую задачу, поставленную вами.

Второй способ

Создать сайт на сайтах-конструкторах. Например Ucoz, Wix, Tilda и т. д. Их очень много. Есть бесплатные, есть условно-бесплатные, есть платные. Минусом этого варианта является ограниченная функциональность даже на платных сайтах-конструкторах.

Третий способ

Блог площадки и соцсети. Такие площадки как LiveJournal, Blogger, Яндекс.Дзен имеют свою популярность. Они по большей части бесплатные или условно-бесплатные. Функциональность, дизайн и задачи, которые мы хотим от сайта, находятся в руках разработчиков этих площадок.

Четвёртый способ

CMS - система управления сайтом. Их очень много. Например WordPress, Joomla, Drupal, DataLife Engine, Bitrix и т. д. Начиная от бесплатных и заканчивая платными и дорогими. Этот способ даёт больше возможностей, чем предыдущие два. Можно расширять базовый функционал и дизайн с помощью бесплатных или платных плагинов, модулей, дополнений, скинов, шаблонов. Но как правило, чтобы реализовать свои идеи, приходится вынужденно лезть в код, что в конечном итоге приводит к проблемам, например, при обновлении CMS.

Пятый способ

Написать сайт самому. Ограничений нет. Придумывай и реализовывай. Очень недорого или почти бесплатно.


В этой статье расскажу про пятый способ сделать сайт.


Главный элемент сайта

Вы уже знаете для чего вам нужен сайт. У вас уже есть идеи и планы того, что вы будете публиковать на сайте. Вы уже обдумали как ваш контент будет структурирован на сайте. Отлично!

Главным элементом сайта является логичная и продуманная навигация. Требования к навигации - это удобство навигации на мобильных и десктопных устройствах, простая и понятная структура. Первым делом нужно сделать меню сайта.


Сайт своими руками с нуля

Скачайте готовое меню по ссылкам:
1. Адаптивное многоуровневое фиксированное Jquery меню
или
2. Адаптивное многоуровневое фиксированное Jquery меню со свайпом

В статье рассмотрим создание сайта со вторым вариантом меню.

Скачанное меню.

Откройте главную страницу index.html в редакторе кода.

СветлаяТёмнаяПеренос  
<!DOCTYPE html>
<html class="no-js" lang="ru">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Адаптивное многоуровневое фиксированное Jquery меню со свайпом</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/font-awesome.min.css" />
<script src="js/jquery-3.5.1.min.js"></script>
<!-- Main Menu -->
<link rel="stylesheet" href="js/nav/menu.css" />
<script src="js/nav/menu.js"></script>
<script src="js/nav/swipe.js"></script>
<script src="js/nav/script_swipe.js"></script>
<!-- End Main Menu -->
</head>
<body>
<div class="menucontainer clearfix">
  <div class="overlapblackbg"></div>
  <div class="mobileheader clearfix">
    <a id="navtoggle" class="animated-arrow"><span></span></a>
  </div>
  <!-- Header -->
  <header class="header">
    <!-- Main Menu -->
    <div class="nav_wrapper">
      <nav class="menu clearfix swipe-menu" id="swipeMenu">
        <ul class="mobile-sub menu-list">
          <li><a href="#">1 уровень</a></li>
          <li><a>1 уровень <span class="arrow"></span></a>
            <ul class="menu-submenu">
              <li><a>2 уровень <span class="arrow2"></span></a>
                <ul class="menu-submenu-sub">
                  <li><a href="#">3 уровень</a></li>
                  <li><a href="#">3 уровень</a></li>
                  <li><a href="#">3 уровень</a></li>
                  <li><a>3 уровень <span class="arrow2"></span></a>
                    <ul class="menu-submenu-sub-sub">
                      <li><a href="#">4 уровень</a></li>
                      <li><a href="#">4 уровень</a></li>
                    </ul>
                  </li>
                  <li><a>3 уровень <span class="arrow2"></span></a>
                    <ul class="menu-submenu-sub-sub">
                      <li><a href="#">4 уровень</a></li>
                      <li><a href="#">4 уровень</a></li>
                    </ul>
                  </li>
                  <li><a href="#">3 уровень</a></li>
                  <li><a href="#">3 уровень</a></li>
                  <li><a>3 уровень <span class="arrow2"></span></a>
                    <ul class="menu-submenu-sub-sub">
                      <li><a href="#">4 уровень</a></li>
                      <li><a href="#">4 уровень</a></li>
                    </ul>
                  </li>
                  <li><a>3 уровень <span class="arrow2"></span></a>
                    <ul class="menu-submenu-sub-sub">
                      <li><a href="#">4 уровень</a></li>
                      <li><a href="#">4 уровень</a></li>
                    </ul>
                  </li>
                </ul>
              </li>
              <li><a>2 уровень <span class="arrow2"></span></a>
                <ul class="menu-submenu-sub">
                  <li><a href="#">3 уровень</a></li>
                  <li><a href="#">3 уровень</a></li>
                  <li><a href="#">3 уровень</a></li>
                  <li><a href="#">3 уровень</a></li>
                  <li><a>3 уровень <span class="arrow2"></span></a>
                    <ul class="menu-submenu-sub-sub">
                      <li><a href="#">4 уровень</a></li>
                      <li><a href="#">4 уровень</a></li>
                      <li><a href="#">4 уровень</a></li>
                      <li><a href="#">4 уровень</a></li>
                      <li><a href="#">4 уровень</a></li>
                      <li><a href="#">4 уровень</a></li>
                    </ul>
                  </li>
                  <li><a href="#">3 уровень</a></li>
                  <li><a href="#">3 уровень</a></li>
                </ul>
              </li>
              <li><a>2 уровень <span class="arrow2"></span></a>
                <ul class="menu-submenu-sub">
                  <li><a>3 уровень <span class="arrow2"></span></a>
                    <ul class="menu-submenu-sub-sub">
                      <li><a href="#">4 уровень</a></li>
                      <li><a href="#">4 уровень</a></li>
                    </ul>
                  </li>
                  <li><a href="#">3 уровень</a></li>
                  <li><a href="#">3 уровень</a></li>
                  <li><a href="#">3 уровень</a></li>
                  <li><a href="#">3 уровень</a></li>
                  <li><a href="#">3 уровень</a></li>
                  <li><a href="#">3 уровень</a></li>
                  <li><a href="#">3 уровень</a></li>
                  <li><a href="#">3 уровень</a></li>
                  <li><a href="#">3 уровень</a></li>
                </ul>
              </li>
              <li><a>2 уровень <span class="arrow2"></span></a>
                <ul class="menu-submenu-sub">
                  <li><a href="#">3 уровень</a></li>
                  <li><a href="#">3 уровень</a></li>
                  <li><a href="#">3 уровень</a></li>
                  <li><a href="#">3 уровень</a></li>
                  <li><a href="#">3 уровень</a></li>
                  <li><a href="#">3 уровень</a></li>
                  <li><a href="#">3 уровень</a></li>
                  <li><a href="#">3 уровень</a></li>
                  <li><a href="#">3 уровень</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <li><a>1 уровень <span class="arrow"></span></a>
            <ul class="menu-submenu">
              <li><a href="#">2 уровень</a></li>
              <li><a href="#">2 уровень</a></li>
              <li><a href="#">2 уровень</a></li>
            </ul>
          </li>
          <li><a href="#">1 уровень</a></li>
        </ul>
      </nav>
    </div>
    <!-- End Main Menu -->
  </header>
  <!-- End header -->
</div>
</body>
</html>

Так как меню адаптивное, сайт необходимо делать тоже с адаптивной сеткой. Для этого скачайте фреймворк Bootstrap и подключите его между тегами <head> </head> главной страницы.

СветлаяТёмнаяПеренос  
<!-- Bootstrap -->
<link rel="stylesheet" href="js/bootstrap/bootstrap.min.css" />
<script src="js/bootstrap/bootstrap.min.js"></script> 
<!-- End bootstrap -->

Сайт будет двухколоночным. Первая колонка - слева на 2/3 ширины экрана для контента, вторая - справа на 1/3 ширины для сайдбара. Код Bootstrap сетки добавьте в код главной страницы после закрывающего тега </header>.

СветлаяТёмнаяПеренос  
<!-- Header2 -->
<header class="header2">
  <!-- Logo -->
  <section class="logo">
    <div class="container-fluid">
      <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">

        </div>
      </div>
    </div>
  </section>
  <!-- End logo -->
</header>
<!-- End header2 -->
<!-- Content -->
<section class="content">
  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
        <!-- Article -->
        <section class="article">
          <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
              <main>
                <article class="article_content">

                </article>
              </main>
            </div>
          </div>
        </section>
        <!-- End article --> 
      </div>
      <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
        <!-- Right sidebar -->
        <section class="sidebar">
          <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
              <aside class="sidebar_content">

              </aside>
            </div>
          </div>
        </section>
        <!-- End right sidebar --> 
      </div>
    </div>
  </div>
</section>
<!-- End content --> 
<!-- Footer -->
<section class="footer">
  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <footer class="footer_content">

        </footer>
      </div>
    </div>
  </div>
</section>
<!-- End footer -->

Перед тегом <nav> вставьте открывающие теги необходимых контейнеров.

СветлаяТёмнаяПеренос  
<section class="nav">
  <div class="container-fluid">

После закрывающего тега </nav> вставьте закрывающие теги контейнеров.

СветлаяТёмнаяПеренос  
  </div>
</section>

Каркас сайта добавлен. Вот код страницы с адаптивным меню и адаптивной сеткой, но пока без контента.

СветлаяТёмнаяПеренос  
<!DOCTYPE html>
<html class="no-js" lang="ru">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Как сделать сайт</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/font-awesome.min.css" />
<script src="js/jquery-3.5.1.min.js"></script> 
<!-- Bootstrap -->
<link rel="stylesheet" href="js/bootstrap/bootstrap.min.css" />
<script src="js/bootstrap/bootstrap.min.js"></script> 
<!-- End bootstrap --> 
<!-- Main Menu -->
<link rel="stylesheet" href="js/nav/menu.css" />
<script src="js/nav/menu.js"></script> 
<script src="js/nav/swipe.js"></script> 
<script src="js/nav/script_swipe.js"></script>
<!-- End Main Menu -->
</head>
<body>
<div class="menucontainer clearfix">
  <div class="overlapblackbg"></div>
  <div class="mobileheader clearfix">
    <a id="navtoggle" class="animated-arrow"><span></span></a>
  </div>
  <!-- Header -->
  <header class="header">
    <!-- Main Menu -->
    <div class="nav_wrapper">
      <section class="nav">
        <div class="container-fluid">
          <nav class="menu clearfix swipe-menu" id="swipeMenu">
            <ul class="mobile-sub menu-list">
              <li><a href="#">1 уровень</a></li>
              <li><a>1 уровень <span class="arrow"></span></a>
                <ul class="menu-submenu">
                  <li><a>2 уровень <span class="arrow2"></span></a>
                    <ul class="menu-submenu-sub">
                      <li><a href="#">3 уровень</a></li>
                      <li><a href="#">3 уровень</a></li>
                      <li><a href="#">3 уровень</a></li>
                      <li><a>3 уровень <span class="arrow2"></span></a>
                        <ul class="menu-submenu-sub-sub">
                          <li><a href="#">4 уровень</a></li>
                          <li><a href="#">4 уровень</a></li>
                        </ul>
                      </li>
                      <li><a>3 уровень <span class="arrow2"></span></a>
                        <ul class="menu-submenu-sub-sub">
                          <li><a href="#">4 уровень</a></li>
                          <li><a href="#">4 уровень</a></li>
                        </ul>
                      </li>
                      <li><a href="#">3 уровень</a></li>
                      <li><a href="#">3 уровень</a></li>
                      <li><a>3 уровень <span class="arrow2"></span></a>
                        <ul class="menu-submenu-sub-sub">
                          <li><a href="#">4 уровень</a></li>
                          <li><a href="#">4 уровень</a></li>
                        </ul>
                      </li>
                      <li><a>3 уровень <span class="arrow2"></span></a>
                        <ul class="menu-submenu-sub-sub">
                          <li><a href="#">4 уровень</a></li>
                          <li><a href="#">4 уровень</a></li>
                        </ul>
                      </li>
                    </ul>
                  </li>
                  <li><a>2 уровень <span class="arrow2"></span></a>
                    <ul class="menu-submenu-sub">
                      <li><a href="#">3 уровень</a></li>
                      <li><a href="#">3 уровень</a></li>
                      <li><a href="#">3 уровень</a></li>
                      <li><a href="#">3 уровень</a></li>
                      <li><a>3 уровень <span class="arrow2"></span></a>
                        <ul class="menu-submenu-sub-sub">
                          <li><a href="#">4 уровень</a></li>
                          <li><a href="#">4 уровень</a></li>
                          <li><a href="#">4 уровень</a></li>
                          <li><a href="#">4 уровень</a></li>
                          <li><a href="#">4 уровень</a></li>
                          <li><a href="#">4 уровень</a></li>
                        </ul>
                      </li>
                      <li><a href="#">3 уровень</a></li>
                      <li><a href="#">3 уровень</a></li>
                    </ul>
                  </li>
                  <li><a>2 уровень <span class="arrow2"></span></a>
                    <ul class="menu-submenu-sub">
                      <li><a>3 уровень <span class="arrow2"></span></a>
                        <ul class="menu-submenu-sub-sub">
                          <li><a href="#">4 уровень</a></li>
                          <li><a href="#">4 уровень</a></li>
                        </ul>
                      </li>
                      <li><a href="#">3 уровень</a></li>
                      <li><a href="#">3 уровень</a></li>
                      <li><a href="#">3 уровень</a></li>
                      <li><a href="#">3 уровень</a></li>
                      <li><a href="#">3 уровень</a></li>
                      <li><a href="#">3 уровень</a></li>
                      <li><a href="#">3 уровень</a></li>
                      <li><a href="#">3 уровень</a></li>
                      <li><a href="#">3 уровень</a></li>
                    </ul>
                  </li>
                  <li><a>2 уровень <span class="arrow2"></span></a>
                    <ul class="menu-submenu-sub">
                      <li><a href="#">3 уровень</a></li>
                      <li><a href="#">3 уровень</a></li>
                      <li><a href="#">3 уровень</a></li>
                      <li><a href="#">3 уровень</a></li>
                      <li><a href="#">3 уровень</a></li>
                      <li><a href="#">3 уровень</a></li>
                      <li><a href="#">3 уровень</a></li>
                      <li><a href="#">3 уровень</a></li>
                      <li><a href="#">3 уровень</a></li>
                    </ul>
                  </li>
                </ul>
              </li>
              <li><a>1 уровень <span class="arrow"></span></a>
                <ul class="menu-submenu">
                  <li><a href="#">2 уровень</a></li>
                  <li><a href="#">2 уровень</a></li>
                  <li><a href="#">2 уровень</a></li>
                </ul>
              </li>
              <li><a href="#">1 уровень</a></li>
            </ul>
          </nav>
        </div>
      </section>
    </div>
    <!-- End Main Menu -->
  </header>
  <!-- End header -->
  <!-- Header2 -->
  <header class="header2">
    <!-- Logo -->
    <section class="logo">
      <div class="container-fluid">
        <div class="row">
          <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            
          </div>
        </div>
      </div>
    </section>
    <!-- End logo -->
  </header>
  <!-- End header2 -->
  <!-- Content -->
  <section class="content">
    <div class="container-fluid">
      <div class="row">
        <div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
          <!-- Article -->
          <section class="article">
            <div class="row">
              <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <main>
                  <article class="article_content">
                    
                  </article>
                </main>
              </div>
            </div>
          </section>
          <!-- End article --> 
        </div>
        <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
          <!-- Right sidebar -->
          <section class="sidebar">
            <div class="row">
              <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <aside class="sidebar_content">
                  
                </aside>
              </div>
            </div>
          </section>
          <!-- End right sidebar --> 
        </div>
      </div>
    </div>
  </section>
  <!-- End content --> 
  <!-- Footer -->
  <section class="footer">
    <div class="container-fluid">
      <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
          <footer class="footer_content">
            
          </footer>
        </div>
      </div>
    </div>
  </section>
  <!-- End footer --> 
</div>
</body>
</html>

В коде страницы с добавленной сеткой можно заметить четыре промежутка.

Первый - для логотипа.
Второй - для контента.
Третий - для сайдбара.
Четвёртый - для футера.

Заполните эти промежутки соответствующим контентом и кодом.

Добавьте код логотипа.

СветлаяТёмнаяПеренос  
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
      <div id="tagline">
        <div>Ничего сложного в этом нет</div>
      </div>
    </div>
    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
      <div id="logo">
        <a href="index.html"><img alt="Меню" src="img/logo.jpg" /></a>
      </div>
    </div>
    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
      <div id="contacts">
        <div>
          +7 123 456 78 90
        </div>
      </div>
    </div>
  </div>
</div>

Код контента вставьте между тегами <article> </article>.

СветлаяТёмнаяПеренос  
<p>С другой стороны постоянное информационно-пропагандистское обеспечение нашей деятельности обеспечивает широкому кругу (специалистов) участие в формировании позиций, занимаемых участниками в отношении поставленных задач. Значимость этих проблем настолько очевидна, что дальнейшее развитие различных форм деятельности обеспечивает широкому кругу (специалистов) участие в формировании новых предложений.</p>
<img src="img/1.jpg" alt="" class="img-responsive" />

Коду сайдбара место находиться между тегами <aside> </aside>.

СветлаяТёмнаяПеренос  
<!-- Блок рекламы 1 -->
<div class="add_1">
  <h2 class="block-title">Реклама</h2>
  <a href="https://appletec.ru/?from=21635" target="_blank">
    <img src="img/a.jpg" width="840" height="450" alt="" class="img-responsive" />
  </a>
</div>
<!-- Конец блока рекламы 1 -->
<!-- Блок рекламы 2 -->
<div class="add_2">
  <a href="http://handyhost.ru/?from=4056" target="_blank">
    <img src="img/h.jpg" width="840" height="450" alt="" class="img-responsive" />
  </a>
</div>
<!-- Конец блока рекламы 2 -->

Код футера добавьте между тегами <footer> </footer>.

СветлаяТёмнаяПеренос  
<p id="copyright"><a href="index.html">www</a> &copy; 2020</p>

В style.css добавьте стили.

СветлаяТёмнаяПеренос  
img {
  max-width: 100%;
  height: auto;
}
/* Logo ************************************ */
#logo {
  margin: 10px 0;
  text-align: center;
}
#logo img {
  height: 160px;
  width: 160px;
  min-height: 160px;
  min-width: 160px;
}
#tagline {
  font: normal 36px Arial, Tahoma, Verdana, sans-serif;
  height: 160px;
  margin: 10px 0;
  text-align: center;
  display: table;
  width: 100%;
  color: #000;
}
#contacts {
  font: normal 36px Arial, Tahoma, Verdana, sans-serif;
  height: 160px;
  margin: 10px 0;
  text-align: center;
  display: table;
  width: 100%;
  color: #000;
}
#tagline div, #contacts div { /* для IE8+ */
  display: table-cell;
  vertical-align: middle;
}
/* End logo ******************************** */
/* Content ********************************* */
.article_content p {
  text-align: justify;
}
/* End content ***************************** */
/* Sidebar ********************************* */
.add_1 {
  margin-bottom: 30px;
}
.add_1 h2 {
  color: #000;
  font: normal 32px Arial, Tahoma, Verdana, sans-serif;
}
.add_1 img, .add_2 img {
  border: 1px solid #949494;
}
@media only screen and (max-width: 575px) {
  .add_1 h2 {
    margin-top: 30px;
  }
}
/* End sidebarv ***************************** */
/* Copyright ******************************** */
#copyright {
  color: #000;
  text-align: center;
  margin: 15px 0;
}
#copyright a, #copyright p {
  font: normal 16px Arial, Tahoma, Verdana, sans-serif;
  margin: 0;
}
#copyright a:hover {
  color: #000;
}
/* End copyright **************************** */

Главная страница сайта index.html полностью готова. Есть меню, есть каркас сайта в виде сетки Bootstrap, есть контент.

СветлаяТёмнаяПеренос  
<!DOCTYPE html>
<html class="no-js" lang="ru">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Как сделать сайт</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/font-awesome.min.css" />
<script src="js/jquery-3.5.1.min.js"></script> 
<!-- Bootstrap -->
<link rel="stylesheet" href="js/bootstrap/bootstrap.min.css" />
<script src="js/bootstrap/bootstrap.min.js"></script> 
<!-- End bootstrap --> 
<!-- Main Menu -->
<link rel="stylesheet" href="js/nav/menu.css" />
<script src="js/nav/menu.js"></script> 
<script src="js/nav/swipe.js"></script> 
<script src="js/nav/script_swipe.js"></script>
<!-- End Main Menu -->
</head>
<body>
<div class="menucontainer clearfix">
  <div class="overlapblackbg"></div>
  <div class="mobileheader clearfix">
    <a id="navtoggle" class="animated-arrow"><span></span></a>
  </div>
  <!-- Header -->
  <header class="header">
    <!-- Main Menu -->
    <div class="nav_wrapper">
      <section class="nav">
        <div class="container-fluid">
          <nav class="menu clearfix swipe-menu" id="swipeMenu">
            <ul class="mobile-sub menu-list">
              <li><a href="#">1 уровень</a></li>
              <li><a>1 уровень <span class="arrow"></span></a>
                <ul class="menu-submenu">
                  <li><a>2 уровень <span class="arrow2"></span></a>
                    <ul class="menu-submenu-sub">
                      <li><a href="#">3 уровень</a></li>
                      <li><a href="#">3 уровень</a></li>
                      <li><a href="#">3 уровень</a></li>
                      <li><a>3 уровень <span class="arrow2"></span></a>
                        <ul class="menu-submenu-sub-sub">
                          <li><a href="#">4 уровень</a></li>
                          <li><a href="#">4 уровень</a></li>
                        </ul>
                      </li>
                      <li><a>3 уровень <span class="arrow2"></span></a>
                        <ul class="menu-submenu-sub-sub">
                          <li><a href="#">4 уровень</a></li>
                          <li><a href="#">4 уровень</a></li>
                        </ul>
                      </li>
                      <li><a href="#">3 уровень</a></li>
                      <li><a href="#">3 уровень</a></li>
                      <li><a>3 уровень <span class="arrow2"></span></a>
                        <ul class="menu-submenu-sub-sub">
                          <li><a href="#">4 уровень</a></li>
                          <li><a href="#">4 уровень</a></li>
                        </ul>
                      </li>
                      <li><a>3 уровень <span class="arrow2"></span></a>
                        <ul class="menu-submenu-sub-sub">
                          <li><a href="#">4 уровень</a></li>
                          <li><a href="#">4 уровень</a></li>
                        </ul>
                      </li>
                    </ul>
                  </li>
                  <li><a>2 уровень <span class="arrow2"></span></a>
                    <ul class="menu-submenu-sub">
                      <li><a href="#">3 уровень</a></li>
                      <li><a href="#">3 уровень</a></li>
                      <li><a href="#">3 уровень</a></li>
                      <li><a href="#">3 уровень</a></li>
                      <li><a>3 уровень <span class="arrow2"></span></a>
                        <ul class="menu-submenu-sub-sub">
                          <li><a href="#">4 уровень</a></li>
                          <li><a href="#">4 уровень</a></li>
                          <li><a href="#">4 уровень</a></li>
                          <li><a href="#">4 уровень</a></li>
                          <li><a href="#">4 уровень</a></li>
                          <li><a href="#">4 уровень</a></li>
                        </ul>
                      </li>
                      <li><a href="#">3 уровень</a></li>
                      <li><a href="#">3 уровень</a></li>
                    </ul>
                  </li>
                  <li><a>2 уровень <span class="arrow2"></span></a>
                    <ul class="menu-submenu-sub">
                      <li><a>3 уровень <span class="arrow2"></span></a>
                        <ul class="menu-submenu-sub-sub">
                          <li><a href="#">4 уровень</a></li>
                          <li><a href="#">4 уровень</a></li>
                        </ul>
                      </li>
                      <li><a href="#">3 уровень</a></li>
                      <li><a href="#">3 уровень</a></li>
                      <li><a href="#">3 уровень</a></li>
                      <li><a href="#">3 уровень</a></li>
                      <li><a href="#">3 уровень</a></li>
                      <li><a href="#">3 уровень</a></li>
                      <li><a href="#">3 уровень</a></li>
                      <li><a href="#">3 уровень</a></li>
                      <li><a href="#">3 уровень</a></li>
                    </ul>
                  </li>
                  <li><a>2 уровень <span class="arrow2"></span></a>
                    <ul class="menu-submenu-sub">
                      <li><a href="#">3 уровень</a></li>
                      <li><a href="#">3 уровень</a></li>
                      <li><a href="#">3 уровень</a></li>
                      <li><a href="#">3 уровень</a></li>
                      <li><a href="#">3 уровень</a></li>
                      <li><a href="#">3 уровень</a></li>
                      <li><a href="#">3 уровень</a></li>
                      <li><a href="#">3 уровень</a></li>
                      <li><a href="#">3 уровень</a></li>
                    </ul>
                  </li>
                </ul>
              </li>
              <li><a>1 уровень <span class="arrow"></span></a>
                <ul class="menu-submenu">
                  <li><a href="#">2 уровень</a></li>
                  <li><a href="#">2 уровень</a></li>
                  <li><a href="#">2 уровень</a></li>
                </ul>
              </li>
              <li><a href="#">1 уровень</a></li>
            </ul>
          </nav>
        </div>
      </section>
    </div>
    <!-- End Main Menu -->
  </header>
  <!-- End header -->
  <!-- Header2 -->
  <header class="header2">
    <!-- Logo -->
    <section class="logo">
      <div class="container-fluid">
        <div class="row">
          <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <div class="container-fluid">
              <div class="row">
                <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
                  <div id="tagline">
                    <div>Ничего сложного в этом нет</div>
                  </div>
                </div>
                <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
                  <div id="logo">
                    <a href="index.html"><img alt="Меню" src="img/logo.jpg" /></a>
                  </div>
                </div>
                <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
                  <div id="contacts">
                    <div>
                      +7 123 456 78 90
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- End logo -->
  </header>
  <!-- End header2 -->
  <!-- Content -->
  <section class="content">
    <div class="container-fluid">
      <div class="row">
        <div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
          <!-- Article -->
          <section class="article">
            <div class="row">
              <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <main>
                  <article class="article_content">
                    <p>С другой стороны постоянное информационно-пропагандистское обеспечение нашей деятельности обеспечивает широкому кругу (специалистов) участие в формировании позиций, занимаемых участниками в отношении поставленных задач. Значимость этих проблем настолько очевидна, что дальнейшее развитие различных форм деятельности обеспечивает широкому кругу (специалистов) участие в формировании новых предложений.</p>
                    <img src="img/1.jpg" alt="" class="img-responsive" />
                  </article>
                </main>
              </div>
            </div>
          </section>
          <!-- End article --> 
        </div>
        <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
          <!-- Right sidebar -->
          <section class="sidebar">
            <div class="row">
              <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <aside class="sidebar_content">
                  <!-- Блок рекламы 1 -->
                  <div class="add_1">
                    <h2 class="block-title">Реклама</h2>
                    <a href="https://appletec.ru/?from=21635" target="_blank">
                      <img src="img/a.jpg" width="840" height="450" alt="" class="img-responsive" />
                    </a>
                  </div>
                  <!-- Конец блока рекламы 1 -->
                  <!-- Блок рекламы 2 -->
                  <div class="add_2">
                    <a href="http://handyhost.ru/?from=4056" target="_blank">
                      <img src="img/h.jpg" width="840" height="450" alt="" class="img-responsive" />
                    </a>
                  </div>
                  <!-- Конец блока рекламы 2 -->
                </aside>
              </div>
            </div>
          </section>
          <!-- End right sidebar --> 
        </div>
      </div>
    </div>
  </section>
  <!-- End content --> 
  <!-- Footer -->
  <section class="footer">
    <div class="container-fluid">
      <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
          <footer class="footer_content">
            <p id="copyright"><a href="index.html">www</a> &copy; 2020</p>
          </footer>
        </div>
      </div>
    </div>
  </section>
  <!-- End footer --> 
</div>
</body>
</html>

Создайте ещё одну страницу для сайта с названием second.html. Скопируйте код получившейся страницы и поменяйте код контента на другой.

СветлаяТёмнаяПеренос  
<p>Идейные соображения высшего порядка, а также дальнейшее развитие различных форм деятельности позволяет оценить значение новых предложений. Значимость этих проблем настолько очевидна, что дальнейшее развитие различных форм деятельности обеспечивает широкому кругу (специалистов) участие в формировании новых предложений.</p>
<img src="img/2.jpg" alt="" class="img-responsive" />

В коде ненумерованного списка пунктов меню пропишите названия страниц и ссылки на страницы index.html и second.html.

СветлаяТёмнаяПеренос  
<ul class="mobile-sub menu-list">
  <li><a href="index.html">Главная</a></li>
  <li><a>1 уровень <span class="arrow"></span></a>
    <ul class="menu-submenu">
      <li><a>2 уровень <span class="arrow2"></span></a>
        <ul class="menu-submenu-sub">
          <li><a href="#">3 уровень</a></li>
          <li><a href="#">3 уровень</a></li>
          <li><a href="#">3 уровень</a></li>
          <li><a>3 уровень <span class="arrow2"></span></a>
            <ul class="menu-submenu-sub-sub">
              <li><a href="#">4 уровень</a></li>
              <li><a href="#">4 уровень</a></li>
            </ul>
          </li>
          <li><a>3 уровень <span class="arrow2"></span></a>
            <ul class="menu-submenu-sub-sub">
              <li><a href="#">4 уровень</a></li>
              <li><a href="#">4 уровень</a></li>
            </ul>
          </li>
          <li><a href="#">3 уровень</a></li>
          <li><a href="#">3 уровень</a></li>
          <li><a>3 уровень <span class="arrow2"></span></a>
            <ul class="menu-submenu-sub-sub">
              <li><a href="#">4 уровень</a></li>
              <li><a href="#">4 уровень</a></li>
            </ul>
          </li>
          <li><a>3 уровень <span class="arrow2"></span></a>
            <ul class="menu-submenu-sub-sub">
              <li><a href="#">4 уровень</a></li>
              <li><a href="#">4 уровень</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a>2 уровень <span class="arrow2"></span></a>
        <ul class="menu-submenu-sub">
          <li><a href="#">3 уровень</a></li>
          <li><a href="#">3 уровень</a></li>
          <li><a href="#">3 уровень</a></li>
          <li><a href="#">3 уровень</a></li>
          <li><a>3 уровень <span class="arrow2"></span></a>
            <ul class="menu-submenu-sub-sub">
              <li><a href="#">4 уровень</a></li>
              <li><a href="second.html">Вторая</a></li>
              <li><a href="#">4 уровень</a></li>
              <li><a href="#">4 уровень</a></li>
              <li><a href="#">4 уровень</a></li>
              <li><a href="#">4 уровень</a></li>
            </ul>
          </li>
          <li><a href="#">3 уровень</a></li>
          <li><a href="#">3 уровень</a></li>
        </ul>
      </li>
      <li><a>2 уровень <span class="arrow2"></span></a>
        <ul class="menu-submenu-sub">
          <li><a>3 уровень <span class="arrow2"></span></a>
            <ul class="menu-submenu-sub-sub">
              <li><a href="#">4 уровень</a></li>
              <li><a href="#">4 уровень</a></li>
            </ul>
          </li>
          <li><a href="#">3 уровень</a></li>
          <li><a href="#">3 уровень</a></li>
          <li><a href="#">3 уровень</a></li>
          <li><a href="#">3 уровень</a></li>
          <li><a href="#">3 уровень</a></li>
          <li><a href="#">3 уровень</a></li>
          <li><a href="#">3 уровень</a></li>
          <li><a href="#">3 уровень</a></li>
          <li><a href="#">3 уровень</a></li>
        </ul>
      </li>
      <li><a>2 уровень <span class="arrow2"></span></a>
        <ul class="menu-submenu-sub">
          <li><a href="#">3 уровень</a></li>
          <li><a href="#">3 уровень</a></li>
          <li><a href="#">3 уровень</a></li>
          <li><a href="#">3 уровень</a></li>
          <li><a href="#">3 уровень</a></li>
          <li><a href="#">3 уровень</a></li>
          <li><a href="#">3 уровень</a></li>
          <li><a href="#">3 уровень</a></li>
          <li><a href="#">3 уровень</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a>1 уровень <span class="arrow"></span></a>
    <ul class="menu-submenu">
      <li><a href="#">2 уровень</a></li>
      <li><a href="#">2 уровень</a></li>
      <li><a href="#">2 уровень</a></li>
    </ul>
  </li>
  <li><a href="#">1 уровень</a></li>
</ul>

Готово!


Проверяем работу сайта на десктопном и на мобильном устройстве

Сайт на компьютере



Сайт на смартфоне


По кнопкам Скачать и Демо вы увидите сайт c первым вариантом меню.


Cкачиваний: 251   Размер: 3.31 МБ



Категории

Рекомендую
Карта сайта

metail.ru © 2020 - 2021