后台项目前端首页的搭建(菜单的显示是通过鼠标滑动显示子菜单)

本文链接：https://blog.youkuaiyun.com/sosososolong/article/details/107650926

这篇博客介绍了如何在不依赖前端模板的情况下，手动构建后台项目的前端首页，特别是菜单部分，采用鼠标滑动来展示子菜单。内容涵盖HTML5和CSS3的使用，以及如何借助jQuery处理tab栏中iframe页面的打开操作。此外，还引用了'font-awesome.min.css'库和使用背景图片作为tab栏关闭按钮。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

后台项目的前端首页部分的实现

后台一般用的都是前端模板, 已经自带了菜单等绝大部分我们所需要的组件, 不过有时候如果只是做一个很小的工具, 就想自己动动手尽量少用插件, 熟悉一下前端的一些操作, css样式也是模仿别人的, 图标引用了"font-awesome.min.css", 另外对tab栏iframe页面的打开操作需要写一点js代码, 引用了jQuery, tab栏的关闭按钮是一个背景图片

看图

鼠标滑动到菜单上显示子菜单打开iframe页面的样子

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Demo</title>
    <link rel="stylesheet" href="font/css/font-awesome.min.css" /> <!--菜单图标插件-->
    <style>
        html, body {
     width: 100%; height: 100%; }
        body {
     margin: 0; padding: 0; font-family: PingFangSC-Regular,Microsoft YaHei,SimSun,Arial,Helvetica,Verdana,sans-serif !important; color: #333; font-size: 12px; overflow: hidden; }
        ul, li {
     list-style: none; margin: 0; padding: 0; }
        a {
     color: #000000; text-decoration: none; }
        a:hover {
     color: #000000; text-decoration: none; }
        .frame-menu {
     position: absolute; top: 0; width: 80px; height: 100%; background-color: #282E3B; margin: 0; z-index: 2; }
        .frame-menu-wrap {
     position: relative; height: 100%; }
        .scroll-box {
     height: 100%; }
        .first-menu-list {
     padding-top: 35px; }
        /* 不管是第几级菜单下面的li都是relative定位 */
        .frame-menu li {
     position: relative; }
        /* .first-menu-list > li:first-of-type > .menu-item { margin-top: 5px; } */
        /* 第一级菜单设置为白色 */
        .first-menu-list > li > .menu-item {
     height: 64px; font-size: 12px; color: #F8F8F8; text-align: center; margin-top: 20px; }
        .menu-item {
     display: block; overflow: hidden; }
        /* 背景色7个为一循环 */
        .first-menu-list > li:nth-of-type(7n+1) > .menu-item > .menu-item-icon {
     background-color: #985CE2; }
        .first-menu-list > li:nth-of-type(7n+2) > .menu-item > .menu-item-icon {
     background-color: #6A9AE1; }
        .first-menu-list > li:nth-of-type(7n+3) > .menu-item > .menu-item-icon {
     background-color: #45B1DF; }
        .first-menu-list > li:nth-of-type(7n+4) > .menu-item > .menu-item-icon {
     background-color: #48D4D7; }
        .first-menu-list > li:nth-of-type(7n+5) > .menu-item > .menu-item-icon {
     background-color: #3089DC; }
        .first-menu-list > li:nth-of-type(7n+6) > .menu-item > .menu-item-icon {
     background-color: #E4474D; }
        .first-menu-list > li:nth-of-type(7n) > .menu-item > .menu-item-icon {
     background-color: #3398DC; }
        .first-menu-list > li > .menu-item > .menu-item-icon {
     display: block; width: 40px; height: 40px; font-size: 20px; line-height: 40px; border-radius: 5px; margin: 0 auto 7px; }
        .first-menu-list > li > .menu-item > .menu-item-text {
     display: block; }
        .first-menu-list > li > .menu-item > .menu-item-arrow {
     display: block; position: absolute; top: 57px; left: 65px; }
        /* "line-height"具有继承性, 所有的li和li下面的a标签的line-height都是28了, 高也成28了 */
        .second-menu-list {
     position: absolute; top: 0; left: 74px; width: 135px; line-height: 28px; padding: 3px 0; background-color: #FFF; border: 1px solid #ccc; border-radius: 3px; }
        .second-menu-list li {
     margin: 4px 0; }
        .second-menu-list .menu-item {
     padding-left: 10px; color: #333; }
        .second-menu-list .menu-item-icon {
     width: 18px; margin-right: 5px; color: #333; }
        /* 为了让.menu-item-text左对齐 */
        .second-menu-list .menu-item-text {
     position: absolute; top: 0; left: 30px; }
        /* 二级菜单的">"来自于font-awesome插件的"\f105" */
        .second-menu-list > .menu-had:after {
     font: normal normal normal 14px/1 FontAwesome; content: "\f105"; color: #333; position: absolute; top: 8px; right: 10px; }        
        .three-menu-list {
     position: absolute; top: 0; left: 133px; width: 130px; padding: 4px 0; background-color: #fff; border: 1px solid #ccc; }
        .second-menu-list, .three-menu-list {
     display: none; }
        .first-menu-list > li:hover > .second-menu-list {
     display: block; }
        /* 鼠标进入第一级菜单, 显示对应的第二级菜单 */
        .first-menu-list > li:hover > .menu-item > .menu-item-arrow {
     width: 0; height: 0; border: 8px solid transparent; position: absolute; border-right-color: white; border-left: none; top: 50%; left: 67px; margin-top: -20px; z-index: 10; }
        .second-menu-list > li:hover {
     background-color: #eee; }
        /* 鼠标进入第二级菜单, 显示对应的第三级菜单 */
        .second-menu-list > li:hover > .three-menu-list {
     display: block; }

        /*******************首页头部**********************/
        .frame-top {
     position: absolute; box-sizing: border-box; width: 100%; top: 0; left: 0; background-color: #fff; height: 60px; line-height: 60px; z-index: 1; }