onMouseOver, onMouseOut и <div> - PullRequest
Новая
       14

onMouseOver, onMouseOut и <div>

1 голос
/ 07 января 2012

Мне нужно создать динамическое меню в javascript, поэтому я использую onMouseOver и onMouseOut, но проблема в том, что когда я фокусирую мышь на пробелах, меню исчезает, потому что кажется, что меня больше нет в div! 

<script type="text/javascript">
function cacherSousMenu(menu)
{
    if(menu == "ajout")
    {
        document.getElementById('sousMenuAjout').style.display = document.getElementById('sousMenuAjout').style.display=='none'?'block':'none';
        document.getElementById('imgPlusMoinsAjout').src = document.getElementById('sousMenuAjout').style.display=='none'?'images/plus.gif':'images/moins.gif';
    }
    else if(menu == "inscrire")
    {
        document.getElementById('sousMenuInscrire').style.display = document.getElementById('sousMenuInscrire').style.display=='none'?'block':'none';
        document.getElementById('imgPlusMoinsInscrire').src = document.getElementById('sousMenuInscrire').style.display=='none'?'images/plus.gif':'images/moins.gif';
    }
}


<nav>
<ul>
<div id="ajouter" onmouseover="cacherSousMenu('ajout');">
<li class="titre">Ajouter <img src="images/plus.gif" id="imgPlusMoinsAjout" alt="Image Plus Moins"></li>
</div>
<div id="sousMenuAjout" onmouseout="cacherSousMenu('ajout');">
<ul>
<li><a href="index.php?page=3">Un établissement</a></li>
<li><a href="index.php?page=4">Une filière</a></li>
<li><a href="index.php?page=5">Une UE</a></li>
</ul>
</div>
<div id="inscrire" onmouseover="cacherSousMenu('inscrire');">
<li class="titre">Inscrire <img src="images/plus.gif" id="imgPlusMoinsInscrire" alt="Image Plus Moins"></li>
</div>
<div id="sousMenuInscrire" onmouseout="cacherSousMenu('inscrire');">
<ul>
<li><a href="index.php?page=2">Un nouvel étudiant</a></li>
<li><a href="index.php?page=6">Un étudiant à une UE</a></li>
</ul>
</div>
<li class="titre"><a href="index.php?page=7">Afficher tous les étudiants</a></li>
<li class="titre">Aide</li>
<ul>
</nav>

Итак, как это исправить, может быть, с помощью CSS?

Спасибо!

Ответы [ 2 ]

1 голос
/ 07 января 2012

Я не могу не задаться вопросом, стоит ли вам публиковать (или искать) вопрос на https://ux.stackexchange.com/ о поведении меню и, в частности, о состояниях наведения (которых нет на планшетах и ​​телефонах, которыестановятся более плодовитыми).Но чтобы решить вашу техническую проблему ...

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

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

<!doctype HTML>
<html>
<head>
<style>
.titre {background-color:red;}
.menuItemWrapper {background-color:green;}
</style>
</head>
<body>
<nav>
    <ul id="ajouter" onmouseover="showMenu('sousMenuAjout','imgPlusMoinsAjout',true);" onMouseOut="showMenu('sousMenuAjout','imgPlusMoinsAjout',false);">
            <li class="titre">Ajouter <img src="images/plus.gif" id="imgPlusMoinsAjout" alt="Image Plus Moins"></li>
        <ul id="sousMenuAjout" class="menuItemWrapper" onMouseOut="hideMenu('sousMenuAjout');">
                <li><a href="index.php?page=3">Un établissement</a></li>
                <li><a href="index.php?page=4">Une filière</a></li>
                <li><a href="index.php?page=5">Une UE</a></li>
            </ul>
    </ul>

    <ul id="inscrire" onmouseover="showMenu('sousMenuInscrire','imgPlusMoinsInscrire',true);" onMouseOut="showMenu('sousMenuInscrire','imgPlusMoinsInscrire',false);">
        <li class="titre">Inscrire <img src="images/plus.gif" id="imgPlusMoinsInscrire" alt="Image Plus Moins"></li>
        <ul id="sousMenuInscrire" onmouseout="cacherSousMenu('inscrire');" class="menuItemWrapper">
            <ul>
                <li><a href="index.php?page=2">Un nouvel étudiant</a></li>
                <li><a href="index.php?page=6">Un étudiant à une UE</a></li>
            </ul>
        </ul>
        <li class="titre"><a href="index.php?page=7">Afficher tous les étudiants</a></li>
        <li class="titre">Aide</li>
    </ul>
</nav>
<script type="text/javascript">
function showMenu(menuId, menuIconId, visible) {
    var displayStyle, imageName;
    if (visible) {
        displayStyle = 'block';
        imageName = 'images/moins.gif';
    } else {
        displayStyle = 'none';
        imageName = 'images/plus.gif';
    }
    document.getElementById(menuId).style.display = displayStyle;
    document.getElementById(menuIconId).src = imageName;
}
showMenu('sousMenuAjout', 'imgPlusMoinsAjout', false);
showMenu('sousMenuInscrire', 'imgPlusMoinsInscrire', false);
</script>
</body>
</html>

Вы можете увидеть это в прямом эфире на jsbin (по какой-то причине не работает в jsFiddle): http://jsbin.com/exakiz/2

PS.Извините, я переключил некоторые имена на английский;Я не говорю и не понимаю по-французски.(

0 голосов
/ 07 января 2012

Сложно реализовать такое меню, используя чистый JS, потому что события onmouseover / onmouseout запускаются, когда мышь перемещается к дочернему элементу (в меню, когда ваша мышь перемещается из основного элемента в подменю, срабатывает mouseout). Вы должны искать некоторую реализацию событий mouseenter / mouseleave.

Но есть более простой способ - использовать только css. Вот пример: http://jsfiddle.net/ZjVGN/

...