Как сделать меню лендинга или меню сайта на лендах
Верхняя полоска лендинга - обычно либо общее меню сайта, либо меню лендинга.
Простое меню сайта
Если это просто меню сайта - вы можете использовать сниппет меню (сниппет 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
- Основные компоненты
- Возможности
- Коммуникация с пользователем
- Дизайн, стилизация
- Лендинги Работа с лендингами (механизм Lands) Как внедрить лендинг со своим шаблоном и стилями Как сделать копию лендинга с другим адресом или перенести лендинг на другой сайт Как поменять URL у лендинга Как использовать одни и те же секции несколько раз без дублирования Как отключить секцию лендинга или менять их порядок на лендинге Как задать высоту/подложку секции лендинга Как для ленда прописать скрипты или подключить дополнительные CSS файлы, счетчики и т.д. Как максимально быстро создать лендинг на базе Falcon Space Как прописать SEO параметры для ленда Как создать свой шаблон новой секции лендинга? Как редактировать секцию лендинга Как создать новый лендинг? Где посмотреть список лендингов? Как сделать меню лендинга или меню сайта на лендах Как сделать подстановочными фавикон, seo title у лендинга Как сделать набор типовых лендингов под некие объекты (карточки товаров)? Как создать сайт полностью на лендингах? Как сделать так, чтобы PWA работал для лендингов Как переместить лендинг на главную страницу (или на любую другую)
- Универсальный API
- Примеры интеграций
- Каталоги
- Навигация
- Документы
- Дополнительные компоненты
- Продвижение, SEO
- Системные моменты
- Системное администрирование
- HOWTO
- Таблицы
- Формы
- Загрузка файлов, картинок
- Работа с SQL
- HOWTO JS
- HOWTO Верстка
- Решение проблем
Falcon Space
Это снижение стоимости владения
за счет меньшего количества людей для поддержки и узкого стека разработки. Про снижение стоимости владения продуктом
Это быстрое внесение изменений
по ходу эксплуатации программы. Как создается функционал на платформе
Это простой удобный интерфейс
адаптация под мобильные устройства. Про юзабилити платформы
Нужна бесплатная консультация?
Получить оценку проекта
Создайте концепцию проекта на основе нашего шаблона и получите оценку проекта в виде КП.
Демо-сайт решений
Базисные решения, которые можно гибко адаптировать под себя: менять внешний вид, бизнес-логику и даже структуру базы данных.