Меню активный пункт css: html — Подсветка выбранного пункта меню

Leave a Comment / Css / By /

css — Как выделить текущий пункт меню?

Задать вопрос

Вопрос задан

Изменён 7 лет 3 месяца назад

Просмотрен 2k раз

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

Код меню:

<nav>         
    <ul>
        <li>
            <a href="#">Главная</a>
        </li>
        <li>
            <a href="#">Англия</a>
        </li>
    </ul>                    
</nav>

css

#primary-menu {background-color:#2a2a2a; }
#primary-menu ul {margin:0; padding:0; list-style:none; text-align:center; }
#primary-menu li {position:relative;  padding:16px 20px 10px 0 ;  font-size:16px; display:block;display:inline-block; }
#primary-menu li a {color:#ffffff; text-transform:uppercase; font-weight:bold;}
#primary-menu li:last-child {padding-right:0;}
#primary-menu li a:hover {border-top: 5px solid yellow; padding-top: 13px;  color:#ffffff; text-decoration:none;

Вот сам css код меню, сайт на wordpress

  • css
  • меню

0 

#primary-menu li. current-menu-item a {
    border-top: 5px solid yellow;
    padding-top: 13px;
    color: #ffffff;
    text-decoration: none;
}

3

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Joomla как выделить активный пункт меню (стиль active)

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

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

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

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

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

.menu_gm li.active a {
text-decoration: none;
cursor: default;
color: #FFFFFF !important;
background-color: #F16512;
}

 

.menu_gml li.active a {} – это стиль для активного пункта меню (точнее активной ссылки a) на основе списка ul, строка li, с классом menu_gm. Обратите внимание, что стиль работает без включения в него идентификатора списка ul. Для тех, кто немного знаком с таблицами стилей CSS , я думаю все понятно. Просмотреть код элемента возможно при использовании браузера гугл-хром, нажав правой кнопкой мышки на требуемом  элементе и выбрав пункт «просмотр кода элемента». В появившемся окне мы увидим и код элемента и определенные ему стили. Отключив галочки напротив стиля можно понаблюдать, как влияет то или иное свойство на вид элементов страницы.

Эта процедура доступна и для других браузеров.

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

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

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

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

CSS: как изменить цвет меню активной страницы навигации

Задать вопрос

спросил

Изменено 7 лет назад

Просмотрено 204 тыс.

раз

Я пытаюсь изменить цвет активной или текущей навигационной ссылки, выбранной пользователем на моем веб-сайте. Что я делаю неправильно? Спасибо.

Пока CSS выглядит так:

 div.menuBar
{
   семейство шрифтов: BirchStd;
   размер шрифта: 40px;
   высота строки: 40px;
   вес шрифта: полужирный;
   выравнивание текста: по центру;
   межбуквенный интервал: -0.1em;
}
div.menuBar li {стиль списка: нет; отображение: встроенное;}
div.menuBar li a:active{color:#FF0000;}
div.menuBar ul{margin:0;}

И мой HTML вызывает шаблон страницы для меню навигации, используя функцию включения PHP:
  • css
  • navigation

Я думаю, вы запутались в том, что делает селектор CSS

a:active . Это изменит цвет вашей ссылки только тогда, когда вы нажмете на нее (и только на время клика, то есть на то, как долго ваша кнопка мыши остается нажатой). Что вам нужно сделать, это ввести новый класс, например. .selected в свой CSS, и когда вы выбираете ссылку, обновите выбранный пункт меню новым классом, например.

 <дел>
    <ул>
        
  • ГЛАВНАЯ
    • 
        
  • ПОРТФОЛИО
    • 
        ....
    // определенный CSS для вашего меню div.menuBar li.selected {color: #FF0000; } // более общий CSS li.selected {цвет: #FF0000; }

    Вам потребуется обновить страницу шаблона, чтобы принять параметр selectedPage .

    2

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

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

     а. актив {цвет: #f00}
<ул>
    
  • ГЛАВНАЯ
    • 
    
  • ПОРТФОЛИО
    • 
    
  • О
    • 
    
  • КОНТАКТ
    • 
    
  • МАГАЗИН
    •

    Добавить ID текущий для активной/текущей страницы:

     
    
  <ул>
  
  • ГЛАВНАЯ
    • 
  
  • ПОРТФОЛИО
    • 
  
  • О
    • 
  
  • КОНТАКТ
    • 
  
  • МАГАЗИН
    • 
 
#текущий {цвет: #ff0000; }

    Оформление меню | Web Accessibility Initiative (WAI)

    в учебнике по меню

    Обзор

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

    Общие соображения

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

    Местоположение

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

    Идентификация

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

    Подумайте о том, чтобы метки меню были видны всем. Например, в этих руководствах «Учебник по меню», «Все руководства», «На этой странице» — это метки меню, представленные в виде видимых заголовков, доступных для всех пользователей.

    Читаемость

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

    Размер

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

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

    Состояние по умолчанию

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

    Состояния наведения и фокусировки

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

    Код: CSS
     nav a:hover,
навигация: фокус {
цвет: #036;
цвет фона: #fff;
оформление текста: подчеркивание;
}

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

    Активное состояние

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

    Код: CSS
     навигация: активная {
цвет: #fff;
цвет фона: #024;
оформление текста: подчеркивание;
}

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