Как сделать сайт
Шрифт
14
16
18
20
22
Как сделать сайт
Пять способов сделать сайт
Первый способ
Заказать сайт в вебстудии или у фрилансеров. В этом случае нужно найти хорошего, но недорогого исполнителя. А это зачастую две взаимоисключающих характеристики. Но плюс в этом варианте в том, что за деньги хороший исполнитель реализует любую функциональность, любой дизайн и воплотит любую задачу, поставленную вами.
Второй способ
Создать сайт на сайтах-конструкторах. Например 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> © 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> © 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качиваний: 502 Размер: 3.31 МБ