文章/答案/技术大牛

发布

用js做左菜单栏

使用JavaScript来创建一个左侧菜单栏是一个常见的任务，通常涉及到HTML、CSS和JavaScript的组合使用。下面是一个简单的示例，展示了如何创建一个基本的左侧菜单栏。

基础概念

HTML: 结构层，用于定义页面的结构。
CSS: 表示层，用于设置页面元素的样式。
JavaScript: 行为层，用于添加交互功能。

示例代码

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>左侧菜单栏</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="sidebar">
        <a href="#home">首页</a>
        <a href="#services">服务</a>
        <a href="#about">关于我们</a>
        <a href="#contact">联系我们</a>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

body {
    margin: 0;
    font-family: Arial, sans-serif;
}

.sidebar {
    height: 100%;
    width: 200px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    padding-top: 20px;
}

.sidebar a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
}

.sidebar a:hover {
    color: #f1f1f1;
}

JavaScript (script.js)

// 这里可以添加一些交互逻辑，例如点击菜单项时高亮显示
document.querySelectorAll('.sidebar a').forEach(link => {
    link.addEventListener('click', function() {
        document.querySelectorAll('.sidebar a').forEach(a => a.classList.remove('active'));
        this.classList.add('active');
    });
});

优势

用户体验: 左侧菜单栏提供了一个直观的方式来导航网站或应用。
结构清晰: 有助于用户快速定位所需信息。
易于实现: 使用HTML、CSS和JavaScript可以轻松创建。

类型

固定式: 菜单栏始终显示在屏幕的一侧。
可折叠式: 用户可以点击按钮来展开或折叠菜单栏。
响应式: 根据屏幕大小自动调整布局。

应用场景

企业网站: 提供清晰的导航结构。
管理后台: 方便管理员快速访问不同功能模块。
单页应用(SPA): 结合前端路由实现无缝导航。

常见问题及解决方法

问题: 菜单项点击后页面没有跳转。原因: 可能是链接的href属性设置错误或者JavaScript阻止了默认行为。 解决方法: 检查href属性是否正确指向目标页面，或者在JavaScript中使用event.preventDefault()来控制默认行为。

问题: 菜单栏在不同设备上显示不一致。原因: 缺乏响应式设计。 解决方法: 使用CSS媒体查询来调整不同屏幕尺寸下的样式。

通过上述示例和解释，你应该能够创建一个基本的左侧菜单栏，并理解其背后的原理和应用场景。如果需要更复杂的功能，如动画效果或与后端的交互，可以进一步扩展JavaScript代码。

页面内容是否对你有帮助？

有帮助

没帮助

：host-context(选择器)不工作

我有一个这样的要求，即有一个左菜单栏，并单击任何链接的<router-outlet></router-outlet>填充了特定的组件。随着组件的填充，我希望那个特定的链接(左侧菜单栏中的li元素)用背景色突出显示。所以我在子组件中尝试这样做： background: red; } 但这是行不通的。

浏览 4提问于2017-06-28得票数 0

1回答

当div使用asp.net中的css调整大小时更改文本对齐方式

、、

我在其中使用了flex容器和div来为我的站点制作一个菜单栏。所有的文本都与中心对齐了。我需要文本对齐左，一旦它调整大小在较小的设备。有什么方法可以用css来完成吗？

浏览 0提问于2018-03-23得票数 0

回答已采纳

1回答

在MacOS中是否有隐藏菜单项目的方法？

我知道我可以在系统首选项中“自动隐藏菜单栏”，但是，我喜欢做的是隐藏像这个存储库这样的项目。这个存储库可以隐藏右边的项目，但是我想知道我是否能够隐藏左项(这是应用程序菜单)。

浏览 2提问于2020-06-14得票数 0

回答已采纳

1回答

用CSS重新定位div

、

我试图使我的菜单栏在向下滚动时从上到左重新定位，我希望菜单元素向下滑动到左边(就像Macromedia Flash中的运动)。我尝试过许多CSS片段，但都没有效果。不管怎么说，用CSS来做这件事吗？或者有什么插件可以让我这么做。

浏览 8提问于2014-01-22得票数 0

回答已采纳

2回答

如何放置水平下拉菜单栏

、、

基本上，我可以做垂直下拉菜单，但我不知道如何做水平下拉菜单栏。这就是我能做的：我想用CSS来做。: absolute; right: 0; z-index: 5; 我删除左:

浏览 6提问于2013-07-23得票数 0

回答已采纳

1回答

slimScroll javascript向左和向右，而不是向上和向下

、、、

我需要一个卷轴，但不是上下我需要左和右不垂直，我需要水平，我使用slimScroll.js，我可以这样做吗，我可以用这个库创建一个上下卷轴，我如何创建左和右。谢谢

浏览 0提问于2013-11-30得票数 0

1回答

全页幻灯片无限滚动

、

用fullPage.js插件可以结束幻灯片的水平卷轴吗？我的意思是，如果我有3张幻灯片(左，中，右)，当你在左边，左箭头消失，你必须回到中间幻灯片时，是否可以这样做。对右边的幻灯片也是一样的。

浏览 4提问于2015-09-13得票数 2

回答已采纳

5回答

如何在使用flexbox时将li元素的文本垂直居中？

