Показывать навигацию на мышах - PullRequest
Новая
       12

Показывать навигацию на мышах

0 голосов
/ 04 июля 2018

Я работаю над веб-сайтом, и я подумал, что было бы здорово, чтобы навигационная панель отображалась только при наведении мыши на верхнюю часть экрана. Это вообще возможно? потому что я не могу найти какие-либо учебники по нему. В любом случае, есть ли способ, чтобы он не просто появлялся, а еще больше скользил сверху вниз? Вроде как панель задач Windows делает только вверх ногами. Спасибо!

Это сайт, если кто-то хочет увидеть навигационную панель прямо сейчас: https://www.oakparknerds.tk/

Ответы [ 2 ]

0 голосов
/ 04 июля 2018

Вот способ сделать это с помощью jquery и css. Я изменил цвет фона на оранжевый, чтобы вы могли видеть его в действии. 

<html lang="en">
<head>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
  <div id="nav_container" style="border:1px solid black;width:100%;height:300px;">
  <nav id="my_nav" style="display:none;width:100%; height:200px;background-color:orange;">

    <a href="#">Links</a>

</nav>
</div>
<script>
$(document).ready(function(){
    $("#nav_container").mouseover(function(){
        $("#my_nav").slideDown(3000);
    });
    $("#nav_container").mouseout(function(){
        $("#my_nav").fadeOut();
    });
    });
</script>
</body>
</html>
0 голосов
/ 04 июля 2018

Есть несколько подходов, которые могут быть приняты для достижения этой цели. Самый простой - просто использовать CSS для анимации края поля навигационной панели при наведении курсора. Вы можете установить на панели навигации отсутствие цвета фона, затем при наведении курсора измените цвет, чтобы он отображался.

Пример с идентификатором навигационной панели #slidingBox: 

#slidingBox {
  width: 100%;
  height: 60px;
  background-color: none;
  overflow-y: scroll;
  margin-left: 0px;
  margin-top: -50px;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

#slidingBox:hover {
  margin-top: 0px;
  background-color: #d9dada;
}

Вот скрипка

...