Menu css: Горизонтальное меню на CSS

alexxlab

Псевдокласс :hover | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+8.0+1.0+4.0+1.0+1.0+

Краткая информация

ПрименяетсяНе определено
Ссылка на спецификациюhttp://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Описание

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

Синтаксис

элемент:hover { … }

Значения

Нет.

Пример 1

HTML5CSS2.1IECrOpSaFx

<!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="1. html">Ссылка 1</a></p>
  <p><a href="2.html">Ссылка 2</a></p>
  <p><a href="3.html">Ссылка 3</a></p> 
 </body>
</html>

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

Рис. 1. Результат использования псевдокласса :hover для ссылок

Пример 2

HTML5CSS2.1IECrOpSaFx

 
<!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="russian.html">Русская кухня</a>
    <ul> 
     <li><a href="linkr1.html">Бефстроганов</a></li> 
     <li><a href="linkr2.html">Гусь с яблоками</a></li> 
     <li><a href="linkr3.html">Крупеник новгородский</a></li> 
     <li><a href="linkr4.html">Раки по-русски</a></li> 
    </ul> 
   </li> 
   <li><a href="ukrainian.html">Украинская кухня</a> 
    <ul> 
     <li><a href="linku1.html">Вареники</a></li> 
     <li><a href="linku2.html">Жаркое по-харьковски</a></li> 
     <li><a href="linku3.html">Капустняк черниговский</a></li> 
     <li><a href="linku4.html">Потапцы с помидорами</a></li> 
    </ul> 
   </li>
   <li><a href="caucasus.
 
 html">Кавказская кухня</a> 
    <ul> 
     <li><a href="linkc1.html">Суп-харчо</a></li> 
     <li><a href="linkc2.html">Лилибдж</a></li> 
     <li><a href="linkc3.html">Чихиртма</a></li> 
     <li><a href="linkc4.html">Шашлык</a></li> 
    </ul> 
   </li> 
   <li><a href="asia.html">Кухня Средней Азии</a></li> 
  </ul>
 </body>
</html>

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

Рис. 2. Использование :hover для создания меню

Браузеры

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

Псевдоклассы

CSS по теме

  • Псевдокласс :hover

Статьи по теме

  • Атрибут data-*
  • Всплывающая подсказка на CSS
  • Наложение и порядок слоёв
  • Полоски при наведении
  • Псевдоклассы
  • Рамки и границы
  • Свойства ссылок
  • Цвет ссылок

Рецепты CSS

  • Как изменить вид ссылки при наведении на нее курсора мыши?
  • Как сделать, чтобы цвет рамки вокруг изображения-ссылки менялся при наведении на него курсора мыши?
  • Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?
  • Как сделать, чтобы строка таблицы меняла цвет при наведении на нее курсора мыши?

CSS для меню WalkMe — Справочный центр WalkMe

Последнее обновление 2 июня 2022 г.

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

Краткий обзор

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

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

При вводе текста в окне Custom CSS WalkMe отображает параметры автозаполнения для селекторов, свойств и значений. Глобальный CSS добавляется в меню Настройка , доступ к которому осуществляется из панели администратора.

Перед вводом правил в Настройка 9На вкладке CSS меню 0014 можно проверить, работает ли правило CSS, вставив его на вкладку Custom CSS в Flow Tracker.

Как это работает

Меню WalkMe можно настроить только глобально, так как существует только одно Меню. Любое правило CSS для меню должно начинаться со следующего идентификатора: #walkme-menu. Это правило может быть дополнительно сужено по типу #walkme-menu.walkme-penguin. В эту цепочку могут быть добавлены дополнительные компоненты плеера.

Например:

#walkme-menu.walkme-penguin .walkme-title ( см. ниже полный список классов ).

Использование
!important

По умолчанию дизайн темы WalkMe переопределяет любые другие изменения дизайна меню. Чтобы CSS применялся правильно, правило CSS должно содержать !important , чтобы оно переопределяло стиль по умолчанию.

Например:

