Как «зачётно» оформить навигацию на сайте (хлебные крошки, обычные и выпадающие меню) с помощью Bootstrap

17 Сентябрь, 2015

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Хочу продолжить сегодня приводить примеры использования фреймворка под названием Бутстрап 3 на благо упрощения и стандартизации верстки сайтов. Конечно же, это не конструктор сайтов, где нужные элементы сайта можно перетащить мышью в нужное место и для работы с которым особых знаний не потребуется. Нет. Но эта штука позволяет верстать «зачетные сайты» всем, кто освоит небольшой набор «хитростей».

К разочарованию большинства, приходится признать, что базовые знания Html и основы CSS при изучении Bootstrap необходимы, без них для вас все это будет одна сплошная галиматья. Но вот филигранного владения стайлингом от вас уже не потребуется — нужно будет лишь изучить способы подключения возможностей этого фрейморка для реализации ваших задумок на «профессиональном» уровне. А потом все пойдет уже по накатанной...

Меню в Бутстрап 3

Чуть ранее мы с вами уже кое о чем побеседовали, кое чему научились и даже появилось желание разбираться дальше. Последнее похвально, ну, а для тех, кто присоединился к нам только сейчас, предложу к ознакомлению предыдущие опусы на тему овладения Бутстрапом, которые неплохо было бы изучить (и желательно в приведеном порядке следования):

  1. Bootstrap 3 — отзывчивый фреймворк для быстрого создания дизайна современных сайтов
  2. Сеточная система в Bootstrap 3 и пример работы с ней
  3. Как задать смещение между колонками, поменять их местами, вложить друг в друга и создать большой центральный блок
  4. Создание кнопок, оформление текста и картинок, а также добавление отзывчивых классов
  5. Добавление глиф-иконок на сайт, оформление миниатюр для галерей, а также таблиц и панелей

Сегодня же у нас на очереди оформление с помощью функционала Бутстрапа различных элементов навигации — хлебных крошек, вертикальных и горизонтальных меню, а также меню выпадающих. Все это не так, чтобы было сложно, но на примерах учиться, как правило, легче. Ну, а в следующей статье мы уже рассмотрим создание переключающихся вкладок с контентом в горизонтальном и вертикальном (типа аккордеона) исполнении. Ну, а сегодня навигация и все, что с ней связано. Поехали...

Оформляем через Bootstrap хлебные крошки


Еще раз акцентирую ваше внимание, что этот фреймворк фактически задает вашему сайту «зачетный» внешний вид, что позволяет сделать восприятие имеющегося на сайте контента более простым и естественным для его посетителей. Мы будем продолжать рассматривать его применение на неком аналоге простейшего Html сайта, для работы которого не используется никакого движка. Т.е. в нем отдельные страницы сайта представляют отдельные Html файлики, к которым подключается описанными в первой статье средствами Бутстрап, чтобы они выглядели «не хуже, чем у людей».

Это вовсе не означает, что Bootstrap нельзя прикрутить к движку. Можно, и если будет время и желание мы поговорим про это на примере Joomla. Но объяснять принципы использования этого фреймворка удобнее именно на примере отдельных страниц некоего простейшего Html сайта, о создании которого и подключении к нему Бутстрапа мы говорили в первых статьях этой серии. Однако, приступим к делу.

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

Некоторые элементы потребуют кооперации с Джава-скриптом (например, выпадающие меню или переключающиеся вкладки с контентом). Но в этом фрейворке это все достигается элементарно — простым добавление нужного класса или ID к нужному элементу Html кода. Ну, да вы и сами все увидите (в этой статье — на примере выпадающих меню, а в следующей — на примере вкладок).

Давайте начнем с чего попроще, а именно с хлебных крошек. По приведенной ссылке вы найдете пример их реализации на WordPress, а сегодня мы говорим не об их реализации на каком-либо движке, а именно о придании им «зачетного» вида. Саму необходимость использования на сайте подобных элементов навигации, думаю, обосновывать не требуется.

Обычно хлебные крошки располагаются вверху веб-страниц и служат для быстрого понимания того, где пользователь находится в данный момент (относительно глобальной иерархии сайта). Другими словами, они добавляют интерактивности вашему проекту.

Хлебные крошки на ктонановенького

Т.е. вы понимаете, в каком именно разделе содержится данная статья (товар, услуга) и можете в него непосредственно перейти для просмотра остальных предложений. Давайте сымитируем их. В Html коде это будет оформлено как банальный список, в котором важен порядок расположения пунктов.

Для наилучшего понимания создадим Html страницу, чем-то напоминающую реальную вебстраницу с заготовкой для хлебных крошек. Ну, а после эту самую заготовку разметим с помощью классов Bootstrap 3 так, чтобы глаз порадовался.

Точнее, создам заготовку я сам, а вам лишь предложу по аналогии с предыдущими статьями этой рубрики скачать файлик sait-7.html (для этого кликните по ссылке правой кнопкой мыши и выберите из контекстного меню пункт «Сохранить как...»), чтобы уже потом вместе дописывать к этой «рыбе» нужные классы бутстрапа. Его также нужно будет поместить в папку Bootstrap (в ее корень).

Если вы посмотрите исходный код файла sait-7.html, то увидите, что в нем уже подключен Бутстрап и jquery, а также добавлен контент для имитации содержимого страницы. Да, еще папочка с используемыми на этой странице изображениями вам понадобится. Скачать ее можно отсюда — img-6.zip. Просто распакуйте архив и поместите содержащиеся в нем картинки в папку img. Структура получится такая:

Заготовка для хлебных крошек

Наша заготовка на данный момент выглядит довольно-таки непрезентабельно — обычный нумерованный список никак не сподвигающий пользователя думать, что это и есть знаменитые хлебные крошки:

Пока еще не похоже на хлебные крошки

Но не беспокойтесь, сейчас все будет. Нужно будет только нужные классы добавить к элементам этого списка (их можно будет подсмотреть в хелпе по Бутсрап 3, а заодно там и про пагинацию чуть ниже написано) и он заиграет новыми красками. Вы теги списка в коде файла sait-7.html нашли? Замечательно, теперь добавьте к тегу OL класс breadcrumb, а также отметьте классом active тот пункт LI (последний), который обозначает текущее местоположение пользователя в навигации по сайту.

В итоге должно в коде получиться примерно так:

  <ol class="breadcrumb">
              <li><a href="#">Главная</a></li>
              <li><a href="#">Раздел</a></li>
              <li class="active">Текущая статья</li>
            </ol>

Ну, а на нашей подопытной странице все тоже станет очень даже симпотно и похоже на настоящие хлебные крошки (навигационная последовательность), оформленные через Бутстрап:

Хлебные крошки в Бутстрап

Понятно, что если Бутсрап прикручивать к самописному или общедоступному движку, то вписывать данные классы придется в те файлы шаблона, где описывается работа хлебных крошек. В нашем же случае имеет место быть тривиальный Html сайт с небольшим числом страниц, где все вручную прописывается (и навигационная последовательность в том числе) для каждой страницы. В принципе, небольшой проект вполне можно именно так и делать, ибо прикручивание движка не всегда целесообразно.

Как поменять разделитель в хлебных крошках?

Однако, вернемся к нашим баранам. По умолчанию в качестве разделителя используется слеш (это задано в CSS-стилях от Bootstrap). Не скажу, что это плохо (мне нравится), но если у вас возникнет вполне здоровое желание поэкспериментировать, то в двух словах опишу те шаги, которые нужно будет для этого предпринять. Например, давайте вместо слеша добавим какую-нибудь подходящую по смыслу глиф-иконку (стрелку или еще что-нибудь), о которых мы уже вели речь в одной из предыдущих статей. Давайте?

В общем, в файлике CSS от бутстрапа (bootstrap.css или bootstrap.min.css — в зависимости от того, какой из них вы подключили) этот самый разделитель добавляется с помощью селектора псевдоэлемента before и content, которые позволяют формировать контент страницы на лету (добавлять то, чего в Html коде нет). Например, в самом верху этой страницы вы видите ее оглавление, но не сможете скопировать слово «Оглавление» в буфер, ибо его нет в контенте (оно добавлено через CSS в качестве элемента оформления). Но не суть.

Нам нужно будет просто найти это место в файле стилей Бутстрапа bootstrap.css, и с помощью поиска по странице в используемом вами Html редакторе ищите breadcrumb. То, что вы найдете, будет выглядеть примерно так:

 .breadcrumb > li + li:before {
  padding: 0 5px;
  color: #ccc;
  content: "/\00a0";
}

Страшная конструкция, но нам требуется лишь отключить добавления слеша. Однако, советую вам не вносить правки непосредственно в bootstrap.css. Для добавления своих стилей, если помните, мы специально создали и соответствующим образом подключили (читайте каким образом в CSS работают приоритеты) файлик manual.css. Вот именно в него (в самом конце) и добавим что-то типа этого:

 .breadcrumb > li + li:before {
  content: none;
}

После сохранения изменений обновите открытую страницу и увидите, что разделитель в крошках бесследно исчез:

Опа на

Полдела сделано. Осталось только глиф-иконки добавить. Сделать это проще простого — где должен быть разделитель, там ставите тег SPAN с классом нужной глиф-иконки. Например, так:

   <ol class="breadcrumb">
              <li><a href="#">Главная</a></li>
			  <span class="glyphicon glyphicon-circle-arrow-right"></span>
              <li><a href="#">Раздел</a></li>
			  <span class="glyphicon glyphicon-circle-arrow-right"></span>
              <li class="active">Текущая статья</li>
            </ol>

Получилось в итоге так:

Глиф иконки в качестве разделителя хлебных крошек через Бутстрап

Как поставить другую иконку или сменить ее цвет, мы уже с вами разбирали в предыдущей статье. Идем дальше.

Оформление меню в виде вкладок или навигационных кнопок


Пожалуй, сейчас трудно найти сайт, который не имел бы панели навигации (меню). Именно оно связывает все страницы между собой и позволяет посетителю без проблем по ним перемещаться. Достойное оформление меню является тоже очень важной задачей, которую Бутстрап позволяет существенно облегчить не потеряв в качестве.

Чтобы не особо заморачиваться для иммитации меню, просто добавьте в уже существующий файлик sait-7.html, сразу после тега div с классом container, следующую конструкцию, представляющую из себя по сути список, который будет размещен в отдельной строке сетки Бутстрапа (будет занимать все 12 колонок по ширине):

  <div class="container">
  <nav class="row">
    	<ul>
        	<li><a href="#">Главная</a></li>
        	<li><a href="#">О сайте</a></li>
        	<li><a href="#">Услуги</a></li>
        	<li><a href="#">Портфолио</a></li>
        	<li><a href="#">Контакты</a></li>
        </ul>
    </nav>

Тут я, правда, извратился и вместо обычного контейнера DIV с классом строки (row) прописал тег семантической разметки NAV (обозначающий основную навигацию по сайту в спецификации Html 5). По сути это тот же DIV, но с намеком для поисковиков, что это есть менюшка. Не обращайте на это особого внимания. Данный список без должного оформления выглядит довольно-таки убого:

Меню в Бутстрапе

Давайте его облагородим (отстайлим) с помощью возможностей Bootstrap 3. Все, что для этого нужно, вы найдете в этом разделе хелпа, а я просто приведу конкретные примеры реализации этих инструкций.

Чтобы создать меню на манер вкладок, достаточно будет добавить к тегу списка класс nav nav-tabs, ну, а к тегу LI, соответствующему текущей странице, нужно будет по традиции добавить класс active (чтобы пользователь знал ответ на вопрос: «и где я нахожуся»).

  	<ul class="nav nav-tabs">
        	<li><a href="#">Главная</a></li>
        	<li><a href="#">О сайте</a></li>
        	<li><a href="#">Услуги</a></li>
        	<li class="active"><a href="#">Портфолио</a></li>
        	<li><a href="#">Контакты</a></li>
        </ul> 

В результате ни о чем не говорящий список по мановению волшебной палочки превращается в достойное взгляда посетителя меню:

Класс, да? Мне нравится Бутстрап.

Если нужно оформить вертикальное меню, то нужно будет добавить всего лишь еще один класс: nav-stacked. Получится что-то типа:

  	<ul class="nav nav-tabs nav-stacked">
        ...
        </ul> 

Правда в нашем случае это будет излишне, но в вертикальные меню очень часто добавляют не основные элементы навигации (заключая их в левую или правую колонку сайта), поэтому нужно понимать как их можно оформить.

Кстати, вариант вкладок в случае вертикальных меню смотрится в исполнении Bootstrap не айс, поэтому лучше в этом случае использовать навигационные кнопки, которые задаются заменой класса nav-tabs на nav-pills:

 <ul class="nav nav-pills nav-stacked">
        	<li><a href="#">Адвордс</a></li>
        	<li><a href="#">Директ</a></li>
        	<li><a href="#">Трали-вали</a></li>
        	<li class="active"><a href="#">Новые материалы</a></li>
        	<li><a href="#">Карта сайта</a></li>
        </ul>  

Выглядеть на реальном сайте это может примерно так:

Вертикальное меню в Бутстрапе

Открытая в данный момент страница в меню опять же отмечается добавлением класса active к нужному тегу LI. Получается, как вы могли убедиться, все очень даже презентабельно и без каких-либо заморочек. Как поменять цвета, чтобы они подходили под стиль вашего сайта, мы уже говорили в предыдущих статьях.

Собственно, и верхнее меню можно тоже сделать в виде навигационных кнопок простой заменой классов (nav-tabs на nav-pills) в теге списка, который и задает это самое меню в Html коде страницы. Получится, например, так:

Горизонтальное меню в виде навигационных кнопок средствами Bootstrap

Правда верхняя менюшка по умолчанию не растянута на всю ширину страницы. Кому-то это нравится, а кому-то захочется больше. В общем, чтобы растянуть в Bootstrap 3 меню на всю доступную ему ширину (у нас это вся ширина макета, ибо в строке с меню оно занимает все колонки невидимой сетки), нужно будет опять же всего лишь добавить еще один класс nav-justified:

  	<ul class="nav nav-pills nav-justified">
        	<li><a href="#">Главная</a></li>
        	<li><a href="#">О сайте</a></li>
        	<li><a href="#">Услуги</a></li>
        	<li class="active"><a href="#">Портфолио</a></li>
        	<li><a href="#">Контакты</a></li>
        </ul>   

Выглядеть это будет примерно так:

Верхнее меню во всю ширину сайта

Таким образом, используя описанный выше пяток классов, можно поменять внешний вид (и даже ориентацию) панели навигации всего лишь в несколько кликов.

Как подготовить меню к просмотру на малых экранах?


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

Бутстрап 3 — это прежде всего отзывчивый дизайн (это когда при изменении размера экрана используются разные модели построения контента, чтобы его было проще воспринимать). В принципе, меню и по умолчанию будет подстраиваться под размер экрана, но можно сделать так, чтобы для смартфонов оно отображалось бы лишь в виде одной кнопки (с тремя горизонтальными полосками), тем самым не занимая весь первый экран. Сделать это не так уж и сложно.

Замените строки:

	<li><a href="#">Главная</a></li>
        	<li><a href="#">О сайте</a></li>
        	<li><a href="#">Услуги</a></li>
        	<li class="active"><a href="#">Портфолио</a></li>
        	<li><a href="#">Контакты</a></li> 

На «немного» доработанный вариант:

<div class="row">
        <nav class="navbar navbar-default navbar-inverse">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div class="collapse navbar-collapse" id="collapse">
            	<ul class="nav navbar-nav">
                	<li><a href="#">Главная</a></li>
        	<li><a href="#">О сайте</a></li>
        	<li><a href="#">Услуги</a></li>
        	<li class="active"><a href="#">Портфолио</a></li>
        	<li><a href="#">Контакты</a></li>
                </ul>
            </div>
        </nav>
</div> 

Давайте посмотрим что получилось, а я потом коротенько поясню, что здесь к чему. Итак, на экранах мониторов и ноутбуков пользователи будут видеть вот такое меню:

Стилизованное в Бутстрап верхнее меню для сайта

Ну, во-первых, бросается в глаза, что оно стало черным, а текст пунктов наоборот белым. Собственно, за это отвечает добавление класса navbar-inverse. Но не это главное. Если вы будете уменьшать область просмотра (окно браузера), то в определенный момент от всего меню останется лишь одна кнопка с тремя полосками:

Коллапс меню и превращение его в одну кнопку

Как я уже упоминал, это будет удобно при просмотре сайта со смартфона. Нажав на эту кнопку пользователь увидит содержимое меню в таком вот виде:

Меню сайта на телефоне

По-моему прикольно получилось. Если хотите, чтобы на кнопке отображались четыре горизонтальных полоски, то добавьте еще одну строку:

 <span class="icon-bar"></span>

Вообще конструкция:

<div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>

отвечает за отображение этой самой кнопки с тремя полосками при очередном коллапсе сетчатой системы Бутстрапа. Атрибуты начинающие с data отвечают за взаимодействие Html и Джаваскрипта.

Строка:

 <div class="collapse navbar-collapse" id="collapse">

отвечает за перемещение пунктов меню «под кнопку» при просмотре сайта на малых разрешениях экрана. Объяснять более подробно просто не хватит времени и статья будет раздута до безобразия. Просто возьмите на вооружение этот метод оптимизации меню в Bootstrap, если он вам понравился. А если нет, то забудьте...

Как сделать фиксированное меню средствами Bootstrap?

Что я имею ввиду под фиксированным меню? Ну, это как на этом блоге — верхнее меню при начале прокрутки страницы как бы прилипает в верхней части области просмотра и остается в поле видимости посетителя на все время его нахождения на сайте. О пользе такого подхода можно спорить, но я лишь опишу способ реализации такой фичи в Бутстрам 3 (тем более, что для этого и делать-то особо ничего не нужно — один класс дописать).

Собственно, уже проговорился, что для прикрепления меню нужно будет лишь добавить класс navbar-fixed-top, чтобы оно зафиксировалось в верхней области просмотра. При этом оно еще и растянется на всю ширину экрана, чтобы смотреться более органично.

 <nav class="navbar navbar-default navbar-inverse navbar-fixed-top">

Единственное, что при этом в самом начальном моменте, когда страницу посетитель еще прокручивать не начал, меню загораживает собой верхнюю область.

Фиксированное меню в Бутстрап

Поправить это дело не сложно. В нашем собственном файле стилей manual.css, который мы благоразумно создали и подключили ко всем страницам сайта, нужно будет в самом начале добавить лишь одно дополнительное правило для видимой области сайта (тега body):

body { padding-top: 70px; }

После этого все выглядит просто замечательно:

Исправление ошибки с наездом меню на контент

Ну, а при прокрутке страницы меню, как и договаривались, будет оставаться прижатым к самому верху области просмотра (зафиксированным).

Как организовать выпадающее меню в Бутстрап 3?


В заключении хочу дать необходимые пояснения по созданию выпадающих меню средствами Bootstrap. Говорить о пользе выпадающих меню не приходится, тем более на сайтах, где без разветвленной навигации бывает очень сложно построить удобное юзабилити. В общем, кому нужно — тот оценит.

Вся информация, необходимая вам для создания выпадающего меню, содержится в этом разделе хелпа Бутстрапа. Мы же рассмотрим пример применения этих знаний к созданной ранее навигационной панели. Просто добавим в уже существующее меню к одному из пунктов несколько подпунктов путем вставки вложенного списка. Выглядеть в коде это будет примерно так:

          <div class="collapse navbar-collapse" id="collapse">
            	<ul class="nav navbar-nav">
                	<li><a href="#">Главная</a></li>
        	<li><a href="#">О сайте</a></li>
        	<li><a href="#">Услуги</a>
			<ul>
                        	<li><a href="#">Услуга 1</a></li>
                            <li><a href="#">Услуга 2</a></li>
                            <li><a href="#">Услуга 3</a></li>
                        </ul>
			</li>
        	<li class="active"><a href="#">Портфолио</a></li>
        	<li><a href="#">Контакты</a></li>
                </ul>
            </div>  

Т.е. мы добавили в пункт «Услуги» несколько подпунктов с видами услуг. Пока что на сайте все это выглядит не айс:

Создание выпадающего меню

Но стоит нам добавить к тегу LI (того пункта меню, из которого будут выпадать вновь добавленные подпункты) класс dropdown и ... Ничего не произойдет. Просто еще чуток поколдуем, чтобы получилась подобная конструкция:

<li class="dropdown"><a href="#" data-toggle="dropdown">Услуги <span class="caret"></span></a>
			<ul class="dropdown-menu">
                        	<li><a href="#">Услуга 1</a></li>
                            <li><a href="#">Услуга 2</a></li>
                            <li><a href="#">Услуга 3</a></li>
                        </ul>
			</li>

Вот тогда уже все заиграет как надо. Или нет? Все получится как надо:

Выпадающее меню в Бутстрапе

Теперь немного пояснений. Для чего нужен фрагмент, показанный ниже?

<span class="caret"></span>

Правильно, чтобы вот такой вот замечательный треугольничек, направленный вниз, добавить рядом с пунктом меню, который имеет выпадающие подпункты. Это поможет посетителям об этом без труда догадаться. Ну, а всю машинерию выпадания запускает атрибут тега ссылки A data-toggle="dropdown", задействуя для этого дела возможности джаваскрипта.

По-моему замечательно получается и совсем не сложно. А вы как думаете? Ах, да. Предвидя вопрос — сразу отвечу. Выпадающие меню в Bootstrap активируются по клику мыши, но не по наведению курсора. Почему сделали именно так? Все опять же просто объясняется.

Дело в том, что верстая сайт на этом фреймворке вы учитываете его удобный просмотр на всех возможных видах устройств отображения включая мобильные. А как подвести курсор мыши на смартфоне или планшете? Думаю, что решение разработчиков было единственно верным.

Следующая статья в цикле будет завершающей, посвящена она будет созданию горизонтальных и вертикальных вкладок. Думаю, что будет интересно. Не переключайтесь.

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Еще:

Рубрики :Отзывчивый дизайн (Bootstrap)

Комментарии и отзывы

Николай

Дмитрий здравствуйте. Очень благодарен Вам за ваши статьи и ваш труд. Склоняю перед вами голову. Дмитрий извините что задаю вопрос не в той теме. У меня такой вопрос. Представьте что я написал статью,(статья «А») опубликовал и она успешно проиндексировалась в поисковиках. Затем, спустя к примеру месяц я опубликовал еще одну (статья «Б») которая тоже проиндексировалась. Вопрос: если после индексации страниц А и Б я сделаю перелинковку так как они связаны тематически, не отразиться ли это негативно в глазах поисковых машин? Есть ли у вас опыт в этом отношении? Заранее спасибо за ответ!!

Ирина

Дмитрий добрый день! Вы такой молодец! Я уже не первый год успешно пользуюсь Вашими советами! Может быть Вы сможете мне помочь...на фоне именно этой статьи есть вопрос...выпадающее меню классная штука, но свернувшись в кнопку оно потом не разворачивается вообще! В чем может быть проблема??? Все красиво и элегантно, но не разворачивается зараза))))

Юрий

Спасибо за полезную информацию.

Не могли бы вы осветить такой аспект:

считается «хорошим»тоном, когда страница не имеет ссылку на саму себя. Например в «хлебных крошках» последний пункт делают неактивным.

Как поступать с активным пунктом меню?

1). Выпиливать руками, удаляя ссылки? Перепрописывая стили?

2). Воспользоваться классом .disabled и еще использовать javascript (вот только как?), как рекомендует сам бутстрап?

3). Поставить вместо href="link.html" href="#" и ничего не менять?

Vika

Вы ошибаетесь вот в этом:

«Дело в том, что верстая сайт на этом фреймворке вы учитываете его удобный просмотр на всех возможных видах устройств отображения включая мобильные. А как подвести курсор мыши на смартфоне или планшете? Думаю, что решение разработчиков было единственно верным».

Если для смартфона это правильное решение, то для обычного ПК или ноутбука — нет. Там есть мышка. Могли предусмотреть выпадающее меню для ПК и стилями делать его по клику для смартфонов.

Vika

Юрий. О «хлебных крошках» и последнем пункте в ряду ссылок...

Ответ здесь:

forum.opencart-russia.ru/threads/seo-xlebnye-kroshki-ubrat-ssylki-na-samix-sebja.4063/

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