Выгода от использования Falcon Space
В 2-3 раза экономнее и быстрее, чем заказная разработка
Более гибкая, чем коробочные решения и облачные сервисы
Используйте готовые решения и изменяйте под свои потребности
Как сделать меню лендинга или меню сайта на лендах
Верхняя полоска лендинга - обычно либо общее меню сайта, либо меню лендинга.
Простое меню сайта
Если это просто меню сайта - вы можете использовать сниппет меню (сниппет 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
Google поиск по нашей документации
- Шаг 1. Создать концепт проекта
- Шаг 2. Получить оценку бюджета (КП)
- Шаг 3. Заключить договор
- Шаг 4. Создать совместно техническое задание
- Шаг 5. Поэтапная реализация проекта