.walkme-out-wrapper { color: #000 !important; }

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

раздел Редактируемые атрибуты Применимые стили меню
.Walkme-Out-Wrapper Этот элемент окружает все меню WalkMe. Вы сможете редактировать:
  • радиус границы
 Дунай
Колорадо
Миссисипи
.walkme-in-wrapper Этот элемент окружает все меню WalkMe. Вы сможете редактировать:
  • радиус границы
  • высота и ширина
  • фон
  • граница
  • радиус границы
  • коробка-тень
 Дунай
Колорадо
Миссисипи
.walkme-название Этот элемент содержит текст. Положение по умолчанию является абсолютным. Вы сможете редактировать:
  • цвет шрифта
  • размер шрифта
  • семейство шрифтов
 Дунай
Колорадо
Миссисипи
. walkme-bar Этот элемент содержит текст. Вы сможете редактировать:
  • цвет фона
  • ширина
 Дунай
Миссисипи
.walkme-вопросительный знак Этот элемент содержит знак вопроса с левой стороны. Вопросительный знак сам по себе является символом и поэтому может быть разработан с использованием:
  • цвет шрифта
  • размер шрифта
  • семейство шрифтов
  • ширина
  • прокладка
 Колорадо
.walkme-стрелка Этот элемент содержит стрелку справа от текста. Положение по умолчанию является абсолютным. Стрелка является символом и поэтому может быть разработана с использованием:
  • цвет шрифта
  • размер шрифта
  • Семейство шрифтов
  • справа и снизу
 Миссисипи
#плеер Walkme Виджет треугольника Замбези представляет собой изображение. Чтобы изменить его цвет, необходимо создать новое изображение, загрузить его и заменить существующее изображение:
background-image: url(‘https://knowledge.walkme.com/download/thumbnails/6915638/puppy.png’) !важный;		 Замбези

Публикация изменений в CSS

Чтобы изменения в CSS вступили в силу, вам необходимо опубликовать их.

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

  • Органайзер меню
  • Любые изменения, которые вы применяете в меню Настройка (включая изменения виджета и пользовательского CSS)
  • Изменения, примененные к Настройки меню
  • Глобальные сегменты

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

Чтобы опубликовать изменения, внесенные в CSS, выполните «публикацию настроек» следующим образом:

  1. Нажмите  Publish  в панели администратора
  2. Откройте вкладку Публикация  
  3. Если все, что вы делаете, это публикуете изменения в CSS, отмените выбор всех элементов
  4. Нажмите  Опубликовать

Советы по вторникам Видео

Чтобы увидеть больше видеороликов о советах во вторник на WalkMe World, нажмите здесь.

Была ли эта статья полезной?

Спасибо за отзыв!

Bulma: Бесплатная современная CSS-инфраструктура с открытым исходным кодом на основе Flexbox

Меню

Простое меню , для любого типа вертикальной навигации

Меню Bulma представляет собой компонент вертикальной навигации, который включает в себя:

  • меню контейнер
  • информативные метки меню метки
  • интерактивный список меню списков, которые могут быть вложены до 2 уровней

Пример

HTML

 <в сторону>
  

    Общий
  

  <ул>
    
  • Панель управления
    • 
    
  • Клиенты
    • 
  
  
    
    Администрация
  
    
  <ул>
    
  • Настройки команды
    • 
    
  • 
      Управляйте своей командой
      <ул>
        
  • Члены
    • 
        
  • Плагины
    • 
        
  • Добавить участника
    • 
      
    
    
  • Приглашения
    • 
    
  • Настройки среды облачного хранилища
    • 
    
  • Аутентификация
    • 
  
  
    
    Транзакции
  
    
  <ул>
    
  • Платежи
    • 
    
  • Переводы
    • 
    
  • Баланс
    •

    Переменные #

    Имя

    Тип

    Значение

    Расчетное значение

    Расчетный тип

     $menu-item-color

    переменная

     hsl(0 , 0%, 29%)

    цвет

     $menu-item- радиус

    переменная

     $radius-small

    size

     $menu-item-hover-color

    переменная

     $text-strong 
     hsl(0, 0%, 21 %)

    цвет

     $ пункт меню при наведении на цвет фона

    переменная

     $background 
     hsl(0, 0%, 96%)

    цвет

     $menu-item-active-color

    переменная

     $link-invert 9027 0 
     цвет 
     
     $элемент меню -active-background-color 
     переменная
     hsl(229, 53%, 53%) 
     color
     $menu-list-border-left 
     размер
     1px сплошная $border 
     $список-меню- line-height 
     безразмерный
     $menu-list-link-padding 
     размер
     
     0.

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

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