Товаров: 0 (0р.)

Подсветка активного пункта меню css: Подсветка активного пункта меню с помощью jQuery

Содержание

Подсветка активного подпункта Главного меню сайта на Joomla

Сразу напомню, что у себя на сайте я работаю со стандартным шаблоном сайта Protostar, но информация, предложенная ниже поможет разобраться с тем, как подсветить активный пункт или подпункт Главного меню сайта на Joomla. Для этого нужно немного поправить файл со стилями css шаблона. А если точнее, то прописать элементу меню со атрибутом active нужные свойства его фона и текста (если текст будет сливаться с фоном).

Изначальный вид активного пункта подменю Главного меню сайта

Для того, чтобы было проще понять, рассмотри всё на живом примере. Имеем стандартный пункт главного меню со следующей структурой вложенности:

  • Фреймворки (главный пункт)
    • Yii2 (первый уровень вложенности)
      • Полное руководство по Yii 2.0 (второй уровень вложенности)

Когда мы выбираем подпункт меню первого или второго уровня вложенности, например «Полное руководство по Yii 2.0», то основной пункт Главного меню подсвечивается, а вложенные как были бесцветными и неактивными, так и остаются. Что не есть правильно и хорошо:

Меняем код стиля шаблона в css файле

И снова и ещё ))) Шаблон у меня Protostar, но это не имеет особого значения, так как активный пункт меню Joomla выделяет в класс active:

<li>
 <a href="/frameworks/yii2/yii2-guide-ru.html">
  <img src="/./images/icon/yii.svg" alt=" Полное руководство по Yii 2.0">
  <span> Полное руководство по Yii 2.0</span>
 </a>
</li>

Как видно из кода, атрибут active присваивается тегу списка li. Именно его свойство и нужно изменить в файле шаблона:

/templates/protostar/css/template.css

А конкретно, нужно прописать строчку в позиции 7464:

.navigation .nav-child li.active > a {background-color: #8888cc; color: #fff;}

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

Конечный результат подсветки активного подпункта Главного меню сайта

Ну и после внесения одной строчки в файл css шаблона сайта можно наблюдать, на сколько интерактивным стало Главное меню сайта на Joomla:

Как-то так и никакого волшебства. =)

Заберите ссылку на статью к себе, чтобы потом легко её найти 😉

Выберите, то, чем пользуетесь чаще всего:

Спасибо за внимание, оставайтесь на связи! Ниже ссылка на форум и обсуждение ; )

Делаем активный пункт меню с помощью JavaScript

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

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

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

JavaScript. Преимущества этого кода заключаются в его простоте — он доступен каждому, кто знаком с основами JavaScript. Во-вторых, код можно достаточно легко встроить в любой шаблон вне зависимости от того,  какая система управления у Вашего сайта — WordPress, Joomla или прочие.

С чего начать?

Первым делом необходимо подключить JQuery библиотеку. Сделаем это с помощью этого кода (вставлять между <head> и </head>):

<script type=»text/javascript» src=»<a href=»http://code.jquery.com/jquery-latest.js»>http://code.jquery.com/jquery-latest.js</a>»>

</script>

Понять суть процесса будет легче, если Вы самостоятельно создадите какое-либо меню между <body></body>.  Например:

<ul>

           <li> <a href=»#» >1</a></li>

           <li><a href=»#»>1</a></li>

           <li><a href=»#» >1</a></li>

           <li><a href=»#» >1</a></li>

           <li><a href=»#» >1</a></li>

</ul>

В этом образце приводится самое простое меню. В данном случае ему был присвоен класс “menu”, но по сути можно задать любой класс. Присвоив различные классы, Вы убережете себя от путаницы в дальнейшем, и работать станет гораздо удобнее.

Теперь у нас есть меню. На следующем этапе необходимо четко понять, какого результата мы хотим добиться – как именно будет представлен активный пункт меню в тот момент, когда пользователь находится на данной странице. Тут обратимся к CSS: присвоим новый класс непосредственно активному пункту меню. Допустим, имя класса будет active ( опять же, вы вольны в выборе имени класса). Код должен выглядеть следующим образом:

.active {

font-family: Trajan Pro, Times New Roman;

color: #ffffff;

font-variant: small-caps;

font-size:16px;

padding-left:7px;

word-spacing: 1px;

}

Не забывайте, что указанные в CSS параметры обязательно относятся  к активному пункту меню.

Следующим шагом станет скрипт: его задача — определить, какая страница активна у пользователя. Далее, если данная страница соответствует запрошенной, необходимо присвоить  заданному пункту  его класс active.  Соответственно, пункт изменит  цвет, шрифт и задний фон.  Код необходимо заключать в теги <head></head>:

$(function () { 

    $(‘.menu a’).each(function () {

        var location = window.location.href;

        var link = this.href; 

        if(location == link) {

            $(this).addClass(‘active’);

        }

    });

});

Как уже было сказано выше, это — JavaScript код. Он выполняет следующее: вызванная функция загружает данные из меню, а именно — из тега. Адрес страницы, на которой находится пользователь, функция присваивает переменной location. Далее функция обращается к атрибуту ссылки под тегом, которой присваивает значение переменной link. Если пользователь находится на нужной странице, эти функции будут равны. Тогда функция addClass даст возможность присвоить ссылке новый класс  active. А сам стиль уже был ранее прописан в CSS.

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


Возможно, Вам будет интересно ↓↓↓

Активный пункт меню через PHP

Приятно смотреть на сайты, в которых активная страница выделяется среди остальных в пункте меню или навигации. Реализовать данную возможность можно используя механизм jQuery или PHP скрипта.

Сделать меню с выделением активного пункта не так сложно, как кажется. Даже на jQuery это сделать немного сложнее, об этом вы можете прочитать в этой статье.

Предположим, что у нас есть такое меню:

<ul>
<li><a href=»/»>Главная</a></li>
<li><a href=»/o-nas»>О нас</a></li>
<li><a href=»/contacti»>Контакты</a></li>
</ul>

Чтобы добавить в него код, который бы сам определял активный пункт, добавим в пример php код:

<?php $url = $_SERVER[«REQUEST_URI»];?>
<ul>
<li><a href=»/» <?php if ($url == «/») {echo ‘class=»active»‘;}?>>Главная</a></li>

<li><a href=»/o-nas» <?php if ($url == «/o-nas») {echo ‘class=»active»‘;}?>>О нас</a></li>
<li><a href=»/contacti» <?php if ($url == «/contacti») {echo ‘class=»active»‘;}?>>Контакты</a></li>
</ul>

Разберем работу скрипта

Первая строка запоминает в переменную $url текущую ссылку открытой страницы сайта, причем без домена. Например, если ссылка страницы будет домен.ру/imgs/les/, то в $url будет /imgs/les/. Далее в каждом li a находится условие на проверку текущей страницы. Если где-то условие совпадает, то к ссылке добавляется класс active, на который можно сделать выделение через css стили.

Активный пункт можно назначить и на li тег, тогда условия надо ставить так: <li <?php if ($url == «/») {echo ‘class=»active»‘;}?>><a href=»/»>Главная</a></li>.

Таким образом, через php вполне можно выделять активные пункты в навигации. Минусом такого подхода является ручная настройка ссылок и увеличение кода. Но если у вас маленький сайт, то данный метод вполне оправдан.

 

Читайте также

blogprogram.ru | 2019-03-31 | Активный пункт меню через PHP | Приятно смотреть на сайты, в которых активная страница выделяется среди остальных в пункте меню или навигации. Реализовать данную возможность можно ис | https://blogprogram.ru/wp-content/uploads/2016/09/3123213213-131×131.jpg

Анимированный индикатор активного пункта меню на CSS

От автора: в этой статье по созданию индикатора для меню на чистом CSS я расскажу про необычные способы применения смежных селекторов и псевдо-классов. Вы можете подумать, что тут не обошлось без JavaScript. На самом деле тут нет никакого JS, а просто по-умному использованы возможности CSS. С другой стороны, проще было бы сделать это с помощью JS.

Ниже представлен результат:

Процесс создания разобьем в три этапа:

Основная структура и стили

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Создание индикатора

Заставляем индикатор двигаться

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

Шаг 1: Основная структура и стили

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

<ul> <li>Home</li> <li>About</li> <li>Writing</li> <li>Clients</li> <li>Contact</li> </ul>

<ul>

  <li>Home</li>

  <li>About</li>

  <li>Writing</li>

  <li>Clients</li>

  <li>Contact</li>

</ul>

Не так и мудрено. У нас есть ul с классом PrimaryNav. Данный тег служит контейнером для элементов списка, каждый элемент с классом Nav-item.

Задаем переменные

Одна из ключевых особенностей меню это максимальная ширина, занимаемая элементами меню. Элементы меню растягиваются на всю ширину контейнера. В нашем случае мы зададим переменную $menu-items, которую будем использовать для расчетов ширины каждого элемента .Nav-item. Также мы добавим переменную $indicator-color – угадали – она отвечает за цвет индикатора при наведении на него мыши.

// Переменные пунктов меню // Количество элементов меню $menu-items: 5; // Умножаем на 1% чтобы перевести в проценты $width: (100/$menu-items) * 1%; // Цвета $background-color: #121212; $indicator-color: #e82d00;

// Переменные пунктов меню

// Количество элементов меню

$menu-items: 5;

// Умножаем на 1% чтобы перевести в проценты

$width: (100/$menu-items) * 1%;

 

// Цвета

$background-color: #121212;

$indicator-color: #e82d00;

Теперь, добавим базовые стили меню:

// Родительский контейнер .PrimaryNav { // Удаляем маркеры list-style: none; // Центрируем! margin: 50px auto; // nav никогда не превысит эту ширину и рассчитанное нами значение в процентах max-width: 720px; padding: 0; width: 100%; } // Пункты меню .Nav-item { background: #fff; display: block; float: left; margin: 0; padding: 0; text-align: center; // По нашим расчетам пунктов 5, а значит ширина будет 20% width: $width; // Первый пункт меню &:first-child { border-radius: 3px 0 0 3px; } // Последний пункт меню &:last-child { border-radius: 0 3px 3px 0; } // Если пункт активный, задаем ему цвет индикатора &.is-active a { color: $indicator-color; } a { color: $background-color; display: block; padding-top: 20px; padding-bottom: 20px; text-decoration: none; &:hover { color: $indicator-color; } } }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

// Родительский контейнер

.PrimaryNav {

  // Удаляем маркеры

  list-style: none;

  // Центрируем!

  margin: 50px auto;

  // nav никогда не превысит эту ширину и рассчитанное нами значение в процентах

  max-width: 720px;

  padding: 0;

  width: 100%;

}

 

// Пункты меню

.Nav-item {

  background: #fff;

  display: block;

  float: left;

  margin: 0;

  padding: 0;

  text-align: center;

  // По нашим расчетам пунктов 5, а значит ширина будет 20%

  width: $width;

 

  // Первый пункт меню

  &:first-child {

    border-radius: 3px 0 0 3px;

  }

 

  // Последний пункт меню

  &:last-child {

    border-radius: 0 3px 3px 0;

  }

 

  // Если пункт активный, задаем ему цвет индикатора

  &.is-active a {

    color: $indicator-color;

  }

 

  a {

    color: $background-color;

    display: block;

    padding-top: 20px;

    padding-bottom: 20px;

    text-decoration: none;

 

    &:hover {

      color: $indicator-color;

    }

  }

}

Шаг 2: Создание индикатора

Нам необходимо добавить еще один класс. Можно было бы обойтись одним классом .PrimaryNav, но подход с двумя классами более гибкий. У нас уже есть класс .PrimaryNav, в нем содержатся основные стили меню. Создадим класс .width-indicator – это будет наш индикатор:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

<ul> </ul>

<ul>

 

</ul>

Вот тут мы воспользуемся CSS, хотя обычно в голову пришел бы JavaScript. Мы прекрасно знаем, что добавление нового класса при наведении на элемент указателя мыши это задача JavaScript. Однако давайте разберем, как то же самое можно сделать на чистом CSS.

Основная сложность в получении каждого пункта меню для последующей коммуникации между ними. В маркированном списке первый элемент (:first-child) может взаимодействовать со вторым через смежный селектор + или ~. Но второй уже не может общаться с первым (в CSS нельзя ходить по DOM в обратном направлении).

Выходит, что лучше всего работать с псевдо-классом :last-child. Данный псевдо-класс работает со всеми состояниями соседних элементов, как :hover, так и :active. Поэтому это идеальный кандидат для установки индикатора. Индикатор создается с помощью :before и :after в псевдо-классе :last-child. Элемент :before это CSS треугольник, центрированный отрицательным значением margin’а.

// Индикатор наведения мыши .with-indicator { // Контейнер меню задается относительным, а псевдо-класс last-child задается абсолютно. position: relative; .Nav-item:last-child { &:before, &:after { content: »; display: block; position: absolute; } // CSS Треугольник &:before { width: 0; height: 0; border: 6px solid transparent; border-top-color: $color-indicator; top: 0; left: 12.5%; // Фиксим смещение – может немного изменяться margin-left: -3px; } // блок за текстом &:after { width: $width; background: $indicator-color; top: -6px; bottom: -6px; left: 0; z-index: -1; } } }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

// Индикатор наведения мыши

.with-indicator {

  // Контейнер меню задается относительным, а псевдо-класс last-child задается абсолютно.

  position: relative;

 

.Nav-item:last-child {

  &:before, &:after {

    content: »;

    display: block;

    position: absolute;

  }

  

  // CSS Треугольник

  &:before {

    width: 0;

    height: 0;

    border: 6px solid transparent;

    border-top-color: $color-indicator;

    top: 0;

    left: 12.5%;

    // Фиксим смещение – может немного изменяться

    margin-left: -3px;

  }

 

  // блок за текстом

  &:after {

    width: $width;

    background: $indicator-color;

    top: -6px;

    bottom: -6px;

    left: 0;

    z-index: -1;

  }

}

}

Шаг 3: Заставляем индикатор двигаться

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

На данный момент списку ul задано позиционирование position: relative по умолчанию. Это означает, что наш индикатор установлен на первый пункт меню. Передвигать индикатор можно, изменяя значение left. Так как все пункты одинаковой ширины, то один сдвиг для псевдо-классов :before и :after в :last-child должен быть равен ширине .Nav-item. Помните нашу переменную $widths? Ее можно использовать для атрибута left. Вот так это будет выглядеть в vanilla CSS:

.with-indicator .Nav-item:nth-child(1).is-active ~ .Nav-item:last-child:after { left: 0; } .with-indicator .Nav-item:nth-child(2).is-active ~ .Nav-item:last-child:after { left: 20%; } .with-indicator .Nav-item:nth-child(3).is-active ~ .Nav-item:last-child:after { left: 40%; } .with-indicator .Nav-item:nth-child(4).is-active:after { left: 60%; } .with-indicator .Nav-item:nth-child(5).is-active:after { left: 80%; }

.with-indicator .Nav-item:nth-child(1).is-active ~ .Nav-item:last-child:after {

  left: 0;

}

.with-indicator .Nav-item:nth-child(2).is-active ~ .Nav-item:last-child:after {

  left: 20%;

}

.with-indicator .Nav-item:nth-child(3).is-active ~ .Nav-item:last-child:after {

  left: 40%;

}

.with-indicator .Nav-item:nth-child(4).is-active:after {

  left: 60%;

}

.with-indicator .Nav-item:nth-child(5).is-active:after {

  left: 80%;

}

Добавим динамики с помощью Sass:

// Переменный пунктов меню // Количество пунктов меню плюс 1 для сдвига $menu-items: 5; // Настоящее число пунктов меню $menu-items-loop-offset: $menu-items — 1; // Умножаем на 1% чтобы перевести в проценты $width: (100/$menu-items) * 1%; .with-indicator { @for $i from 1 through $menu-items-loop-offset { // Когда .Nav-item активен,сдвигаем индикатор к активному пункту. .Nav-item:nth-child(#{$i}).is-active ~ .Nav-item:last-child:after { left:($width*$i)-$width; } .Nav-item:nth-child(#{$i}).is-active ~ .Nav-item:last-child:before { left:($width*$i)+($width/2)-$width; /* сдвигаем треугольник на активный пункт меню. */ } } // конец цикла @for

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

// Переменный пунктов меню

// Количество пунктов меню плюс 1 для сдвига

$menu-items: 5;

// Настоящее число пунктов меню

$menu-items-loop-offset: $menu-items — 1;

// Умножаем на 1% чтобы перевести в проценты

$width: (100/$menu-items) * 1%;

 

.with-indicator {

  @for $i from 1 through $menu-items-loop-offset {

    // Когда .Nav-item активен,сдвигаем индикатор к активному пункту.

    .Nav-item:nth-child(#{$i}).is-active ~ .Nav-item:last-child:after {

      left:($width*$i)-$width;

    }

    

   .Nav-item:nth-child(#{$i}).is-active ~ .Nav-item:last-child:before {

      left:($width*$i)+($width/2)-$width; /* сдвигаем треугольник на активный пункт меню. */

    }

  } // конец цикла @for

Заметим, что у треугольника :before дополнительный сдвиг на полширины. Добавим ко всему этому анимации и еще один цикл for для определения местоположения индикатора. Метод основан на определении текущей страницы. При наведении мыши на пункт меню, т.е. :hover, индикатор будет двигаться. Но как только вы уберете мышь, состояние элемента снова станет is-active. Красивый и аккуратный способ сделать индикатор меню без JavaScript.

// Когда :last-child is-active или :hover необходимо использовать !important для перезаписи значения @for $i from 1 through $menu-items-loop-offset { // Когда пункт :hover, сдвигаем на него индикатор. .Nav-item:nth-child(#{$i}):hover ~ .Nav-item:last-child:after { left:($width*$i)-$width !important; } .Nav-item:nth-child(#{$i}):hover ~ .Nav-item:last-child:before{ left:($width*$i)+($width/2)-$width !important; } } // конец цикла @for // Убедимся, что значения возвращаются на last-child .Nav-item { &:last-child { &:hover, &.is-active { &:before { left: (100%-$width)+($width/2) !important; } &:after{ left: 100%-$width !important; } } } }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

// Когда :last-child is-active или :hover необходимо использовать !important для перезаписи значения

@for $i from 1 through $menu-items-loop-offset {

  // Когда пункт :hover, сдвигаем на него индикатор.

  .Nav-item:nth-child(#{$i}):hover ~ .Nav-item:last-child:after {

    left:($width*$i)-$width !important;

  }

 

  .Nav-item:nth-child(#{$i}):hover ~ .Nav-item:last-child:before{

    left:($width*$i)+($width/2)-$width !important;

  }

} // конец цикла @for

 

// Убедимся, что значения возвращаются на last-child

.Nav-item {

  &:last-child {

    &:hover, &.is-active {

      &:before {

        left: (100%-$width)+($width/2) !important;

      }

      &:after{

        left: 100%-$width !important;

      }

    }        

  }

}

Результат

Вот и все! Анимированный индикатор меню без JavaScript.

Источник: //css-tricks.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Drupal: Модуль Menu Trails — установка активного пункта меню при просмотре материала

В друпале есть давняя проблема в системе меню — если меню состоит из ссылок на различные списки материалов (например Новости | Статьи | Предложения), то при просмотре одного из списка соответствующий пункт меню выделяется, а если из списка перейти в ноду, то выделение теряется:

Если меню создано вручную или с помощью Taxonomy Menu и ведёт на выборку таксономии, то поможет модуль Taxonomy Menu Trails, а если пункты меню ссылаются например на представления Views, то поможет Menu Trails, который сейчас и рассмотрим.

После установки, модуль добавляет новый таб в разделе управления меню (admin/build/menu) — Trails, в котором располагаются все настройки:

Здесь нужно указать:

Menutrails Menu — меню, в котором нужно устанавливать активный пункт.

Set breadcrumbs? — если отмечено, то хлебные крошки будут заполнены на основе активного пункта меню.

Типы материалов — пункты меню, которые будут выделятся при просмотре соответствующих типов материала. Т.е мы как бы говорим модулю — при просмотре материала Новость, выделять пункт меню Новости.

Categories: … — пункты меню, которые будут выделятся при просмотре материала с соответствующим термином. Здесь мы говорим модулю, что например при просмотре материала с присвоенным термином Мировые, выделять пункт меню Мировые новости.

Важное замечание

Модуль добавлять класс active-trail только для соответствующего элемента <li>, класс active для ссылки в нём не присваивается. Стандартная тема Garland не умеет подсвечивать такие ссылки, и чтобы это исправить, в css файл нужно добавить что-нибудь типа:

li.active-trail > a {
  font-weight: bold;
}

Для Drupal 7 можно воспользоваться похожим модулем — Menu position.

Написанное актуально для

Menu Trails 6.x-1.1

Меню в WordPress. Работа с классом Walker

Урок 4

Функционал меню появился в версии WordPress 3.0. До этого вывод навигации обычно осуществлялся при помощи функций wp_list_categories() и wp_list_pages(). Конечно, иногда бывает нужно вывести категории сайта в виде меню и ещё чтобы дочерние категории были в виде выпадающих списков, но гораздо удобнее, если каждый элемент меню можно добавить, изменить или удалить по отдельности в админке сайта.

Также в меню WordPress вы можете изменять порядок элементов банальным перетаскиванием.

Что будет в видеоуроке?

Чтобы скачать тему WordPress, которая получилась у нас в процессе этого урока, необходимо приобрести курс.

В этом уроке, который длится практически 40 минут, мы сделаем первые шаги по интеграции интерфейса в админке WordPress, а именно – запрограммируем Меню нашей вёрстки:

А непосредственно в админке оно будет выглядеть вот так:

Я думаю, что вы уже знакомы с этим стандартным WordPress интерфейсом, но если нет:

  • Этот интерфейс позволяет очень легко добавлять в меню как любой элемент контента (запись, рубрика, метка, страница и так далее), так и произвольную внешнюю ссылку.
  • Порядок или вложенность элементов легко меняется перетаскиванием.
  • В любой элемент можно легко добавить произвольный CSS-класс(ы), target="_blank, nofollow.

Что делать, когда мы сталкиваемся с вёрсткой меню на бутстрап?

Если вы не в курсе, Bootstrap – это такой фреймворк (читайте – готовые CSS и JS), призванный упростить верстальщикам жизнь.

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

Сам я к нему отношусь нормально – лишь бы верстали нормально.

Но прикол в том, что когда мы переносим свёрстанное на бутстрап меню в WordPress тему, мы сталкиваемся с отдельными кругами боли.

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

Давайте подробно рассмотрим весь процесс добавления меню. Для начала переходим в админке во Внешний вид > Меню… У вас нет такого пункта? Окей, значит вашей темой меню не поддерживаются, сейчас мы это исправим, рассмотрим даже два способа.

Способ 1. Включение меню через add_theme_support()

Для активации функционала меню вы можете использовать функцию add_theme_support(). Всё просто и легко, вставляем этот код в functions.php текущей темы и да, после этого мы можем зайти в админку и начать создавать меню.

add_theme_support( 'menus' );

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

Регистрация меню WordPress (а точнее областей меню) – это самый частый способ, который вам встретится при работе с меню, его создании и выводе на сайте.

В двух словах, область меню — это такая условная область, которая предназначена для вывода меню (объяснил 😹). Как всё это происходит по порядку:

  1. Сначала мы регистрируем область темы. После этого у нас сразу появляется функционал меню Внешний вид > Меню. Допустим, мы создадим две области темы: «Шапка сайта» и «Левый сайдбар».
  2. Затем, при создании меню мы указываем область темы, в которой хотим отображать данное меню. Также можно указать несколько областей сразу.
  3. И завершающий шаг. В разных частях темы задаём области и выводим в них соответствующие меню.

Не знаю, насколько понятно я всё это объяснил в теории, но на практике определенно будет легко. Итак, для того, чтобы зарегистрировать область темы, нам понадобится функция register_nav_menus(). Давайте тогда создадим две области, о которых я писал выше: «Шапка сайта» и «Левый сайдбар».

Да, код — в functions.php.

register_nav_menus(
	array(
		'head_menu' => 'Шапка сайта', // id области => Название области
		'side_menu' => 'Левый сайдбар'
	)
);

Давайте теперь разберемся, как создавать и как управлять меню. В принципе в админке WordPress всё сделано интуитивно, но на всякий случай мы всё подробно рассмотрим.

Итак, переходим во Внешний вид > Меню, указываем в поле название нового меню и нажимаем кнопку Создать меню.

  • Для того, чтобы добавить один или несколько элементов в меню, просто отметьте их галочкой и нажмите кнопку Добавить в меню.
  • Если вы не видите нужной вам страницы в списке, перейдите на вкладку «Все» либо воспользуйтесь вкладкой «Поиск».
  • Для того, чтобы добавить в меню ссылку на главную страницу, в списке страниц перейдите на вкладку «Все», отметьте галочкой элемент «Главная» и добавьте его в меню.
  • По умолчанию в меню можно добавлять только страницы, рубрики и произвольные ссылки. Если вам нужно добавить в меню произвольный тип поста, элементы созданной вами таксономии или записи, перейдите по этой ссылке.
  • Вы можете изменять порядок элементов перетаскиванием.
  • Также, чуть перетащив элемент вправо, его можно сделать дочерним для вышестоящего элемента, то есть это позволит вам создать многоуровневое меню на сайте. Дочерние элементы можно будет реализовать в виде выпадающего списка на сайте.
  • Если отметить галочкой «Автоматически добавлять в это меню новые страницы верхнего уровня», то, после публикации новох страниц, они автоматически будут добавляться в конец этого меню (тогда такое меню лучше будет добавлять в сайдбар, так как в шапке может просто не хватить места).
  • Отметьте галочкой области темы, в которой вы хотите отобразить это меню.
  • Также вы можете включить дополнительные настройки для элементов меню: Цель ссылки, Атрибут title, Классы CSS, Отношение к ссылке (XFN), Описание, нажав на вкладку «Настройки экрана» в верхней правой части экрана и отметив соответствующие галочки.

В админке:

На сайте:

Тут мы используем стандартную тему WordPress Twenty Twenty One.

Поддержка таксономий и типов постов

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

Как добавить туда какой-то произвольный зарегистрированный тип записи или таксономию?

И у тех и у других принцип один и тот же — при регистрации таксономии (register_taxonomy()) или типа поста (register_post_type()) значение параметра функции show_in_nav_menus должно быть true.

register_taxonomy( 'mytaxonomy',
	array( 'post' ),
	array(
		...
		'show_in_nav_menus' => true,
		...
	)
);
$args = array(
	...
	'show_in_nav_menus' => true,
	...
);
 
register_post_type( 'product', $args );

Вывод меню на сайте

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

1. Используем для вывода ID / ярлык / название меню

Если вы всё-таки захотите использовать этот первый способ, я рекомендую в качестве параметра задавать только ID меню. Читайте подробнее о том, как узнать ID меню или его ярлык.

В итоге имеем:

$args = array(
	'menu'	=> 381
);
wp_nav_menu( $args );

2. Использование зарегистрированных областей темы для вывода меню

На первый взгляд, этот пример может показаться сложнее, потому что сначала нам требуется зарегистрировать область темы (в этом посту мы уже зарегали две области — head_menu (Шапка сайта) и side_menu (Левый сайдбар), затем, при создании меню, нам надо присвоить его одной из этих областей (мы уже создали с вами меню и присвоили его области head_menu) и только после этого мы можем выводить область с содержащимся в ней меню на сайте.

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

А если вы разработчик тем WordPress, то первый способ, который просто выводит определенное меню из базы данных, для вас и вовсе не подойдет.

wp_nav_menu( array( 
	'theme_location' => 'head_menu'
) );

Функция wp_nav_menu() имеет большое количество параметров, все они описаны в документации этой функции.

3. Вставляем меню в сайдбар (в виде виджета)

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

Рассмотрение класса Walker безусловно заслуживает отдельного поста. Сейчас я покажу лишь простой пример, который позволит вам использовать этот класс при выводе меню, тем самым подстраивая его под свой сайт, меняя HTML-разметку, добавляя различные атрибуты элементам и PHP-условия.

Для начала нужно создать класс, у меня это True_Walker_Nav_Menu, код которого я вставил в functions.php текущей темы.

Хочу сказать, что в этом примере класс не будет делать никаких изменений, он выведет элементы меню в их первоначальном виде. Зато вы сможете использовать этот класс как шаблон, если вам понадобится сделать какие-то изменения в структуре меню.

class True_Walker_Nav_Menu extends Walker_Nav_Menu {
	/*
	 * Позволяет перезаписать <ul>
	 */
	function start_lvl(&$output, $depth) {
	// для WordPress 5.3+
	// function start_lvl( &$output, $depth = 0, $args = NULL ) {
		/*
		 * $depth – уровень вложенности, например 2,3 и т д
		 */ 
		$output .= '<ul>';
	}
	/**
	 * @see Walker::start_el()
	 * @since 3.0.0
	 *
	 * @param string $output
	 * @param object $item Объект элемента меню, подробнее ниже.
	 * @param int $depth Уровень вложенности элемента меню.
	 * @param object $args Параметры функции wp_nav_menu
	 */
	function start_el( &$output, $item, $depth, $args ) {
	// для WordPress 5.3+
	// function start_el( &$output, $item, $depth = 0, $args = NULL, $id = 0 ) {
		global $wp_query;           
		/*
		 * Некоторые из параметров объекта $item
		 * ID - ID самого элемента меню, а не объекта на который он ссылается
		 * menu_item_parent - ID родительского элемента меню
		 * classes - массив классов элемента меню
		 * post_date - дата добавления
		 * post_modified - дата последнего изменения
		 * post_author - ID пользователя, добавившего этот элемент меню
		 * title - заголовок элемента меню
		 * url - ссылка
		 * attr_title - HTML-атрибут title ссылки
		 * xfn - атрибут rel
		 * target - атрибут target
		 * current - равен 1, если является текущим элементом
		 * current_item_ancestor - равен 1, если текущим (открытым на сайте) является вложенный элемент данного
		 * current_item_parent - равен 1, если текущим (открытым на сайте) является родительский элемент данного
		 * menu_order - порядок в меню
		 * object_id - ID объекта меню
		 * type - тип объекта меню (таксономия, пост, произвольно)
		 * object - какая это таксономия / какой тип поста (page /category / post_tag и т д)
		 * type_label - название данного типа с локализацией (Рубрика, Страница)
		 * post_parent - ID родительского поста / категории
		 * post_title - заголовок, который был у поста, когда он был добавлен в меню
		 * post_name - ярлык, который был у поста при его добавлении в меню
		 */
		$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
 
		/*
		 * Генерируем строку с CSS-классами элемента меню
		 */
		$class_names = $value = '';
		$classes = empty( $item->classes ) ? array() : (array) $item->classes;
		$classes[] = 'menu-item-' . $item->ID;
 
		// функция join превращает массив в строку
		$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
		$class_names = '';
 
		/*
		 * Генерируем ID элемента
		 */
		$id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
		$id = strlen( $id ) ? '' : '';
 
		/*
		 * Генерируем элемент меню
		 */
		$output .= $indent . '<li' . $id . $value . $class_names .'>';
 
		// атрибуты элемента, title="", rel="", target="" и href=""
		$attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
		$attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
		$attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
		$attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : '';
 
		// ссылка и околоссылочный текст
		$item_output = $args->before;
		$item_output .= '<a'. $attributes .'>';
		$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
		$item_output .= '</a>';
		$item_output .= $args->after;
 
 		$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
	}
}

Если вам нужны ещё параметры объектов $item, смотрите документацию функции wp_get_nav_menu_items(), которая кстати является ещё одним нестандартным способом вывода меню в WordPress.

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

$args = array(
	'theme_location' => 'head_menu',
	'walker'=> new True_Walker_Nav_Menu() // этот параметр нужно добавить
 
);
wp_nav_menu( $args );

Вот и всё, теперь, редактируя класс, вы сможете отредактировать и ваше меню. Всё просто. Если не получается, то смотрите про волкеры во второй половине видеоурока.

Купить курс

  • 18 видеоуроков
  • Можно скачать готовый код после каждого урока
  • Уроки актуальны под последние версии WordPress
  • Можно начать проходить курс сразу же после оплаты
  • Достаточно базовых знаний HTML и CSS, чтобы пройти курс
  • Доступ навсегда
  • Единоразовый платёж

5000 р

Псевдокласс :hover | CSS | WebReference

Определяет стиль элемента при наведении на него курсора мыши, но при этом элемент еще не активирован, иными словами кнопка мыши не нажата.

Синтаксис 

Селектор:hover { ... }

Обозначения

ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>hover</title> <style> a:link { color: #0000d0; /* Цвет ссылок */ padding: 2px; /* Поля вокруг текста */ } a:hover { background: #786b59; /* Цвет фона под ссылкой */ color: #ffe; /* Цвет ссылки */ } </style> </head> <body> <p><a href=»page/1.html»>Ссылка 1</a></p> <p><a href=»page/2.html»>Ссылка 2</a></p> <p><a href=»page/3.html»>Ссылка 3</a></p> </body> </html>

В данном примере псевдокласс :hover применяется к ссылке (элементу <a>), при этом меняется цвет ссылки и фона под ней.

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>hover</title> <style> ul { width: 180px; /* Ширина меню */ list-style: none; /* Для списка убираем маркеры */ margin: 0; /* Нет отступов вокруг */ padding: 0; /* Убираем поля вокруг текста */ font-family: Arial, sans-serif; /* Рубленый шрифт для текста меню */ font-size: 10pt; /* Размер названий в пункте меню */ } li ul { position: absolute; /* Подменю позиционируются абсолютно */ display: none; /* Скрываем подменю */ margin-left: 165px; /* Сдвигаем подменю вправо */ margin-top: -2em; /* Сдвигаем подменю вверх */ } li a { display: block; /* Ссылка как блочный элемент */ padding: 5px; /* Поля вокруг надписи */ text-decoration: none; /* Подчеркивание у ссылок убираем */ color: #666; /* Цвет текста */ border: 1px solid #ccc;/* Рамка вокруг пунктов меню */ background-color: #f0f0f0; /* Цвет фона */ border-bottom: none; /* Границу снизу не проводим */ } li a:hover { color: #ffe; /* Цвет текста активного пункта */ background-color: #5488af; /* Цвет фона активного пункта */ } li:hover ul { display: block; /* При выделении пункта курсором мыши отображается подменю */ } .brd { border-bottom: 1px solid #ccc; /* Линия снизу */ } </style> </head> <body> <ul> <li><a href=»#»>Русская кухня</a> <ul> <li><a href=»#»>Бефстроганов</a></li> <li><a href=»#»>Гусь с яблоками</a></li> <li><a href=»#»>Крупеник новгородский</a></li> <li><a href=»#»>Раки по-русски</a></li> </ul> </li> <li><a href=»#»>Украинская кухня</a> <ul> <li><a href=»#»>Вареники</a></li> <li><a href=»#»>Жаркое по-харьковски</a></li> <li><a href=»#»>Капустняк черниговский</a></li> <li><a href=»#»>Потапцы с помидорами</a></li> </ul> </li> <li><a href=»#»>Кавказская кухня</a> <ul> <li><a href=»#»>Суп-харчо</a></li> <li><a href=»#»>Лилибдж</a></li> <li><a href=»#»>Чихиртма</a></li> <li><a href=»#»>Шашлык</a></li> </ul> </li> <li><a href=»#»>Кухня Средней Азии</a></li> </ul> </body> </html>

В данном примере псевдокласс :hover добавляется к элементу списка (<li>) для создания двухуровневого меню.

Примечание

В браузере Internet Explorer до версии 7 псевдокласс :hover работает только для ссылок.

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

В таблице браузеров применяются следующие обозначения.

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

Число указывает версию браузера, начиная с которой свойство поддерживается.

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 31.08.2017

Редакторы: Влад Мержевич

Как выделить определенный пункт меню?

Иногда возникает необходимость выделить определенный пункт меню. Вы можете выделить меню, добавив другой цвет фона, цвет текста и т. Д. К конкретному пункту меню с помощью настраиваемого CSS. Чтобы применить собственный CSS, вам необходимо добавить класс CSS для меню. Ниже приведены шаги по добавлению класса CSS в меню и его выделению с помощью настраиваемого CSS.

Шаг 1 — На панели управления WordPress перейдите в Внешний вид> Меню .
Шаг 2 — Щелкните Screen Options и установите флажок CSS Classes .
Шаг 3 — Щелкните по пункту меню, который необходимо выделить.
Шаг 4 — Добавьте класс CSS в пункт меню и сохраните изменения в меню.

После добавления класса CSS вы можете добавить CSS по отношению к этому классу. Убедитесь, что вы добавили точку (.) Перед классом CSS при написании кода CSS. Ниже приведен пример кода CSS, который вы можете попробовать.Обратите внимание, что используемый класс CSS — выделение меню

Ниже CSS создаст простую кнопку из пункта меню:

 .menu-highlight
{
 фон: # d3d3d3;
 радиус границы: 35 пикселей;
 отступ: 0px 20px;
 высота строки: 50 пикселей! важно;
 маржа: авто;
}

Для приведенного выше CSS выделенное меню будет выглядеть, как показано на снимке экрана ниже —
Ниже CSS добавит выделенную кнопку в пункт меню: 

.меню-выделите {
цвет: #ffffff! important;
фон: прозрачный;
цвет границы: # 1172c4;
стиль границы: сплошной;
ширина границы: 2 пикселя;
радиус границы: 50 пикселей;
отступ: 0px 10px! important;
переход: все 0,2 с линейные;
высота строки: 45 пикселей;
}
.menu-выделить {
цвет: # 1172c4! important;
}
.menu-highlight a: hover {
цвет: #ffffff! important;
фон: # 1172c4;
цвет границы: # 1172c4;
}
li.menu-highlight: hover a {
цвет: #ffffff! important;
}
.menu-highlight: active {
радиус границы: 22 пикселя;
}

Для приведенного выше CSS выделенное меню будет выглядеть, как показано на скриншоте ниже —

Дополнительные примечания:

  • Этот CSS можно вставить в Настройщик ▸ Дополнительный CSS, как описано здесь.
  • Вы можете настроить код CSS, чтобы изменить цвета и внешний вид выделенного пункта меню.

Выделить текущий выбранный пункт меню Пример угловой маршрутизации

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

Обратите внимание, что пример Angular, показанный здесь, использует Angular 9 и Bootstrap 4.

Директива RouterLink в Angular

Директива Angular RouterLink отслеживает, активен ли связанный маршрут элемента в настоящее время, она позволяет вам указать один или несколько CSS классы для добавления к элементу, когда связанный маршрут активен.

Вы можете назначить класс CSS, как указано ниже:

 routerLinkActive = "CSS_CLASS"
Вы можете указать более одного класса CSS, используя строку или массив, разделенные пробелами.
 routerLinkActive = "CSS_CLASS1 CSS_CLASS2"

или

[routerLinkActive] = "['CSS_CLASS1', 'CSS_CLASS2']»

Выделить текущий выбранный пункт меню — пример Angular + Bootstrap

В среде Bootstrap есть класс active CSS, который можно использовать с routerLinkActive для выделения выбранного меню элемент.Вот пример кода меню.
  • Полный пример см. В этой публикации Angular Routing Concepts With Example .

Это все для этой темы. Выделить выбранный в данный момент пункт меню. Пример угловой маршрутизации . Если у вас есть какие-либо сомнения или предложения, пожалуйста, оставьте комментарий. Спасибо!

>>> Вернуться на страницу Angular Tutorial.

Связанные темы

  1. Перенаправление пути в угловой маршрутизации
  2. Использование RouterLinkActiveOptions для исправления выделенной проблемы ссылки
  3. Перейдите к маршруту программно в Angular
  4. Вложенный маршрут Дочерний маршрут) в Angular
  5. Угловая двусторонняя привязка данных с примерами

Вам также может понравиться —

  1. Angular Custom Two-Way Data Binding
  2. Angular @Input and @Output Example
  3. Angular — Call One Служба от другого
  4. Создание нового компонента в Angular
  5. Предопределенные функциональные интерфейсы в Java
  6. Разница между StackOverflowError и OutOfMemoryError в Java
  7. Асинхронная запись файла Java-программа
  8. Передача аргументов в метод getBean () весной

Как выделить пункт меню с помощью CSS • Блог справки WordPress 9 0001

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

Мы сделаем это , применив некоторый CSS к этому элементу меню , и на этот раз я сделаю это с активной темой Astra, так как это самая загружаемая тема WordPress, но этот метод действителен для любой темы WordPress.

Давайте рассмотрим это шаг за шагом, вы увидите, насколько это просто.

Показать дополнительные свойства меню

Прежде чем мы начнем, первое, что нужно сделать, это убедиться, что расширенные свойства будут отображаться в меню , потому что по умолчанию не все они активны в WordPress.

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

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

Добавьте пользовательский класс в меню, которое мы хотим выделить

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

После определения мы добавим новый класс , который мы назовем выделенным меню , и опубликуем изменения.

Создание собственных стилей классов CSS

Мы должны создать этот класс, который мы определили, применяя стили по своему вкусу.

Для этого, не выходя из настройщика, мы перешли в раздел « Additional CSS ».

Здесь мы можем применить стиль к нашему выделенному меню. Пример:

 
 
.выделенное-меню
{
фон: # d3d3d3;
радиус границы: 35 пикселей;
отступ: 0px 20px;
высота строки: 50 пикселей;
}  
  Язык кода: CSS (css)

Это будет немедленно применено в предварительном просмотре, как , которое мы видели выше .

Другой пример:

 
 
.highlighted-menu {
цвет: #ffffff;
фон: прозрачный;
цвет границы: # 1172c4;
стиль границы: сплошной;
ширина границы: 2 пикселя;
радиус границы: 50 пикселей;
отступ: 0px 10px;
переход: все 0.2с линейный;
высота строки: 45 пикселей;
}
.destacar-menu a {
цвет: # 1172c4
}
.destacar-menu: hover {
цвет: #ffffff;
фон: # 1172c4;
цвет границы: # 1172c4;
}
li.destacar-menu: hover a {
цвет: #ffffff;
} º
.destacar-menu: active {
радиус границы: 22 пикселя;
}  
  Язык кода: CSS (css)

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

Это будет выглядеть так:

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

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

Прочтите этот пост на испанском языке: Cómo destacar un elemento del menú con CSS

Связанные

Поделитесь этим постом, это бесплатно !:

Анимированные основные моменты активного меню в VueJS

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

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

В итоге я создал аккуратную логику активного выделения меню, используя Composition API и стили CSS.

Я подумал, что поделюсь своим решением — вот что я в итоге создал.

Хорошо, давайте начнем кодировать.

Создание нашего меню

Итак, первое, что мы хотим сделать, это создать наше меню.Мы будем использовать элемент

alexxlab

Синемаграфия на iphone: Синемаграфия в Instagram / Паразайт

Размеры css: Как задать ширину html страницы?

Брошюры примеры: 3300+ брошюры Шаблоны для бесплатной загрузки на Pngtree

Подбор шрифтовой пары: 404-Ошибка: 404

Как в инстаграмм сделать личный блог: Как сделать личный блог в Инстаграме: на телефоне, через Фейсбук

Буквы в стиле готика: Гарнированный готический шрифт стиля, помечает буквами A Иллюстрация вектора

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *