Отключить наведите курсор на меню с CSS
-
12-12-2019 - |
Вопрос
Я пытался решить эту неделю - я уверен, что это просто, но я действительно борюсь с ним!
Я пытаюсь изменить мою навигацию, чтобы пользователи должны нажать на него, чтобы она появилась. Я верю, что Magento по умолчанию они просто зависят, по крайней мере, это то, что происходит на моей. Кто-то сказал мне, что считают, что это зависит от классов CSS, которые, я думаю, может быть прав. Стоит отметить, что моя мобильная версия (при просмотре на рабочем столе) позволяет щелчками, но настольные показывает на наличие зависания.
Вот мои CSS для NAV-первичного:
.nav-primary a {
color:#9a9a9a;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
text-transform: uppercase;
}
.nav-primary a:hover {
color:#000;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
text-transform: uppercase;
}
#header-account li a,
.nav-primary a.level0 {
width: 200px;
text-align: left;
color: #636363;
text-transform: uppercase;
line-height: 20px;
padding-top: 0;
padding-right: 15px;
padding-bottom: 0;
margin-left: 300px;
}
#header-account li:last-child a,
.nav-primary li.level0:last-child a.level0 {
border-bottom: 0;
}
.no-touch #header-account a:hover,
.no-touch .nav-primary a:hover {
text-decoration: none;
}
.nav-primary {
display: block;
padding-top: 30px;
}
.nav-primary a {
text-decoration: none;
position: relative;
display: block;
color: #636363;
line-height: 30px;
font-family: "Raleway", "Helvetica Neue", Verdana, Arial, sans-serif;
}
.nav-primary li {
position: relative;
}
.nav-primary li.level1 a {
margin-left: 350px;
}
.nav-primary .menu-active > ul.level0,
.nav-primary li.level0 li.sub-menu-active > ul {
display: block;
}
.nav-primary li.level0 > a {
text-transform: uppercase;
}
/* ============================================ *
* Small Viewports - Accordion Style Menu
* ============================================ */
.nav-primary a.level0,
.nav-primary a {
line-height: 25px;
}
.nav-primary li.level0 ul {
display: none;
}
.nav-primary li.level0 li {
padding: 0 0 0 25px;
}
.nav-primary li.level1 a {
padding: 0 15px 0 25px;
}
.nav-primary li.parent > a:after {
content: '';
position: absolute;
width: 0;
height: 0;
display: block;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid #cccccc;
border-right: none;
top: 50%;
left: 10px;
right: auto;
margin-top: -5px;
}
.nav-primary li.parent.sub-menu-active > a:after,
.nav-primary li.parent.menu-active > a:after {
content: '';
position: absolute;
width: 0;
height: 0;
display: block;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
border-top: 5px solid #cccccc;
border-bottom: none;
top: 50%;
left: 10px;
right: auto;
margin-top: -5px;
}
.nav-primary li.menu-active > a,
.nav-primary li.sub-menu-active > a {
color: #000;
}
/* ============================================ *
* Large Viewports - Dropdown Menu
* ============================================ */
.nav-primary li.menu-active > ul {
display: block;
}
.
Это тот, который заставляет их либо кажутся на курсе или просто быть там:
.nav-primary li.level0 ul { display: none; }
.
Но я не уверен, что изменить его, чтобы отправиться от Hover, чтобы нажать?
Обновление:
Я изменил код в My /app.js до следующего, и кажется, работает!
mouseClickAction: function(event, target) {
if(this.useSmallScreenBehavior()) {
return; // don't do mouse enter functionality on smaller screens
}
$j(target).addClass('menu-active'); //show current menu
},
/**
* On large screens, hide menu.
* On small screens, do nothing.
*
* @param event
* @param target
*/
mouseClickAction: function(event, target) {
if(this.useSmallScreenBehavior()) {
return; // don't do mouse leave functionality on smaller screens
}
$j(target).removeClass('menu-active'); //hide all menus
},
/**
* On large screens, don't interfere so that browser will follow link.
* On small screens, toggle menu visibility.
*
* @param event
* @param target
*/
mouseClickAction: function(event, target) {
{
event.preventDefault(); //don't follow link
this.toggleMenuVisibility(target); //instead, toggle visibility
}
},
.
Я в основном сейчас имею это то же самое, что и небольшая версия экрана; После того, как пользователи нажимают, чтобы отобразить следующую категорию, которая отлично! У меня есть пару категорий, которые предназначены для отображения статического блока, а не отвлекают на страницу, которая сейчас не работает. Любая идея, как еще разрешать статические блоки, чтобы показать?
Решение
Указанный вами селектор добавляет дисплей: никто не скрывает выпадения.Это может остаться прежним, то, что вам нужно изменить, - это часть, которая показывает их.Похоже, это сделано этим селектором «.nav-Primary. Menu-Active> UL.level0», что делает отображение пункта меню: снова блокировать.То, что вам действительно нужно изменить, - это JavaScript, который добавляет класс «Active Menu» на верхний уровень UL в меню, в теме RWD, которая была бы скин / appeend / rwd / default / js / app.js.
.Другие советы
Вы ищете событие OnClick, которое обычно делается с jQuery, а не CSS.Существует обходной путь CSS, связанный с использованием флажков.Смотрите Ответить на этот вопрос Отказ
the the the Ascher в этом вопросе может иметь то, что вы ищете.