1. HTML + CSS secondary menu
<!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">
<!--Big frame-->
<div class="box">
<div class="nav1">
<!--Horizontal navigation bar-->
<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="Shopping Cart (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>
.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; /*Clear the dots before the unordered list*/
width: 100%;
height: 100px;
background: #aa9580;
margin: 0px;
padding-left: 27%;/*left margin, so that the li looks in the middle*/
position: relative;
text-align: center;
top:0;
\t
}
.nav1{<!-- -->
position: fixed;
width: 100%;
background-color: #aa9580;
}
li{<!-- -->
float: left;
width: 15%;
height: 50px;
padding-right: 0px;
margin-right: auto; /*distance between two li*/
background-color: #aa9580;
\t
}
a:link,a:visited{<!-- --> /*Mouse not clicked and clicked outdated styles*/
display: block;
color: #FFFFFF;
background-color: #aa9580;
text-align: center;
line-height: 80px; /*li line height*/
padding: 10px;
text-decoration: none; /*Remove underlining*/
}
a:hover{<!-- --> /*The style when the mouse moves to the clicked position, active refers to the style after clicking*/
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{<!-- -->
\t
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;
\t
flex-direction:row;
justify-content: center;
\t
\t
\t
}
.switch{<!-- -->
position: absolute;
right: 0;
display: inline-block;
width: 70px;
height: 34px;
margin-top: 30px;
margin-left: 30px;
margin-right: 49px;
\t
\t
}
.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;
\t
}
.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;
\t
}
.input:checked + .slider{<!-- -->
background: #dfdbdb;
\t
}
input:checked + .slider::before{<!-- -->
transform: translateX(34px);
background-image: url(face-smile-white.png);
}
.dark-mode{<!-- -->
background-color: #111;
}
2. HTML + less secondary menu (at the end of the article, there are steps for automatically compiling less into css in vscode)
<!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="">Home</a> \t\t\t</li> <li> <a href="">Inception</a> \t\t\t</li> <li> <a href="">Wo Music</a> \t\t\t</li> <li> <a href="">Bookish and refreshing</a> \t\t\t</li> \t\t</ul> </div> </body> </html>
.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; /*Clear the dots before the unordered list*/
width: 100%;
height: 100px;
background: #aa9580;
margin: 0px;
padding-left: 27%;/*left margin, so that the li looks in the middle*/
position: relative;
text-align: center;
top:0;
\t
}
.nav1{<!-- -->
position: fixed;
width: 100%;
background-color: #aa9580;
}
li{<!-- -->
float: left;
width: 15%;
height: 50px;
padding-right: 0px;
margin-right: auto; /*distance between two li*/
background-color: #aa9580;
\t
}
a:link,a:visited{<!-- --> /*Mouse not clicked and clicked outdated styles*/
display: block;
color: #FFFFFF;
background-color: #aa9580;
text-align: center;
line-height: 80px; /*li line height*/
padding: 10px;
text-decoration: none; /*Remove underlining*/
}
a:hover{<!-- --> /*The style when the mouse moves to the clicked position, active refers to the style after clicking*/
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{<!-- -->
\t
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;
\t
flex-direction:row;
justify-content: center;
\t
\t
\t
}
.switch{<!-- -->
position: absolute;
right: 0;
display: inline-block;
width: 70px;
height: 34px;
margin-top: 30px;
margin-left: 30px;
margin-right: 49px;
\t
\t
}
.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;
\t
}
.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;
\t
}
.input:checked + .slider{<!-- -->
background: #dfdbdb;
\t
}
input:checked + .slider::before{<!-- -->
transform: translateX(34px);
background-image: url(face-smile-white.png);
}
.dark-mode{<!-- -->
background-color: #111;
}
3. Vue + less
<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: less in vscode is automatically compiled into css
1.Install the plug-in
2. Click Configure
3. Click Configure
"less.compile": {<!-- -->
"compress": true, // Whether to delete excess whitespace characters
"sourceMap": false, // Whether to create a file directory tree, if true, a .css.map file will be automatically generated
"out": true, // If true, files of the same level will be generated
"outExt": ".css", // The suffix of the output file, the default is .css. If it is a WeChat applet, the suffix is .wxss
}
4. Restart vscode