当前位置：首页 > jquery

jquery菜单

2026-04-07 20:25:17jquery

jQuery 菜单实现方法

基本 HTML 结构

创建一个简单的无序列表作为菜单基础结构：

<ul class="menu">
  <li><a href="#">首页</a></li>
  <li><a href="#">产品</a></li>
  <li><a href="#">服务</a></li>
  <li><a href="#">关于我们</a></li>
</ul>

CSS 样式设计

添加基础样式使菜单水平排列：

.menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}
.menu li {
  margin-right: 15px;
}
.menu a {
  text-decoration: none;
  color: #333;
}

jQuery 交互效果

实现鼠标悬停效果：

$(document).ready(function(){
  $('.menu li').hover(
    function() {
      $(this).find('a').css('color', '#ff6600');
    },
    function() {
      $(this).find('a').css('color', '#333');
    }
  );
});

下拉菜单实现

扩展HTML结构：

<li class="has-submenu">
  <a href="#">产品</a>
  <ul class="submenu">
    <li><a href="#">软件</a></li>
    <li><a href="#">硬件</a></li>
  </ul>
</li>

添加下拉功能jQuery代码：

$('.has-submenu').hover(function(){
  $(this).find('.submenu').stop().slideDown(200);
}, function(){
  $(this).find('.submenu').stop().slideUp(200);
});

响应式菜单

添加移动端适配代码：

$(window).resize(function(){
  if($(window).width() < 768) {
    $('.menu').hide();
    $('.menu-toggle').show();
  } else {
    $('.menu').show();
    $('.menu-toggle').hide();
  }
});

$('.menu-toggle').click(function(){
  $('.menu').slideToggle();
});

动画效果增强

为菜单项添加点击动画：

jquery菜单

$('.menu li').click(function(){
  $(this).animate({
    backgroundColor: '#f0f0f0',
    paddingLeft: '20px'
  }, 200).animate({
    backgroundColor: '#fff',
    paddingLeft: '0'
  }, 200);
});

这些方法涵盖了从基础到高级的jQuery菜单实现技巧，可以根据实际需求组合使用或单独实现特定功能。