Falcon Space

Как сделать меню лендинга или меню сайта на лендах

Оглавление

Верхняя полоска лендинга - обычно либо общее меню сайта, либо меню лендинга. 

Простое меню сайта

Если это просто меню сайта - вы можете использовать сниппет меню (сниппет fulltopbar): 

<div style="height: 55px;">
  <div class="navbar-container position-fixed bg-dark w-100" style="z-index:2;">
    <nav class="navbar navbar-expand-md navbar-dark">
      <!-- ЛОГО и НАЗВАНИЕ -->
      <a class="navbar-img mr-2" href="/"><i class="fas fa-dove "></i>
      </a>
      <a class="navbar-brand" href="#">Falcon Space</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbar">
        <!-- МЕНЮ СЛЕВА -->
        <ul class="navbar-nav mr-auto">
          <!-- Простые пункты меню -->
          <li class="nav-item">
            <a class="nav-link" href="#lnd-main3">Ссылка 1</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#link-2">Ссылка 2</a>
          </li>
          <!-- Вложенные пункты меню -->
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Dropdown
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
		  <!-- Глобальный поиск -->
          <li class="nav-item">
            <div class="input-group" style="max-width: 150px; position:relative; top: 2px;">
              <select class='form-control  bg-light border-0 small asSearch as-select-search d-none'
                      data-url="/controls/search/search" data-itemID="0">
                <option value='0'>Найти...</option>
              </select>
            </div>
          </li>
          <!-- УВЕДОМЛЕНИЯ -->
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle " href="#" id="alertsDropdown" role="button"
               data-toggle="dropdown">
              <i class="fas fa-bell fa-fw"></i>
              <span class="badge badge-danger badge-counter as-notification-count hide">0</span>
            </a>
            <div class="dropdown-list dropdown-menu dropdown-menu-right shadow animated zoomInDown animated--grow-in" aria-labelledby="alertsDropdown">
              <a href="/notifications" class="dropdown-header text-center text-decoration-none">
                Все уведомления
              </a>
              <div class="as-notification-cont"></div>
            </div>
          </li>
          <!-- Сообщения -->
          <li class="nav-item dropdown no-arrow mx-1">
            <a class="nav-link " href="/messages" id="msgCount" role="button">
              <i class="fas fa-envelope fa-fw "></i>
              <span class="badge badge-danger badge-counter as-msg-count hide">0</span>
            </a>
          </li>
		  <!-- РАЗДЕЛИТЕЛЬ -->
          <li class='border d-none d-sm-block'></li>
		  <!-- Некая кнопка с иконкой -->
          <li class="nav-item dropdown no-arrow mx-1" title="">
            <a class="nav-link " href="#" role="button">
              <i class="fa fa-bars fa-fw"></i>
              <span>1000</span>
            </a>
          </li>
		  <!-- КОРЗИНА -->
          <li class="nav-item dropdown no-arrow asTopCartBar hide">
            <a class="nav-link dropdown-toggle" href="#" id="cartDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <i class="fas fa-shopping-cart fa-fw"></i>
              <span class="badge badge-danger badge-counter as-cart-productCount hide">0</span>
            </a>
            <div class="dropdown-menu dropdown-menu-right p-3 shadow animated--grow-in text-center" aria-labelledby="cartDropdown">
              <div class="as-cart-info" data-code="supplierProduct"></div>
            </div>
          </li>
          <!-- ЯЗЫКИ -->
          <li class="nav-item dropdown no-arrow asTopLang">
            <a class="nav-link dropdown-toggle" href="#" id="langDropdown" role="button" data-toggle="dropdown">
              <i class="fas fa-globe fa-fw"></i><span class="as-langs-curLang hide text-uppercase"></span>
            </a>
            <div class="dropdown-menu dropdown-menu-right p-3 shadow text-center" aria-labelledby="langDropdown">
              <div class="as-langs hide"></div>
            </div>
          </li>
        </ul>
         <!-- МЕНЮ СПРАВА -->
        <ul class="navbar-nav">
          <li class="nav-item ">
            <a class="nav-link" href="https://wa.me/+79008007060" title="Whatsapp, telegram, viber" target="_blank" ><i class="fab fa-whatsapp"></i> +7 (900) 800-70-60</a>
          </li>
          <!-- СЛУЖЕБНОЕ МЕНЮ ПОЛЬЗОВАТЕЛЯ -->
          <li class="nav-item dropdown no-arrow as-loginStatus">
            <a class="nav-link dropdown-toggle animated zoomInRight delay-1s slow" href="#"
               id="userDropdown" role="button" data-toggle="dropdown" >
              <i class="fa fa-user-tie"></i>
              <span class="as-userPicLabel ">user1</span>
            </a>
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
              <span class="userDropdownLabel dropdown-item disabled text-center font-weight-bold">
                Пользователь
              </span>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item " href="/user">
                <i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i>
                Мой профиль
              </a>
              <a class="dropdown-item " href="/changepass">
                <i class="fas fa-key fa-sm fa-fw mr-2 text-gray-400"></i>
                Сменить пароль
              </a>
              <a class="dropdown-item " href="/account/logoff">
                <i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
                Выйти
              </a>
            </div>
          </li>

        </ul>
      </div>
    </nav>
  </div>
</div>

Меню лендинга со скроллингами по ленду

Здесь мы используем элементы as-scroll и в href указываем, куда должен быть переход. 

<!-- Вертикальное меню -->
<div style="height: 55px;">
	<div class="navbar-container position-fixed bg-light w-100" style="z-index:2;">
        <nav class="navbar navbar-expand-md navbar-light">
          <a class="navbar-img mr-2" href="/"><i class="fas fa-dove "></i>
          </a>
          <a class="navbar-brand" href="#">Falcon Space</a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbar">
            <!-- Пункты вертикального меню -->
            <ul class="navbar-nav mr-auto">
              <li class="nav-item as-scroll">
              <a class="nav-link" href="#lnd-main3">Ссылка 1</a>
              </li>
              <li class="nav-item">
              <a class="nav-link as-scroll" href="#link-2">Ссылка 2</a>
              </li>
              
<li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
            </ul>
           <ul class="navbar-nav">
          <li class="nav-item ">

Примечание. Для корректной работы as-scroll можно добавить смещение от позиции перехода через следующий элемент на странице (можно положить его рядом с меню): 

<input type="hidden" class="as-scroll-shift" value="-80" />

Совмещение меню сайта и меню лендинга

Пример можно увидеть на нашем сайте falconspace.ru

Сверху выводится основное меню. Снизу выводится меню лендинга. 

Как это сделать: 

1. Создаем секцию со следующим телом (это будет основой нашего меню ленда со скроллингом к нужным секциям): 

<div><a class="nav-link as-scroll mr-1" href="#lnd-top">Начало</a></div>
<div><a class="nav-link as-scroll mr-1" href="#lnd-solutions">Решения</a></div>
<div><a class="nav-link as-scroll mr-1" href="#lnd-clients">Клиенты</a></div>
<div><a class="nav-link as-scroll mr-1" href="#lnd-features">Возможности</a></div>
<div><a class="nav-link as-scroll mr-1" href="#lnd-howdevelopproject">Порядок работы</a></div>
<div><a class="nav-link as-scroll mr-1" href="#lnd-reviews">Отзывы клиентов</a></div>
<div><a class="nav-link as-scroll mr-1" href="#lnd-faq">Вопросы/ответы</a></div>
<div><a class="nav-link as-scroll mr-1" href="#lnd-prices">Стоимость</a></div>
<div><a class="nav-link as-scroll mr-1" href="#lnd-guaranties">Гарантия</a></div>

2. Прописываем SQL процедуру для этого ленда по примеру: 

CREATE PROCEDURE [dbo].[block_land_cms-ploshadki-uslug_top_get]
	@code nvarchar(128),
	@itemID nvarchar(256),
	@parameters ExtendedDictionaryParameter readonly,  -- langID, username...
	@res nvarchar(max) output
AS
BEGIN
	-- извлекаем блок по умолчанию
	declare @s  nvarchar(max) = ''
	select @s = html from as_htmlBlocks where code = @code
    
   declare @username nvarchar(128) = (select value2 from @parameters where [key]='username')
    declare @url nvarchar(128) = (select value2 from @parameters where [key]='url')
 	declare @mainMenu nvarchar(max), @p1 ExtendedDictionaryParameter
    
    insert into @p1 ([Key], value2)
    select 'username', @username
    union 
    select 'url', @url
    union 
    select 'subMenu', @s
    
    exec [dbo].[as_block] @code ='topbar', @itemID ='', @parameters = @p1, @res =@mainMenu OUTPUT   
   
	set @res = @mainMenu
END

Здесь мы извлекаем наше меню ленда и доп параметры и передаем все это в генерацию HTML блока topbar. 

3. Реализуем блок topbar (это и есть наше основное меню сайта):  https://pastebin.com/eSdqX1Ev

4. Функция для подсветки нужного пункта: 

CREATE   FUNCTION [dbo].[menu_isActiveMenu]
(		
	@url nvarchar(max), 
	@pattern nvarchar(128)
)
RETURNS nvarchar(max) as
BEGIN
	declare @s nvarchar(max) = ''
	if(@url like '%'+@pattern+'%') set @s = ' active font-weight-bold '	
	return @s
END

Falcon Space - функциональная веб-платформа разработки на узком стеке MS SQL/Bootstrap. Вводная по Falcon Space
Насколько полезной была статья?

Google поиск по нашей документации

Выгода от использования Falcon Space

В 2-3 раза экономнее и быстрее, чем заказная разработка
Более гибкая, чем коробочные решения и облачные сервисы
Используйте готовые решения и изменяйте под свои потребности
Нужна бесплатная консультация?
Планируете делать веб-проект?
Сайт использует Cookie. Правила конфиденциальности OK