Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
 
Рейтинг 4.58/40: Рейтинг темы: голосов - 40, средняя оценка - 4.58
1 / 1 / 0
Регистрация: 26.05.2018
Сообщений: 20

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

08.06.2018, 02:48. Показов 7688. Ответов 23
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Доброй ночи подскажите пожалуйста, как сделать так чтобы при нажатии на меню раздела открывались подменю, но сама ссылка раздела не куда не вела. Пробовал решетку ставить вместо ссылки, но не нравится, то что она отображается после нажатии в строке состояния браузера, чем можно заменить решетку. Какие есть еще решения. Заранее спасибо.

Вот как выглядит верхнее меню
Миниатюры
При нажатии на меню раздела открывать подменю  
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
08.06.2018, 02:48
Ответы с готовыми решениями:

Выпадающее меню. Не фиксируется бордер раздела меню, при использовании подменю
Делаю выпадающее меню, почти все сделал, осталось по сути немного, и не могу закончить. Вот код: ...

Не открывать ссылку при нажатии на кнопку
Есть вот такая форма <div id="form" style="display: none"> <form id="payment" name="payment" method="post"...

Организовать ,что при нажатии Enter входит в меню , а при нажатии Esc выходит с программы
Вот кусочек курсовой , помогите организовать такую вещь как при нажатии Enter входит в меню , а при нажатии Esc выходит с программы.Если...

23
Эксперт JSЭксперт HTML/CSS
 Аватар для mrtoxas
3827 / 2677 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
08.06.2018, 10:35
1. Поменять ссылку на span и добавить стили ссылки.
2. Отменять действие по умолчанию - https://developer.mozilla.org/... entDefault
0
1 / 1 / 0
Регистрация: 26.05.2018
Сообщений: 20
08.06.2018, 10:41  [ТС]
При переходе по ссылке пишит ошибка 404, а если вы про меню сайта на который дали ссылку так там при нажатии на меню все равно переходит в раздел а мне это не надо.
Вот фрагмент кода, что в нем изменить.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="top-navigation">
            <ul id="topnav">
                <li><a href="/">Главная</a></li>
                <li>
                    <a href="#">Windows</a>
                    <div>
                        <ul>
                            <li><a href="/windows/">Настроить Windows XP, 7, 8</a></li>
                            <li><a href="/nastroit-windows-10/">Настроить Windows 10</a></li>
                        </ul>
                    </div>
                </li>
                <li>
Вложения, ожидающие проверки
Тип файла: png Безымянный1.png
0
Эксперт JSЭксперт HTML/CSS
 Аватар для mrtoxas
3827 / 2677 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
08.06.2018, 11:49
Цитата Сообщение от alex2039 Посмотреть сообщение
При переходе по ссылке пишит ошибка 404
Ссылку поправил

У вас jQuery используется?

Добавлено через 2 минуты
Вот, я про это говорил:
HTML5
1
2
3
4
<!-- ... -->
<li>
  <span>Windows</span>
<!-- ... -->
Попробуйте заменить ссылку на span при формировании страницы. Если есть куда переходить - вставляем ссылку, если нет - вставляем span.
0
1 / 1 / 0
Регистрация: 26.05.2018
Сообщений: 20
08.06.2018, 11:50  [ТС]
Да, меню без джава, при на ведение выпадает все класс, но не все же просто наводят есть, и те которые обязательно клацнут, а я хочу чтобы при нажатие на само название меню не куда не переходило и не обновляло страницу. Заранее спасибо.
0
Эксперт JSЭксперт HTML/CSS
 Аватар для mrtoxas
3827 / 2677 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
08.06.2018, 11:54
Если js не используется, тогда:
Или назначаем ссылке стиль pointer-events:none
Или не используем ссылку. А стили привязываем не к тегу, а к классу.

HTML5
1
<span class="menu-link">Windows</span>
И как-то так:
CSS
1
2
3
.menu-link:hover + div{
    display:block;
}
0
1 / 1 / 0
Регистрация: 26.05.2018
Сообщений: 20
08.06.2018, 11:54  [ТС]
Пробовал но тогда стиль убирается, он походу подвязан к ссылке, пробовал и так <a span>Windows</span></a>, так вроде бы работает но не знаю так можно или нет?
0
Эксперт JSЭксперт HTML/CSS
 Аватар для mrtoxas
3827 / 2677 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
08.06.2018, 12:01
Цитата Сообщение от alex2039 Посмотреть сообщение
но тогда стиль убирается
Повесьте такие же стили на span.
В общем, больше вариантов нет. Или span, или pointer-events:none для ссылки. "Глушить" ссылку посредством js не рассматриваю, потому что, смысла нет.
Если все равно не получается, тогда стили для меню в студию, чтобы можно было воспроизвести ваш код.
0
1 / 1 / 0
Регистрация: 26.05.2018
Сообщений: 20
08.06.2018, 12:05  [ТС]
Вот код css
CSS
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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
#topnav {
    margin-left:15px;
    height:45px;
}
 
#topnav li {
    float:left;
    display:inline;
    position:relative;
}
 
#topnav ul li {
    padding:0;
    float:none;
    border:none;
    display:block;
}
 
#topnav li.hover li {
    border:none;
}
 
#topnav li div {
    position:absolute;
    top:15px;
    left:-9999px;
    width:100px;
    z-index:9999;
}
 
#topnav li.hover div {
    left:0;
}
 
#topnav li {
    margin-right:0px !important;
    border:none !important;
}
 
#topnav a {
    line-height:45px;
    display:block;
    height:45px;
    color:#525252;
    font-size:13px;
    text-shadow:0 -1px 0 #fff;
    padding:0px 8px;
}
 
#topnav .hover a, #topnav a:hover {
    color:#4f5899;
    background:rgba(228,232,241,0.8);
    box-shadow:0px 0px 3px rgba(0,0,0,.2) inset;
}
 
#topnav div {
    min-width:200px;
    top:45px !important;
    padding-top:4px;
    background:rgba(255,255,255,.98);
    padding:5px 0px;
    border-radius:0 0 3px 3px;
    box-shadow:0px 1px 5px rgba(0,0,0,0.3), 0px 0px 0px 1px rgba(0,0,0,0.1);
}
 
#topnav div a {
    color:#666 !important;
    line-height:27px;
    height:27px;
    font-size:12px;
    text-shadow:none;
    background:none !important;
    box-shadow:none !important;
}
 
#topnav div a:hover {
    color:#006a9b !important;
    background:#f5f5f5 !important;
}
0
Эксперт JSЭксперт HTML/CSS
 Аватар для mrtoxas
3827 / 2677 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
08.06.2018, 12:17
Цитата Сообщение от alex2039 Посмотреть сообщение
Да, меню без джава
Меню с джава. При наведении, элементу списка присваивается класс hover.

Добавьте:
CSS
1
2
3
#topnav .hover > a{
  pointer-events:none;
}
А еще лучше
HTML5
1
<a class="no-link" href="#">Windows</a>
CSS
1
2
3
#topnav .no-link{
  pointer-events:none;
}
0
1 / 1 / 0
Регистрация: 26.05.2018
Сообщений: 20
08.06.2018, 12:23  [ТС]
А сам код как тогда будет выглядеть там где раздел

Спасибо сейчас попробую

Добавлено через 2 минуты
Извиняюсь, а в какую строку добавить css
0
Эксперт JSЭксперт HTML/CSS
 Аватар для mrtoxas
3827 / 2677 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
08.06.2018, 12:30
В любую
0
1 / 1 / 0
Регистрация: 26.05.2018
Сообщений: 20
08.06.2018, 13:06  [ТС]
Спасибо, но решетка в строке браузера все равно отображается после нажатия
0
Эксперт JSЭксперт HTML/CSS
 Аватар для mrtoxas
