Tag: 菜单

Jquery：使用scrollTop制作动画粘性菜单: 我正在尝试创建一个动画粘性菜单。用户加载页面并且导航是静止的。用户然后向下滚动页面，然后在500像素（滚动原始导航）之后，导航动画进入使用固定定位粘在顶部的页面。我现在正在工作（参见codepen： http ：//codepen.io/chrisyerkes/pen/uoFKl）但是，一旦我向上滚动并重置菜单的位置，下次我向下滚动页面时，它就不再动画了在，只是卡入到位。我想让它像第一页加载/滚动动作一样动画下来。当您向上滚动页面时，看起来属性style =“top：0px”不会被删除，这可能导致问题。我尝试使用removeAttr（）在返回滚动时删除它，但它会一直弹出（自动）。任何想法都会非常感激。谢谢！

将Sidr菜单与动画汉堡包按钮相结合: 我的测试页面 https://osticketawesome.com/support/awesome/inc/test.html 我正在尝试将汉堡包菜单与Sidr jQuery插件相结合，以创建侧面菜单。它在Chrome，FF，IE和Edge中完美运行，但在我测试过的移动浏览器（Android / Chrome和iPhone / Safari）中，菜单切换但按钮仅在按下按钮的外边缘时才会动画。 toggle menu $(document).ready(function() { var toggles = document.querySelectorAll(“.c-hamburger”); for (var i = toggles.length – 1; i >= 0; i–) { var toggle = toggles[i]; toggleHandler(toggle); }; function toggleHandler(toggle) { toggle.addEventListener( “click”, function(e) { e.preventDefault(); (this.classList.contains(“is-active”) === true) ? this.classList.remove(“is-active”) : this.classList.add(“is-active”); }); } $(‘.c-hamburger’).sidr({ name: […]

jQuery菜单toggleSlidehover？: 我有一个菜单，其中只有一个项目有一个子列表。这是HTML代码： Home Products About Example One Example Two Example Three 当鼠标在菜单或子菜单上时，我想slideDown菜单并保持打开状态。所以以下工作正常，但我想要hover而不是点击相同的东西。 $(‘#menu ul li’).click(function() { $(‘#menu ul li ul’).slideToggle(‘slow’, function() { }); }); 我试着hover，但它非常错，这里也是代码： $(“#menu ul li”).hover( function () { $(“#menu ul li ul”).slideDown(‘slow’); }, function () { $(“#menu ul li ul”).slideUp(‘slow’); } ); 我试图添加.stop(true, true)或$(“#menu ul li ul”).css(“display”, “block”); 在slideDown之后，它仍然是马车。 CSS #menu […]

任何想法如何使用css / jquery复制此内联下拉菜单: 我想知道是否有人知道有一个插件存在来复制这样的内嵌下拉/菜单。需要注意的关键是所选元素的间距应保持为发送格式。点击链接时，它应该作为一个下拉菜单.. 如果有类似的东西，我宁愿不要从头开始写这个。注意：选择下拉值并使用所选值替换href链接文本。

Jquery手风琴菜单（3级）怎么样？: 我有这个jquery代码： $(document).ready(function(){ $(“#accordion2 h3”).click(function(){ //slide up all the link lists $(“#accordion2 ul ul”).slideUp(); //slide down the link list below the h3 clicked – only if its closed if(!$(this).next().is(“:visible”)) { $(this).next().slideDown(); } }) }) 和HTML： Articles Nature Wild life Flowers Animals Earth Space Ocean Land 我如何修改jQuery代码，以便用户可以滑动“自然”及其内容？ 3个三级菜单。

沿父div高度跟踪的浮动div内容: 我正在寻找一个HTML5 / jquery解决方案来附加一个浮动div（让我们称之为“A”）到父div的右侧（称为“B”）并让div A在滚动期间停留在屏幕上但在停止时停止它击中了div B高度的顶部或底部。如果您已经看到浮动/绝对定位的社交媒体按钮保留在屏幕上（它是正确的概念），但我想限制浮动仅与div B的高度一样高或低。以下是我制作概念动画的概念动画如果你看看div B，我的目标是让浮动菜单在屏幕上上下滚动div B的高度，而不是在div B的上方或下方。我们非常欢迎任何建议/帮助/代码剪辑。先感谢您。

在窗口单击关闭canvas菜单: 我做了这个“滑出”菜单： SASS滑出菜单。没关系，但我希望当菜单滑动时，在窗口上单击菜单返回（删除类“nav-open”）。我在codepen演示中试过这个，但它不起作用： window.on(“click”, function(e) { if(wrapper.hasClass(“nav-open”) && e.target != nav && e.target.parent() != nav) { wrapper.removeClass(“nav-open”); } });

将HTML select元素转换为带子菜单的树: 我希望select元素以树形方式具有子菜单。我希望它是这样的： alt text http://sofzh.miximages.com/javascript/rmenu.gif 有没有一个jQuery插件可以将一个选择元素变成这种东西？

当可见的原始ul中有0个项目时，为什么溢出的菜单工作不好？: 这是问题的样子：虽然看起来应该是这样的：这是用于创建弹出溢出菜单的函数： function updateMenu(){ var lastItemIndex = Number.POSITIVE_INFINITY; var lastItemText = “”; var maxWidth = 0; var overflowCount=0; var navHeight = $(‘.nav’).height(); $(‘.nav li’).each(function(i,e){ console.log($(e).position().top); if($(e).position().top>=navHeight){ if(imaxWidth) maxWidth = $(e).width(); overflowCount++; } }); maxWidth = Math.max(maxWidth,$(‘.nav li:eq(‘+(lastItemIndex)+’)’).width()); var moreHeight = (overflowCount+2)*navHeight; $(‘#moreMenu’).remove(); if(overflowCount>0){ $(”).appendTo(‘body’).width(maxWidth+16).height(navHeight); $(‘#moreMenu’).offset($(‘.nav li:eq(‘+(lastItemIndex)+’)’).offset()); $(‘#moreMenu’).append(‘More…’); $(‘.nav li:gt(‘+(lastItemIndex-1)+’)’).each(function(i,e){ $(‘#moreMenu’).append(”+$(e).html()+”); }); $(‘#moreMenu’).hover( function(){$(this).height(moreHeight);}, function(){$(this).height(navHeight);}); […]

SlideUp用于多个div的SlideDown排序: 我想在这个小提琴中滑动切换多个div： http://jsfiddle.net/jakecigar/XwN2L/2154/ 这个脚本的function很好，但我需要隐藏的内容在下一个内容按顺序向下滑动之前向上滑动。此外，当您在打开时单击活动div链接时，它将使其滑动并隐藏，因为这是用于站点菜单。这是HTML： .targetDiv {display: none} Div 1 Div 2 Div 3 Div 4 Lorum Ipsum1 Lorum Ipsum2 Lorum Ipsum3 Lorum Ipsum4 这是脚本： jQuery(function(){ jQuery(‘.showSingle’).click(function(){ jQuery(‘.targetDiv’).slideUp(); jQuery(‘.targetDiv’).hide(); jQuery(‘#div’+$(this).attr(‘target’)).slideToggle(); }); });