Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.60/5: Рейтинг темы: голосов - 5, средняя оценка - 4.60
0 / 0 / 2
Регистрация: 06.01.2014
Сообщений: 118

Активное меню со скользящими линиями

02.04.2019, 10:51. Показов 978. Ответов 7

Студворк — интернет-сервис помощи студентам
Появилась задача для меню сделать меню со скользящими линиями.
По примеру из интернета сделала.
CSS
1
2
3
4
5
6
7
8
9
hr {
    height: 2px;
    margin: 0;
    width: 0;
    background: linear-gradient(90.38deg, #0D06DB 0%, #3984FF 100%);
    transform: matrix(-1, 0, 0, 1, 0, 0);
    border: none;
    transition: .3s ease-in-out;
}
HTML5
1
2
3
4
5
6
7
8
9
10
<nav>
                <hr>
            <ul class="menu">
               <li></li>
               <li></li>
              <li></li>
           </ul>
 
                <hr>
</nav>
JavaScript
1
2
3
4
5
6
7
8
$('.menu li').hover(function() {
        var left = $(this).offset().left - $('.menu').offset().left,
            width = $(this).width();
        $('hr').css({
            'margin-left': left,
            'width'      : width
        })
    }).first().mouseenter().mouseleave()
Теперь мне нужно к этомуц добавть еще выделение активного меню. То чно нахожу в интернете подходит для самих пунктов меню, а мне нужно это сделать для hr. Помогите сделать.
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
02.04.2019, 10:51
Ответы с готовыми решениями:

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

Активное меню с добавлением класса
Всем приветы. Подскажите плиз как добавлять класс к ссылке если на конце ничего или / Например такой вот код: $(function () {...

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

7
 Аватар для Уф
890 / 725 / 447
Регистрация: 13.07.2015
Сообщений: 2,277
02.04.2019, 13:09
заверни hr в div
HTML5
1
<div><hr></div>
и ему назначай стили
0
0 / 0 / 2
Регистрация: 06.01.2014
Сообщений: 118
02.04.2019, 13:58  [ТС]
Еще вопрос по тому скользящему меню что есть при hover. Как сделать чтоб изначально не было полос, пока мышкой не наведешь. Тоесть чтоб появлялось при hover и убиралась когда нет hover. А то она изначально на первом пункте меню.
0
 Аватар для Уф
890 / 725 / 447
Регистрация: 13.07.2015
Сообщений: 2,277
02.04.2019, 14:04
в чем смысл вообще этой полосы?
0
0 / 0 / 2
Регистрация: 06.01.2014
Сообщений: 118
02.04.2019, 14:16  [ТС]
Цитата Сообщение от Уф Посмотреть сообщение
в чем смысл вообще этой полосы?
Для красоты
Уже передумали делать активное меню с полосами. Хотябы сделать так чтобы появлялось только когда наводишь и потом исчезало
0
the hardway first
Эксперт JS
 Аватар для j2FunOnly
2475 / 1847 / 910
Регистрация: 05.06.2015
Сообщений: 3,610
02.04.2019, 14:38
garmoni,
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
$('.menu li').mouseenter(function() {
  var left = $(this).offset().left - $('.menu').offset().left,
    width = $(this).width();
 
  $('hr').css({
    'margin-left': left,
    'width': width
  });
});
 
$('.menu').mouseleave(function() {
  $('hr').attr('style', null);
});
https://jsfiddle.net/j2FunOnly/rujf23ad/
1
 Аватар для Уф
890 / 725 / 447
Регистрация: 13.07.2015
Сообщений: 2,277
02.04.2019, 14:39
это шо подчеркивание чтоле просто?
0
0 / 0 / 2
Регистрация: 06.01.2014
Сообщений: 118
02.04.2019, 15:44  [ТС]
Цитата Сообщение от j2FunOnly Посмотреть сообщение
garmoni,
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
$('.menu li').mouseenter(function() {
  var left = $(this).offset().left - $('.menu').offset().left,
    width = $(this).width();
 
  $('hr').css({
    'margin-left': left,
    'width': width
  });
});
 
$('.menu').mouseleave(function() {
  $('hr').attr('style', null);
});
https://jsfiddle.net/j2FunOnly/rujf23ad/
Спасибо большое!
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
02.04.2019, 15:44
Помогаю со студенческими работами здесь

Написал сам с помощью html и css меню для joomla - активное меню не подсвечивается
Здравствуйте, написал сам с помощью html и css меню для joomla, когда перехожу на страницу активное меню не подсвечивается, как это можно...

Активное меню
Доброго времени суток! Есть примерно такая конструкция: &lt;div&gt; &lt;ul class=&quot;active&quot;&gt; //основной пункт меню ...

Не активное меню
Вот, не знаю ,как точно называется Всё началось, со скачки нового шаблона, перестали быть активные ссылки в этом меню, НО! На...

Активное/неактивное меню
У меня есть MainMenu....я делаю текстовый редактор, есть RichEdit.... есть например в меню Копировать, как сделать так, что когда у меню...

Не получается сделать активное меню
Добрый вечер! Подскажите пожалуйста как можно сверстать активный пункт меню, чтобы было как на рис1. У меня получается текст чуть ниже, это...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
8
Ответ Создать тему
Новые блоги и статьи
Автозаполнение реквизита при выборе элемента справочника
Maks 27.03.2026
Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. При выборе "Спецтехники" (Тип Справочник. Спецтехника), заполняется. . .
Сумматор с применением элементов трёх состояний.
Hrethgir 26.03.2026
Тут. https:/ / fips. ru/ EGD/ ab3c85c8-836d-4866-871b-c2f0c5d77fbc Первый документ красиво выглядит, но без схемы. Это конечно не даёт никаких плюсов автору, но тем не менее. . . всё может быть. . .
Автозаполнение реквизитов при создании документа
Maks 26.03.2026
Программный код из решения ниже размещается в модуле объекта документа, в процедуре "ПриСозданииНаСервере". Алгоритм проверки заполнения реализован для исключения перезаписи значения реквизита,. . .
Команды формы и диалоговое окно
Maks 26.03.2026
1. Команда формы "ЗаполнитьЗапчасти". Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. В качестве источника данных. . .
Кому нужен AOT?
DevAlt 26.03.2026
Решил сделать простой ланчер Написал заготовку: dotnet new console --aot -o UrlHandler var items = args. Split(":"); var tag = items; var id = items; var executable = args;. . .
Отправка уведомления на почту при изменении наименования справочника
Maks 24.03.2026
Программная отправка письма электронной почты на примере изменения наименования типового справочника "Склады" в конфигурации БП3. Перед реализацией необходимо выполнить настройку системной учетной. . .
модель ЗдравоСохранения 5. Меньше увольнений- больше дохода!
anaschu 24.03.2026
Теперь система здравосохранения уменьшает количество увольнений. 9TO2GP2bpX4 a42b81fb172ffc12ca589c7898261ccb/ https:/ / rutube. ru/ video/ a42b81fb172ffc12ca589c7898261ccb/ Слева синяя линия -. . .
Midnight Chicago Blues
kumehtar 24.03.2026
Такой Midnight Chicago Blues, знаешь?. . Когда вечерние улицы становятся ночными, а ты не можешь уснуть. Ты идёшь в любимый старый бар, и бармен наливает тебе виски. Ты смотришь на пролетающие. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru