纯css下拉导航栏

最新推荐文章于 2023-12-28 18:29:15 发布

-殇

最新推荐文章于 2023-12-28 18:29:15 发布

阅读量415

点赞数 1

文章标签：前端纯css 导航栏

本文链接：https://blog.csdn.net/qq_37377764/article/details/102497246

版权

二级菜单栏body部分格式，也可通过遍历显示

<body>
   <div class="com">
        <div class="level">
        	//div可以更换成a标签或者遍历添加点击事件，来添加跳转功能
            <div>首页</div>
            <div>
                栏目1
                <ul class="two">
                    <li>二级菜单1</li>
                    <li>二级菜单2</li>
                    <li>二级菜单3</li>
                </ul>
            </div>
            <div>
                栏目2
                <ul class="two">
                    <li>二级菜单4</li>
                    <li>二级菜单5</li>
                    <li>二级菜单6</li>
                </ul>
            </div>
            <div>
                栏目3
                <ul class="two">
                    <li>二级菜单7</li>
                    <li>二级菜单8</li>
                    <li>二级菜单9</li>
                </ul>
            </div>
            <div>
                栏目4
                <ul class="two">
                    <li>二级菜单10</li>
                    <li>二级菜单11</li>
                    <li>二级菜单12</li>
                </ul>
            </div>
        </div>
        <div class="content">内容</div>
    </div>
</body>

导航栏在顶部的css样式，颜色自行更改，不用在意
在这里插入图片描述

<style>
    * {
        padding: 0;
        margin: 0;
    }
    
    ul {
        list-style: none;
    }
    
    .com>.level {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
    }
    
    .com>.level>div {
        width: 20%;
        height: 42px;
        line-height: 42px;
        text-align: center;
        background: #409EFF;
        font-size: 16px;
        transition: 0.5s;
        color: #fff;
        cursor: pointer;
    }
    
    .com>.level>div:hover {
        background: blue;
    }

    /* 鼠标滑过一级菜单后的显示二级菜单 */
    .com>.level>div:hover>.two {
        display: block;
    }

    /* 先使二级菜单的内容隐藏 */
    .com .two {
        display: none;
        width: 20%;
        background: blue;
        position: absolute;
    }

    .com .two>li {
        height: 42px;
        line-height: 42px;
        transition: 0.5s;
        cursor: pointer;
    }
    
    .com .two>li:hover {
        background: red;
    }

	.com>.content{
		margin-top:42px;
	}
</style>

侧边导航需要稍微修改body的内容和css样式，同时添加左侧和右侧的滚动条（左边隐藏滚动条）
在这里插入图片描述

<style>
	* {
			padding: 0;
			margin: 0;
		}

		html,
		body {
			width: 100%;
			height: 100%;
		}

		ul {
			list-style: none;
		}

		.com {
			display: flex;
			height: 100%;
			max-height: 100%;
		}

		/* 隐藏滚动条，处理兼容问题 */
		.com .level {
			width: 200px;
			height: 100%;
			overflow-y: scroll;
			background: #e8e8e8;
			overflow: hidden;
			overflow-y: scroll;
			/* 兼容火狐 */
			scrollbar-width: none;
			/* 兼容IE10 */
			-ms-overflow-style: none;
			/* 兼容欧朋 */
			overflow: -moz-scrollbars-none;
		}

		/* 兼容谷歌，苹果 */
		.level::-webkit-scrollbar {
			display: none;
		}

		.com .level>div {
			line-height: 42px;
			text-align: center;
			background: #409EFF;
			font-size: 16px;
			color: #fff;
			cursor: pointer;
		}

		.com .level>div:hover {
			background: blue;
		}

		/* 鼠标滑过一级菜单后的显示二级菜单 */
		.com .level>div:hover>.two {
			display: block;
		}

		/* 先使二级菜单的内容隐藏 */
		.com .two {
			display: none;
			background: blue;
		}

		.com .two>li {
			height: 42px;
			line-height: 42px;
			transition: 0.5s;
			cursor: pointer;
		}

		.com .two>li:hover {
			background: red;
		}

		.com>.content {
			width: calc(100% - 200px);
			height: 100%;
			max-height: 100%;
			overflow: hidden;
			overflow-y: scroll;
		}
</style>

<body>
	<div class="com">
		<div class="level">
			<div>首页</div>
			<div>
				栏目1
				<ul class="two">
					<li>二级菜单1</li>
					<li>二级菜单2</li>
					<li>二级菜单3</li>
				</ul>
			</div>
			<div>
				栏目2
				<ul class="two">
					<li>二级菜单4</li>
					<li>二级菜单5</li>
					<li>二级菜单6</li>
				</ul>
			</div>
			<div>
				栏目3
				<ul class="two">
					<li>二级菜单7</li>
					<li>二级菜单8</li>
					<li>二级菜单9</li>
				</ul>
			</div>
			<div>
				栏目4
				<ul class="two">
					<li>二级菜单10</li>
					<li>二级菜单11</li>
					<li>二级菜单12</li>
				</ul>
			</div>
		</div>
		<div class="content">内容</div>
	</div>
</body>