Lqing0429 2024-05-24 16:30 采纳率: 100%
浏览 1
已结题

有哪位知道这种侧边的菜单导航怎么做

img


有谁知道这种侧边的菜单导航怎么做剪辑菜单三条杠，然后出现啊左面是文字，右面是图片或者左右面全是文字

  • 写回答

3条回答 默认 最新

  • 阿里嘎多学长 2024-05-24 16:30
    关注

    以下内容由CHATGPT及阿里嘎多学长共同生成、有用望采纳：

    要制作一个侧边菜单导航，类似于你提供的图片中展示的样式，你可以按照以下步骤来实现：

    1. HTML结构： 创建一个基本的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">
        <div class="sidebar-trigger">&#9776;</div>
        <ul class="sidebar-menu">
            <li><a href="#"><img src="icon1.png" alt="Icon 1"> 文字1</a></li>
            <li><a href="#">文字2</a></li>
            <li><a href="#">文字3</a></li>
            <!-- 更多菜单项 -->
        </ul>
    </div>
    <div class="main-content">
        <!-- 主内容 -->
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="scripts.js"></script>
</body>
</html>
    1. CSS样式： 使用CSS来设置侧边菜单的样式，包括隐藏和显示菜单的动画效果。
    /* styles.css */
body, html {
    margin: 0;
    padding: 0;
}

.sidebar {
    width: 250px;
    height: 100%;
    position: fixed;
    left: -250px;
    transition: left 0.3s;
    background-color: #333;
    color: white;
}

.sidebar-trigger {
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    cursor: pointer;
    position: absolute;
    right: -50px;
    top: 10px;
    background-color: #555;
    color: white;
}

.sidebar-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-menu li a {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: white;
}

.sidebar-menu li img {
    width: 20px;
    margin-right: 10px;
}
    1. jQuery脚本： 使用jQuery来处理点击事件，实现菜单的展开和收起。
    // scripts.js
$(document).ready(function() {
    $('.sidebar-trigger').click(function() {
        $('.sidebar').animate({left: '0'}, 300);
    });
    
    // 如果需要点击菜单项后关闭菜单，可以添加以下代码
    $('body').click(function(e) {
        if (!$(e.target).closest('.sidebar').length) {
            $('.sidebar').animate({left: '-250px'}, 300);
        }
    });
});

    这个基本的示例应该能够帮你开始制作一个侧边菜单导航。你可以根据需要调整样式和功能。如果你需要更复杂的交互或者动画效果，可能需要进一步学习相关的前端技术。

    由于你没有提供图片链接，我无法引用具体的图片资源。你需要将示例中的icon1.png替换为实际的图片路径。如果你需要进一步的帮助或者有特定的功能需求，请提供更多的信息。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(2条)

报告相同问题？

问题事件

  • 系统已结题 6月1日
  • 已采纳回答 5月24日
  • 创建了问题 5月24日

悬赏问题

  • ¥15 35114 SVAC视频验签的问题
  • ¥15 impedancepy
  • ¥15 在虚拟机环境下完成以下，要求截图！
  • ¥15 求往届大挑得奖作品（ppt…）
  • ¥15 如何在vue.config.js中读取到public文件夹下window.APP_CONFIG.API_BASE_URL的值
  • ¥50 浦育平台scratch图形化编程
  • ¥20 求这个的原理图 只要原理图
  • ¥15 vue2项目中，如何配置环境，可以在打完包之后修改请求的服务器地址
  • ¥20 微信的店铺小程序如何修改背景图
  • ¥15 UE5.1局部变量对蓝图不可见