、、

我有以下菜单栏： <li><a>A</a></li> <li><a>C</a></li>和以下CSS：ul li { flex: 1, auto; text-align: center; } ul li

浏览 3提问于2015-10-04得票数 2

1回答

仪表板链接不工作

、

如果我点击一个链接(左菜单栏)，总是重定向仪表板/wp/(仪表板主页)。我必须打开一页十次，最后才能到达我想要打开的那一页。是的，所有的链接都存在。我有一个庞大的安装wordpress 4.7.2。-但什么都没变也许这是一个插件可以做(缓存插件)？

浏览 0提问于2018-01-19得票数 3

回答已采纳

2回答

在El Capitan上切换拆分视图中窗格的快捷方式

、

也就是说，预期的行为触发器是取左窗格并使其成为右窗格，取右窗格并使其成为左窗格。

浏览 2提问于2015-10-03得票数 15

1回答

删除全局菜单栏Ubuntu 16.04

、、

当我将光标悬停在菜单栏上，选项出现时，我喜欢这样做。：sudo apt-get remove indicator-appmenu sudo apt-get autoremove appmenu-gtk appmenu-gtk3 appmenu-qt有人知道如何删除全局菜单栏而不打破悬停功能吗？

浏览 0提问于2016-06-10得票数 2

2回答

引导媒体与拉线

、、

我有下面的标题，我试图使用Twitter引导来对其进行响应编码：现在紫色菜单栏我要用肚脐。然而，对于上面的内容，我真的在试图确定最好的方法。我被困在使用媒体或拉左和拉右之间。我真的不知道这样做的最佳方法是什么。对于使用类中内置的引导程序对此进行适当编码的任何建议，我们将不胜感激。请注意，只有标志将是一个图像，其他一切将使用字体和字体图标。

浏览 2提问于2016-02-24得票数 1

回答已采纳

2回答

如何为onlick功能创建无菜单栏的新窗口(electronJS)

、、

我试过了，但这给了我一个带有菜单栏的新窗口。我在main.js文件中使用win.setMenu(null)删除了主窗口菜单栏。但是我找不到在新窗口(“添加项目窗口”)中这样做的方法，请看下面的图片看清楚 onclick="window.open('addNew.html' ,'Add New Item', 'width=900

浏览 12提问于2020-11-09得票数 0

回答已采纳

3回答

在不使用框架的情况下使用菜单构建网站

、、

使用Dreamweaver，我使用框架定义左列菜单，单击每个菜单选项卡将更改显示在右侧框架上的HTML页面。但是，诸如kompozer这样的网页设计工具不支持框架。在不使用框架的情况下，用这样的菜单栏设计HTML个人网页的最佳方法是什么？如果HTML还不够，您会推荐给具有Java背景和HTML和CSS基础知识的人学习哪些其他脚本语言。

浏览 5提问于2012-07-07得票数 1

回答已采纳

1回答

元素不适用于css3中的转换。

、、、、

我是css3动画的新手，我做的是有一个垂直菜单隐藏，然后点击按钮m旋转它使用Y轴，使它可见，但左和右边框旋转以下是我的代码 display: flex; perspective: 1500px;

浏览 2提问于2018-10-22得票数 1

回答已采纳

2回答

在悬停时触发Gtk+菜单栏

、、

我已经用PyGtk+编写了一个Gnome窗口切换器小程序，使用菜单项来表示桌面上运行的不同应用程序。我想做的一件事是，当我将鼠标悬停在菜单栏上时，激活光标下的菜单项。我可以连接到菜单栏上的'enter-notify-event‘，但我不知道当它被触发时该怎么做。这就是我的问题，当我将鼠标悬停在菜单栏的父项上时，如何打开菜单栏的子菜单？

浏览 2提问于2010-04-26得票数 1

回答已采纳

1回答

Java在没有Dock高度的情况下编程计算屏幕高度

、、、、

我需要这样做，使应用程序打开在全高度宽度(没有全屏)，但大小应该是准确的，没有码头(设置一个大的javafx.scene.Scene大小在标题双击行为造成一些问题)。我试过用这个代码：return new Dimension(screenSize.width

浏览 2提问于2015-11-21得票数 0

1回答

为什么在PHP/.NET CMS中所有页面都是使用?id=<number>构建的，而不是直接使用php页面

、、

在PHP/.NET中，我们通常看到网站上的所有页面都使用一个带有id参数的php文件显示。例如：。我们知道每个页面都可以独立构建，比如、2.php等等，那么为什么单个页面要负责使用id参数显示所有页面呢？这种行为在许多.NET网站中也很普遍。

浏览 4提问于2015-04-06得票数 0

回答已采纳

1回答

CSS:无法正确地将元素定位到粘滞的导航栏下面

、、

此外，我在菜单栏中放置了按钮，div容器nav-primary。我想要达到的目标：我希望我的按钮始终保持与菜单栏相同的距离。为此，我需要删除CSS代码top:XXpx;。如果我这么做，我的纽扣就会消失。有人能告诉我，我需要做些什么，才能把按钮准确地排列在菜单栏下面，当滚动时有相同的远处高度？

浏览 3提问于2016-02-22得票数 0

回答已采纳

2回答