web前端demo(1)一个flex圣杯布局的导航栏

最新推荐文章于 2024-05-11 00:01:17 发布

置顶局部

最新推荐文章于 2024-05-11 00:01:17 发布

阅读量711

点赞数

分类专栏： demo 文章标签： demo web前端原生javascript flex less

本文链接：https://blog.csdn.net/weixin_42680737/article/details/81023968

版权

demo 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

今天面试的时候超级尴尬，居然连最简单的jsDOM操作都忘记了，那就自己回去老老实实从头开始练吧

先看看结果

首先是html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>flex导航栏</title>
        <link rel="stylesheet" href="css/demo.css" charset="utf-8">
        <!-- 导入jQuery -->
        <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
    </head>
    <body>
        <header>
            高度自适应
            <nav>
                <ul data-active="0">
                    <li class="nav-active" data-index="0">首页</li>
                    <li data-index="1">联系我们</li>
                    <li data-index="2">快车</li>
                    <li data-index="3">出租车</li>
                    <li data-index="4">专车</li>
                </ul>
                <div class="nav-next show-block">1</div>
                <div class="nav-next">2</div>
                <div class="nav-next">3</div>
                <div class="nav-next">4</div>
                <div class="nav-next">5</div>
            </nav>
        </header>
        <content>
            <div class="sidebar">
                sidebar固定宽度180px 高度自适应
            </div>
            <div class="main">
                main 高度自适应 宽度自适应
            </div>
        </content>
        <footer>
            footer固定底部 高度自适应
        </footer>
    </body>
    <script src="js/demo.js"></script>
</html>

用了点什么语义化标签

然后是less文件

*{
    margin: 0;
    cursor: default;
}
li {
    list-style: none;
}
.show-block {
    display: block !important;
}
body{
    display: flex;
    flex-flow: column wrap;
    margin: 0 auto;
    width: 80%;
}
header {

    nav {
        display: flex;
        flex-flow: column;
        justify-content: center;
        ul {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: center;
            li {
                padding: 5px 20px;
                border: 1px solid #c0c0c0;
                border-radius: 1em 1em 0 0;
                background-color: #EAEA9D;
                &:hover {
                    background-color: #E0A800;
                }
            }
            .nav-active {
                background-color: #F7FF03 !important;
            }
        }
    }
    .nav-next {
        display: none;
        border: 1px solid #c0c0c0;
        height: 8em;
        background-color: #F7FF03;
    }
}
content {
    display: flex;
    flex-flow: row nowrap;
    height: 100vh;
    .sidebar {
        width: 180px;
        background-color: #4CA8FD;
    }
    .main {
        flex: 1;
        background-color: #E81847;
    }
}
footer {
    height: 8em;
    background-color: #c0c0c0;
}

最后用js实现了一个导航栏的切换功能

const log = console.log.bind(console)
const nav = function() {
    var ul = $('ul')
    var liItem = $('ul>li')
    var navItem = $('nav>.nav-next')
    var index = ul[0].dataset.active
    var liClass = 'nav-active'
    var divClass = 'show-block'
    index = Number(index)
    ul.click(function(event) {
        var t = event.target
        if (t.nodeName == 'LI') {
            $(liItem[index]).removeClass(liClass)
            $(navItem[index]).removeClass(divClass)
            index = t.dataset.index
            //多余的操作，为了逻辑严谨
            ul[0].dataset.active = index
            $(liItem[index]).addClass(liClass)
            $(navItem[index]).addClass(divClass)
        }

    })
}

var __main = function() {
    nav()
}
__main()

第一次写博客，由于是写完之后才决定发，所以完全没有过程描述，计划三天一篇博客，但是由于刚刚开始写，所以可能每天都会写一个DEMO
找不到工作好烦啊

局部

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
web前端demo(1)一个flex圣杯布局的导航栏

今天面试的时候超级尴尬，居然连最简单的jsDOM操作都忘记了，那就自己回去老老实实从头开始练吧首先是html&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;flex导航栏&lt;/title&gt; &amp
复制链接

扫一扫