如何将网站移动端视图的下拉列表改为汉堡图标

云上老周

2026-8-3

问题描述

我正在开发一个网站模板，目前移动端视图显示的是下拉菜单，但我想改成汉堡图标样式。作为后端开发者，处理这类前端问题有点吃力，已经看过CSS和JS文件，但不知道要改哪些地方，求帮忙。

HTML代码

<div class="twelve columns">
    <div id="navigation">
        <ul id="nav">
            <li>                        
                @Html.ActionLink("Home", "Index", "Home")                   
            </li>
            <li>
                @Html.ActionLink("Services", "Services", "Home")
            </li>
            <li>
                @Html.ActionLink("Products", "Products", "Home")
            </li>
            <li>
                @Html.ActionLink("About", "About", "Home")
            </li>
            <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
            
        </ul>
    </div>
</div>

CSS代码

.selectnav {display: none; cursor: pointer; width: 100%; padding: 8px; height: 37px; 
float: left; font-size: 14px;}
 #navigation {float: right;}
 #navigation ul, #navigation li {list-style:none; padding:0; margin:0; 
 display:inline; }
 #navigation ul li{float:left; position:relative;}

#navigation ul li a { 
display: inline-block;
color: #888;
padding: 31px 12px 28px 12px;
margin: 0 5px;
text-decoration: none;
font-size: 14px;
border-bottom: 3px solid transparent;
z-index: 1000;
position: relative;
}

#navigation ul li a:hover{
border-bottom: 3px solid #555;
}

#navigation ul ul {
opacity: 0; 
margin: -2px 0 0 5px;
filter: alpha(opacity=0); 
position: absolute;
top:-99999px; 
left: 0;
background: #fff;
border: 1px solid #dddddd;
border-top: 3px solid #555;
z-index: 999;
}

#navigation ul ul li a:hover {
border-bottom: 1px solid #ddd;
}

#navigation ul ul li a {
padding: 8px 0;
display: block;
width: 150px;
margin: 0 16px;
font-weight: normal;
font-size: 13px;
border-bottom: 1px solid #dddddd;
border-top: 1px solid transparent;
}

#navigation ul ul ul { 
position:absolute; 
top:-99999px; 
left:100%; 
opacity: 0;
margin: -3px 0 0 0;
z-index: 999;
}

#navigation ul ul ul li a { 
border-bottom: 1px solid #dddddd !important;
border-top: 1px solid transparent;
}

#navigation ul ul li:last-child a, #navigation ul ul li:last-child a:hover {border-bottom: 1px solid transparent}
#navigation ul ul ul li:last-child a {border-bottom: 1px solid transparent !important}
#navigation ul li:hover>ul{ opacity: 1; position:absolute; top:99%; left:0;}
#navigation ul ul li:hover>ul{ position:absolute; top:0; left:100%; opacity: 1; z-index:497; background: #fff; border: 0; }
#navigation ul li:hover > a {color: #444;}
#navigation ul ul li:hover > a {border-top: 1px solid transparent; color: #444;}
#current {font-weight: 600 !important; color: #444 !important; border-bottom: 3px solid #555 !important;}

JavaScript代码

/*!
* SelectNav.js (v. 0.1)
* Converts your <ul>/<ol> navigation into a dropdown list for small screens
*/

window.selectnav = (function(){

"use strict";
    
var selectnav = function(element,options){
  
  element = document.getElementById(element);

  // return immediately if element doesn't exist  
  if( ! element) 
      return;

  // return immediately if element is not a list
  if( ! islist(element) ) 
      return;

  document.documentElement.className += " js";

  // retreive options and set defaults
  var o = options || {},
      
      activeclass = o.activeclass || 'active',
      autoselect = typeof(o.autoselect) === "boolean" ? o.autoselect : true,
      nested = typeof(o.nested) === "boolean" ? o.nested : true,
      indent = o.indent || "→",
      label = o.label || "- Navigation -",
      
      // helper variables
      level = 0,
      selected = " selected ";

  // insert the freshly created dropdown navigation after the existing navigation
  element.insertAdjacentHTML('afterend', parselist(element) );

  var nav = document.getElementById(id());
  
  // autoforward on click
  if (nav.addEventListener) nav.addEventListener('change',goTo);
  if (nav.attachEvent) nav.attachEvent('onchange', goTo);
  
  return nav;
  
  function goTo(e){
      
      // Crossbrowser issues - http://www.quirksmode.org/js/events_properties.html
      var targ;
      if (!e) e = window.event;
      if (e.target) targ = e.target;
      else if (e.srcElement) targ = e.srcElement;
      if (targ.nodeType === 3) // defeat Safari bug
          targ = targ.parentNode; 
  
      if(targ.value) window.location.href = targ.value; 
  }
  
  function islist(list){
      var n = list.nodeName.toLowerCase();
      return (n === 'ul' || n === 'ol');
  }
  
  function id(nextId){
      for(var j=1; document.getElementById('selectnav'+j);j++);
      return (nextId) ? 'selectnav'+j : 'selectnav'+(j-1);
  }

  function parselist(list){

      // go one level down
      level++;

      var length = list.children.length,
          html = '',
          prefix = '',
          k = level-1
          ;

      // return immediately if has no children
      if (!length) return;
  
      if(k) {
          while(k--){
              prefix += indent;
          }
          prefix += " ";
      }
      
      for(var i=0; i < length; i++){  
    
          var link = list.children[i].children[0];
          var text = link.innerText || link.textContent;      
          var isselected = '';
  
          if(activeclass){
              isselected = link.className.search(activeclass) !== -1 || 
        link.parentElement.className.search(activeclass) !== -1 ? selected : '';  
          }
  
          if(autoselect && !isselected){
              isselected = link.href === document.URL ? selected : '';
          }
          
          html += '<option value="' + link.href + '" ' + isselected + '>' + prefix + 
      text +'</option>';
  
          if(nested){
              var subElement = list.children[i].children[1];
              if( subElement && islist(subElement) ){
                  html += parselist(subElement);
              }
          }
      }
      
      // adds label
      if(level === 1 && label) html = '<option value="">' + label + '</option>' + 
 html;
  
      // add <select> tag to the top level of the list
      if(level === 1) html = '<select class="selectnav" id="'+id(true)+'">' + html + 
'</select>';

      // go 1 level up
      level--;

      return html;
  }

};

return function (element,options) { 
  selectnav(element,options);
};

})();

解决方案

要把移动端的下拉菜单改成汉堡图标触发的展开菜单，需要做以下几处修改：

1. 新增汉堡按钮的HTML结构

在导航容器内添加汉堡按钮，放在原<ul>前面：

<div id="navigation">
  <!-- 汉堡按钮 -->
  <button id="hamburger-btn" class="hamburger">☰</button>
  <ul id="nav">
    <!-- 原导航项保持不变 -->
    <li>                        
      @Html.ActionLink("Home", "Index", "Home")                   
    </li>
    <li>
      @Html.ActionLink("Services", "Services", "Home")
    </li>
    <li>
      @Html.ActionLink("Products", "Products", "Home")
    </li>
    <li>
      @Html.ActionLink("About", "About", "Home")
    </li>
    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
  </ul>
</div>

2. 修改CSS，添加移动端适配规则

通过媒体查询控制汉堡按钮和导航列表的显示/隐藏，调整移动端导航的布局：

/* 汉堡按钮基础样式，默认隐藏 */
.hamburger {
  display: none;
  background: none;
  border: none;
  font-size: 24px;
  color: #888;
  cursor: pointer;
  padding: 10px;
}

/* 移动端适配（屏幕宽度≤768px时生效） */
@media (max-width: 768px) {
  /* 隐藏原水平导航 */
  #navigation #nav {
    display: none;
    position: absolute;
    top: 60px;
    right: 0;
    background: #fff;
    border: 1px solid #ddd;
    width: 200px;
    z-index: 1001;
  }

  /* 菜单展开时显示 */
  #navigation #nav.active {
    display: block;
  }

  /* 移动端导航项改为垂直排列 */
  #navigation #nav li {
    float: none;
    display: block;
  }

  #navigation #nav li a {
    padding: 12px 16px;
    border-bottom: 1px solid #ddd;
    margin: 0;
  }

  /* 显示汉堡按钮 */
  .hamburger {
    display: block;
    float: right;
  }

  /* 隐藏原来的下拉菜单 */
  .selectnav {
    display: none !important;
  }

  /* 调整导航容器布局 */
  #navigation {
    float: none;
    position: relative;
  }
}

/* 保留原有的桌面端CSS样式不变 */
#navigation {float: right;}
#navigation ul, #navigation li {list-style:none; padding:0; margin:0; display:inline; }
#navigation ul li{float:left; position:relative;}

#navigation ul li a { 
display: inline-block;
color: #888;
padding: 31px 12px 28px 12px;
margin: 0 5px;
text-decoration: none;
font-size: 14px;
border-bottom: 3px solid transparent;
z-index: 1000;
position: relative;
}

/* 其余原有CSS代码保持不变 */

3. 添加JS控制菜单切换逻辑

注释掉原有的SelectNav调用，新增汉堡按钮的点击事件：

// 注释掉原来的selectnav调用（如果项目里有写的话，比如：selectnav('nav');）

// 页面加载完成后绑定事件
document.addEventListener('DOMContentLoaded', function() {
  const hamburgerBtn = document.getElementById('hamburger-btn');
  const navList = document.getElementById('nav');

  // 点击汉堡按钮切换菜单显示状态
  hamburgerBtn.addEventListener('click', function() {
    navList.classList.toggle('active');
  });

  // 点击导航项后自动收起菜单（可选）
  const navLinks = navList.querySelectorAll('a');
  navLinks.forEach(link => {
    link.addEventListener('click', function() {
      navList.classList.remove('active');
    });
  });
});

4. 移除或禁用原SelectNav逻辑

如果不需要原来的下拉菜单功能，直接删除调用selectnav('nav')的代码即可，这样就不会再生成移动端下拉菜单了。

内容的提问来源于stack exchange，提问作者JPeter

如何将网站移动端视图的下拉列表改为汉堡图标

HTML代码 #

CSS代码 #

JavaScript代码 #

1. 新增汉堡按钮的HTML结构 #

2. 修改CSS，添加移动端适配规则 #

3. 添加JS控制菜单切换逻辑 #

4. 移除或禁用原SelectNav逻辑 #