видимые настройки для css / javascript

Question

Я хотел бы сделать часть моего html (объект типа навигационной панели, если он имеет значение) невидимой, пока я не наведусь на определенное место на странице.Затем я хотел бы иметь возможность навести курсор на кнопку, которая делает ее видимой, создать всплывающую панель навигации, а затем получить доступ к элементам панели навигации без ее исчезновения.У кого-нибудь есть указатели?Я бы хотел написать функцию javascript для этого, но я не уверен, как сделать вещи невидимыми / видимыми и переключить это состояние с помощью javascript.

Спасибо

Answer 1

Если вы просто хотите создать основное меню при наведении, вам вообще не нужен JavaScript, вы можете обойтись только с помощью CSS.

Вот демоверсия jsfiddle о том, как использовать CSS для создания всплывающего меню.

Чтобы напрямую ответить на ваш вопрос, вы можете манипулировать значением CSS display или visibility, используя JavaScript, например:

var el = document.getElementById('someElement');

el.style.display = 'none'; //element is hidden
el.style.display = 'block'; //element is shown as a block level element
el.style.visibility = 'hidden'; //element is hidden
el.style.visibility = 'visible'; //element is visible

Различия между display и visibility сводятся к тому, как вы хотите обработать невидимый элемент. При использовании свойства display элемент не будет занимать места на странице, он будет иметь высоту и ширину 0, а отступы или поля не будут влиять на него. С другой стороны, свойство visibility означает, что вы не можете видеть содержимое элемента (текст, дочерние элементы и т. Д.), Но оно все равно будет занимать место в DOM, поэтому другие элементы будут перемещаться вокруг него. Это может быть полезно для скрытия / отображения содержимого, но не для перемещения содержимого страницы, поскольку все становится снова видимым.

Answer 2

Просто создайте скрытую навигационную панель и добавьте функцию onmouseover к кнопке:

<div id='navbar' style='display:none'>
[content]
</div>

и к кнопке:

<button onmouseover="document.getElementById('navbar').style.display='block'">Hover Over Me</button>

Если навигационная панель собирается к , появляются надили непосредственно рядом с кнопкой , вы также можете найти решение all css, но вы должны убедиться, что вашей мыши никогда не придется «покидать» кнопку во время движения к навигационной панели (пока выможет сделать это на панели навигации, даже если панель навигации больше / вверху кнопки div, не покидая кнопку div, она будет работать нормально):

<style>
.button {width:100px; height:20px; color:#fff;background-color:#360; position:relative;}
.navbar {display:none; position:absolute; top:19px; left:0px; z-index:10; background-color:#fff;color:#000;}
.button:hover .navbar {display:block;}
</style>
<div class='button'>
   <span>HOVER OVER ME</span>
   <div class='navbar'>[The contents of my nav bar]</div>
<div>

Answer 3

$(document).ready(function(){$('myelement').slideUp();});   
 $('#element').live('mouseover',function(){$('myelement').slideUp();});
    $('#element2').live('mouseover',function(){$('myelement').slideDown();});

Вы можете использовать плагин easing, если хотите, чтобы это было сделано с помощью анимации

Answer 4

Если вы используете jQuery, вы можете сделать что-то вроде:

var setupNavbarInteraction = function(){
    var hideTimeout; 
    $("#hoverTarget").hover(
        function(){ $("#navBar").css({'display': 'block'}); }, 
        function(){ hideTimeout = setTimeout(function(){ $("#navBar").css({'display': 'block'}); }, 4500); }
    );
    $("#navBar").hover(
        function(){ clearTimeout(hideTimeout); }, 
        function(){ hideTimeout = setTimeout(function(){ $(this).css({'display': 'none'}); }, 1500) }
    );
    }
$(document).ready(setupNavbarInteraction);

Этот код показывает панель навигации, когда вы наводите курсор мыши на элемент триггера.Затем, когда вы щелкаете мышью из спускового крючка, он ждет 4,5 секунды, прежде чем снова скрывать панель навигации.Затем вторая часть отменяет предыдущий вызов, чтобы скрыть панель навигации, когда вы наводите курсор мыши на панель навигации, а затем скрывает ее на 1,5 секунды после того, как вы щелкаете мышью из панели навигации.Настройте тайм-ауты по своему вкусу и потребностям IxD.Тайм-ауты позволяют пользователю продолжать использовать элементы и не будут оштрафованы за случайное выведение мыши из области панели навигации.

Answer 5

Наиболее подходящий способ сделать это - использовать класс CSS, который вы добавляете в элемент, чтобы пометить его как скрытый, или который вы удаляете, чтобы показать элемент

css:

.hidden {

  /* there are several ways to hide, depeneding on the use case: */
  display: none;
  visibility: hidden;
  position:absolute; left:-9999;

}

JavaScript:

var toggleOn = function(id) {
    var element = document.getElementById(id);
    element.className = element.className.replace(" hidden", "");
};
var toggleOff = function(id) {
    document.getElementById(id).className += " hidden";
}