3827 / 2677 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
08.06.2018, 14:32
Значит что-то не так сделали или какую-то часть кода не показали.
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .no-link {
      pointer-events: none;      
    }
  </style>
</head>
 
<body>
  <a class="no-link" href="#">Windows</a>
</body>
 
</html>
Решетка не отображается.

Можете еще вместо решетки написать javascript:void(0). Но это некрасиво и не рекомендуется.
0
1 / 1 / 0
Регистрация: 26.05.2018
Сообщений: 20
08.06.2018, 14:52  [ТС]
Сейчас попробую еще раз

Добавлено через 16 минут
Не получилось, спасибо за помощь буду дальше играться
0
Эксперт JSЭксперт HTML/CSS
 Аватар для mrtoxas
3827 / 2677 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
08.06.2018, 15:16
alex2039, у страницы с этим меню есть ссылка?
0
1 / 1 / 0
Регистрация: 26.05.2018
Сообщений: 20
09.06.2018, 11:58  [ТС]
Есть, но я его только разрабатываю еще на сайт не внедрил, пока на виртуальном сервере играюсь
0
Эксперт JSЭксперт HTML/CSS
 Аватар для mrtoxas
3827 / 2677 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
09.06.2018, 13:13
Тогда html+css+js прикрепите архивом к сообщению.
0
1 / 1 / 0
Регистрация: 26.05.2018
Сообщений: 20
09.06.2018, 13:53  [ТС]
Уважаемый mrtoxas! Прошу вашей помощи только что я установил данное меню на этот сайт https://kaknastroit.com/, порывшись в коде оказалась, что вы правы, для меню еще используется джава код, прошу вашей помощи. все та же решётка. Заранее спасибо!!!
0
Эксперт JSЭксперт HTML/CSS
 Аватар для mrtoxas
3827 / 2677 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
09.06.2018, 14:04
Цитата Сообщение от mrtoxas Посмотреть сообщение
А еще лучше
Это работает. Что-то вы не так сделали или, быть может, забыли кеш почистить. Итак:
1. В разметке добавляем класс no-link ссылке, которая должна быть некликабельной.
2. В стилях пишем .no-link{pointer-events:none}.
3. Чистим кеш (Ctrl+F5);
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
09.06.2018, 14:04
Помогаю со студенческими работами здесь

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

При нажатии на кнопку открывать документ в Word-е
Добрый день Подскажите как сделать, чтобы при нажатие на кнопку открывался документ в ворде

При нажатии на button открывать ссылку в frame
Подскажите, кто знает. У меня есть страница, на ней iframe и button. Как сделать так, чтоб при нажатии на батон, ссылка открывалась в...

При нажатии на запись из таблицы открывать форму
Здравствуйте! Можно ли сделать так что бы при нажатии на запись из таблицы открывалась форма или отчет access 2003

При нажатии на рубрику открывать список с подрубриками (2gis)
Добрый день, вопрос у меня простой. Вот код который выводит список рубрик фирм: &lt;?php $rubriki =...


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

Или воспользуйтесь поиском по форуму:
20
Ответ Создать тему
Новые блоги и статьи
моя боль
iceja 24.01.2026
Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .
Модель сукцессии микоризы
anaschu 24.01.2026
Решили писать научную статью с неким РОманом
http://iceja.net/ математические сервисы
iceja 20.01.2026
Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .
http://iceja.net/ сервер решения полиномов
iceja 18.01.2026
Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .
Расчёт переходных процессов в цепи постоянного тока
igorrr37 16.01.2026
/ * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .
Восстановить юзерскрипты Greasemonkey из бэкапа браузера
damix 15.01.2026
Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Сукцессия микоризы: основная теория в виде двух уравнений.
anaschu 11.01.2026
https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/
WordPad для Windows 11
Jel 10.01.2026
WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru