HTML+CSS、Vue+less+、HTML+less 组件封装实现二级菜单切换样式跑（含全部代码）

可可鸭~2023-11-11 9:47
一、HTML+CSS二级菜单
html 复制代码 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="nav.css" />
    <script src="bottom.js" defer></script>
  </head>
  <body id="body">
    <!--大框架-->
    <div class="box">
      <div class="nav1">
        <!--横向导航栏-->
        <div id="logo" class="logo">
          <p><img src="logo.png" width="100px" height="99px" /></p>
        </div>
        <ul>
          <li class="special"><a href="#"> HOME</a></li>
          <li class="special"><a href="#"> PRODUCT </a></li>
          <li class="special"><a href="#"> LOGIN</a></li>
          <li class="special"><a href="#"> ABOUT </a></li>

          <!-- <div id="container">
                       
                            <span style="display: inline-block; width:100px;margin-top:31px ;margin-left: -23px;font-size:x-large;">⚫</span>
                        <label class="switch">
                            <input type="checkbox" οnclick="changeMode()">
                            <span class="slider"></span>
                           
                        </label>
                        <span style="display:inline-block;margin-top:31px;margin-right: -17px;font-size:x-large;width: 100px;">⚪</span>
                       
                    </div> -->
          <script>
            function changeMode() {
              var element = document.body;
              element.classList.toggle("dark-mode");
            }
          </script>
        </ul>
        <div class="gou"><img src="购物车 (1).png" /></div>
        <div id="container">
          <!-- <span style="display: inline-block; width:100px;margin-top:31px ;margin-left: -23px;font-size:x-large;">⚫</span> -->
          <label class="switch">
            <input type="checkbox" onclick="changeMode()" />
            <span class="slider"></span>
          </label>
          <!-- <span style="display:inline-block;margin-top:31px;margin-right: -17px;font-size:x-large;width: 100px;">🎁</span> -->
        </div>

        <div id="bottom">Back to top</div>
      </div>
    </div>
  </body>
</html>
css 复制代码 
.box{
	position: relative;
 z-index: 20;
 background-color: #111;
}
.logo{
	position: absolute;
	left: 0px;
	z-index: 40;
	top: -15px;
	bottom: 0px;
}
body{
	height: 3000px;
	background: #f7f0e9;
	transition: .4s;
	margin: 0px;
}

ul{
	list-style-type: none; /*清除无序列表前的小点*/
	width: 100%;
	height: 100px;
	background: #aa9580;
	margin: 0px;
	padding-left: 27%;/*左边距，使li看起来在中间*/
	position: relative;
 
	text-align: center;
	top:0;
	
}
.nav1{
	position: fixed;
	width: 100%;
	background-color: #aa9580;
 
}
li{
	float: left;
	width: 15%;
	height: 50px;
	padding-right: 0px;
	margin-right: auto;  /*两个li之间的距离*/
	background-color: #aa9580;
	
}
a:link,a:visited{ /*鼠标未点击和点击过时的样式*/
	display: block;
	color: #FFFFFF;
	background-color: #aa9580;
	text-align: center;
	line-height: 80px; /*li行高*/
	padding: 10px;
	text-decoration: none; /*去下划线*/
}
a:hover{ /*鼠标移动到点击位时的样式，active指点击过后的样式*/
	background-color: #8d7256;
}

#bottom { background-color: rgb(129, 192, 242);
	 position: fixed; 
	 right: 20px; 
	 bottom: 20px; 
	 text-align: center;
		width: 90px; 
		height: 90px; 
		line-height: 90px; 
		color: #fff; 
		border-radius: 50%; 
		display: none; 
		cursor: pointer; } 
#bottom:hover { background-color: rgb(45, 150, 233); }
.special{
	font-size: 25px;
}
div{
	display: flex;
}
.gou{
	
	height: 50px;
	margin-left: 0;
	width: 50px;
	margin-right: 20px;
	margin-top: 20px;
	left: 0px;
	right: 100px;
}



#container{
	width: 10%;
	height: 100px;
	display: flex;
	position: absolute;
	right: 0px;
	left: 1420px;

	
	flex-direction:row;
	justify-content: center;
	

	

	
}
.switch{
	position: absolute;
	right: 0;
	display: inline-block;
	width: 70px;
	height: 34px;
	margin-top: 30px;
	margin-left: 30px;
	margin-right: 49px;
	
	
}
.switch input{
	display: none;
}
.slider{
	position: absolute; 
	cursor: pointer;
	top:0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #8d7256;
	border-radius: 34px;
	transition: .4s;
	
}
.slider::before{
	content: '';
	position: absolute;
	width:26px;
	height: 26px;
	left: 4px;
	bottom: 4px;
	/* background-color: #111; */
	border-radius: 34px;
	transition: .4s;
	background-image: url(face-smile-black.png);
	background-size:27px 27px;
 
	
}
.input:checked + .slider{
	background: #dfdbdb;
	
}
input:checked + .slider::before{
	transform: translateX(34px);
	background-image: url(face-smile-white.png);

}
.dark-mode{
	background-color: #111;
}
二、HTML+less二级菜单(文章尾部有vscode中less自动编译成css步骤)
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="navLess.css" />
</head>
<body>
	<div class="nav">
		<ul>
			<li>
			<a href="">	主页</a>
			</li>
			<li>
				<a href="">盗梦空间</a>
			</li>
			<li>
				<a href="">沃音乐</a>
			</li>
			<li>
				<a href="">书香沁鼻</a>
			</li>
		</ul>
	</div>
</body>
</html>
css 复制代码 
.box{
	position: relative;
 z-index: 20;
 background-color: #111;
}
.logo{
	position: absolute;
	left: 0px;
	z-index: 40;
	top: -15px;
	bottom: 0px;
}
body{
	height: 3000px;
	background: #f7f0e9;
	transition: .4s;
	margin: 0px;
}

ul{
	list-style-type: none; /*清除无序列表前的小点*/
	width: 100%;
	height: 100px;
	background: #aa9580;
	margin: 0px;
	padding-left: 27%;/*左边距，使li看起来在中间*/
	position: relative;
 
	text-align: center;
	top:0;
	
}
.nav1{
	position: fixed;
	width: 100%;
	background-color: #aa9580;
 
}
li{
	float: left;
	width: 15%;
	height: 50px;
	padding-right: 0px;
	margin-right: auto;  /*两个li之间的距离*/
	background-color: #aa9580;
	
}
a:link,a:visited{ /*鼠标未点击和点击过时的样式*/
	display: block;
	color: #FFFFFF;
	background-color: #aa9580;
	text-align: center;
	line-height: 80px; /*li行高*/
	padding: 10px;
	text-decoration: none; /*去下划线*/
}
a:hover{ /*鼠标移动到点击位时的样式，active指点击过后的样式*/
	background-color: #8d7256;
}

#bottom { background-color: rgb(129, 192, 242);
	 position: fixed; 
	 right: 20px; 
	 bottom: 20px; 
	 text-align: center;
		width: 90px; 
		height: 90px; 
		line-height: 90px; 
		color: #fff; 
		border-radius: 50%; 
		display: none; 
		cursor: pointer; } 
#bottom:hover { background-color: rgb(45, 150, 233); }
.special{
	font-size: 25px;
}
div{
	display: flex;
}
.gou{
	
	height: 50px;
	margin-left: 0;
	width: 50px;
	margin-right: 20px;
	margin-top: 20px;
	left: 0px;
	right: 100px;
}



#container{
	width: 10%;
	height: 100px;
	display: flex;
	position: absolute;
	right: 0px;
	left: 1420px;

	
	flex-direction:row;
	justify-content: center;
	

	

	
}
.switch{
	position: absolute;
	right: 0;
	display: inline-block;
	width: 70px;
	height: 34px;
	margin-top: 30px;
	margin-left: 30px;
	margin-right: 49px;
	
	
}
.switch input{
	display: none;
}
.slider{
	position: absolute; 
	cursor: pointer;
	top:0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #8d7256;
	border-radius: 34px;
	transition: .4s;
	
}
.slider::before{
	content: '';
	position: absolute;
	width:26px;
	height: 26px;
	left: 4px;
	bottom: 4px;
	/* background-color: #111; */
	border-radius: 34px;
	transition: .4s;
	background-image: url(face-smile-black.png);
	background-size:27px 27px;
 
	
}
.input:checked + .slider{
	background: #dfdbdb;
	
}
input:checked + .slider::before{
	transform: translateX(34px);
	background-image: url(face-smile-white.png);

}
.dark-mode{
	background-color: #111;
}
三、Vue+less
xml 复制代码 
<template>
	<view class="fu-tabs">
		<view class="fu-tabs-item" v-for="(item,index) in tabs" :key="index" 
		:class="checkedIndex===index?'checked':null" @click="checkHandler(index)">{{ item }}</view>
	</view>
</template>

<script>
	export default{
		props:{
			tabs:{
				type:Array,
				default:()=>[]
			},
			checked:{
				type:Number,
				default:0
			}
		},
		data(){
			return{
				checkedIndex:this.checked
			}
		},
		methods:{
			checkHandler(index){
				this.checkedIndex = index
				this.$emit('change',index)
			}
		}
	}
</script>

<style scoped>
	page{
		background-color: #fff;
	}
	.fu-tabs{
		display: flex;
		margin: 15px;
	}
	.fu-tabs-item{
		padding: 10px;
		color: #333;
		box-sizing: border-box;
		border: 1px solid rgba(222, 222, 222, 1);
	}
	.fu-tabs-item:nth-child(1){
		border-top-left-radius: 4px;
		border-bottom-left-radius: 4px;
	}
	.fu-tabs-item:last-child{
		border-top-right-radius: 4px;
		border-bottom-right-radius: 4px;
	}
	.checked{
		color: #1e98d7;
		border: 1px solid #1e98d7;
		background-color: #d1eaf7;
	}
</style>

ps:vscode中less自动编译成css

1.安装插件

2.点击配置

3.点击配置

css 复制代码 
  "less.compile": {
    "compress": true, // 是否删除多余空白字符
    "sourceMap": false, // 是否创建文件目录树，true的话会自动生成一个 .css.map 文件
    "out": true, // 如果是true就会生成同级文件
    "outExt": ".css", // 输出文件的后缀,默认为.css 如果是微信小程序后缀为.wxss
  }

4.重启vscode

相关推荐
苹果酱056712 分钟前
「Mysql优化大师一」mysql服务性能剖析工具
java·vue.js·spring boot·mysql·课程设计
WebDeveloper200115 分钟前
如何使用美国域名中心US Domain Center和WordPress创建商业网站
运维·服务器·css·网络·html
真的很上进4 小时前
如何借助 Babel+TS+ESLint 构建现代 JS 工程环境？
java·前端·javascript·css·react.js·vue·html
web130933203984 小时前
vue elementUI form组件动态添加el-form-item并且动态添加rules必填项校验方法
前端·vue.js·elementui
supermapsupport6 小时前
iClient3D for Cesium在Vue中快速实现场景卷帘
前端·vue.js·3d·cesium·supermap
m0_748254886 小时前
vue+elementui实现下拉表格多选+搜索+分页+回显+全选2.0
前端·vue.js·elementui
Hello_WOAIAI7 小时前
批量将 Word 文件转换为 HTML：Python 实现指南
python·html·word
sanguine__7 小时前
APIs-day2
javascript·css·css3
苹果醋37 小时前
Golang的文件加密工具
运维·vue.js·spring boot·nginx·课程设计
关你西红柿子8 小时前
小程序app封装公用顶部筛选区uv-drop-down
前端·javascript·vue.js·小程序·uv
热门推荐
0119个Web前端交互式3D JavaScript框架和库02ARM学习（31）编译器对overlay方式的支持03玄机平台应急响应—webshell查杀04RAG 实践- Ollama+RagFlow 部署本地知识库05【一文读懂】NTN（非地面网络）技术介绍06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07ZZ038 物联网应用与服务赛题第J套08组基轨迹建模 GBTM的介绍与实现（Stata 或 R）09Docker 夺命连环 15 问10VSCode插件 —— Cody AI （免费AI助手！）