限时优惠活动
亲爱的苦力吧用户,我们为了回馈新老用户一直以来的鼎力支持,即日起(2025-02-06至2025-03-06)凡是购买苦力吧VIP/充值K币的新老用户,都直接可获得买一送一的优惠馈赠。例如:购买一个月的VIP会员可直接获得两个月的VIP会员;充值100K币可直接获得200K币,以此类推!有任何疑问可联系在线客服,感谢各位用户对苦力吧素材的信任与厚爱,我们将一如既往的给大家上新更多优质的素材源码,祝大家开工大吉、工作顺利、心想事成。

jquery带主题切换的下拉导航菜单特效代码

所属分类: 网页特效-导航菜单    2024-01-06 09:10:39

jquery带主题切换的下拉导航菜单特效代码 ie兼容6
 查看演示  登录后下载 温馨提示
登录会员即可享受免费下载
 我要建站

jquery带主题切换的下拉导航菜单特效代码(共3个文件)

    • index.html

使用方法

(function($) { "use strict";
		
	//Page cursors

    document.getElementsByTagName("body")[0].addEventListener("mousemove", function(n) {
        t.style.left = n.clientX + "px", 
		t.style.top = n.clientY + "px", 
		e.style.left = n.clientX + "px", 
		e.style.top = n.clientY + "px", 
		i.style.left = n.clientX + "px", 
		i.style.top = n.clientY + "px"
    });
    var t = document.getElementById("cursor"),
        e = document.getElementById("cursor2"),
        i = document.getElementById("cursor3");
    function n(t) {
        e.classList.add("hover"), i.classList.add("hover")
    }
    function s(t) {
        e.classList.remove("hover"), i.classList.remove("hover")
    }
    s();
    for (var r = document.querySelectorAll(".hover-target"), a = r.length - 1; a >= 0; a--) {
        o(r[a])
    }
    function o(t) {
        t.addEventListener("mouseover", n), t.addEventListener("mouseout", s)
    }
	
	//Navigation

	var app = function () {
		var body = undefined;
		var menu = undefined;
		var menuItems = undefined;
		var init = function init() {
			body = document.querySelector('body');
			menu = document.querySelector('.menu-icon');
			menuItems = document.querySelectorAll('.nav__list-item');
			applyListeners();
		};
		var applyListeners = function applyListeners() {
			menu.addEventListener('click', function () {
				return toggleClass(body, 'nav-active');
			});
		};
		var toggleClass = function toggleClass(element, stringClass) {
			if (element.classList.contains(stringClass)) element.classList.remove(stringClass);else element.classList.add(stringClass);
		};
		init();
	}();

	
	//Switch light/dark
	
	$("#switch").on('click', function () {
		if ($("body").hasClass("light")) {
			$("body").removeClass("light");
			$("#switch").removeClass("switched");
		}
		else {
			$("body").addClass("light");
			$("#switch").addClass("switched");
		}
	});          
              
})(jQuery);

站长提示:
1. 苦力吧素材官方QQ群:950875342
2. 平台上所有素材资源,需注册登录会员方能正常下载。
3. 会员用户积极反馈网站、素材资源BUG或错误问题,每次奖励2K币
4. PHP源码类素材,如需协助安装调试,或你有二次开发需求,可联系苦力吧客服。
5. 付费素材资源,需充值后方能下载,如有任何疑问可直接联系苦力吧客服
相关资源 / 导航菜单

jQuery页面滚动紧贴顶部悬浮二级导航菜单

鼠标滚动页面到既定高度,导航条贴顶悬浮固定,响应式设计,简单实用。
  导航菜单
 2289  0

jquery悬停显示下拉二级导航菜单特效

一款绿色风格二级导航下拉菜单,鼠标悬停在一级导航菜单上即可触发显示,二级下拉导航菜单。
  导航菜单
 1109  0

jquery响应式导航栏菜单弹出动画特效

一款Html5响应式点击触发显示导航菜单,鼠标点击按钮滑动显示导航菜单,带关闭按钮,点击即可隐藏水平导航。
  导航菜单
 9338  0

jquery轻量级区域内加载显示二级垂直菜单

Stack Menu是一个轻量级导航菜单插件,用于创建带有子菜单的垂直菜单,点击带有二级菜单的导航菜单,直接在当前列表内加载显示,并带有返回功能。
  导航菜单
 3337  0

评论数(0) 回复有机会获得K币 用户协议

^_^ 还没有人评论,快来抢个沙发!
😀
  • 😀
  • 😊
  • 😂
  • 😍
  • 😑
  • 😷
  • 😵
  • 😛
  • 😣
  • 😱
  • 😋
  • 😎
  • 😵
  • 😕
  • 😶
  • 😚
  • 😜
  • 😭
发表评论