<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
line-height: 1.5;
}
.topnav {
position: relative;
z-index: 2;
font-size: 17px;
background-color: #5f5f5f;
color: #f1f1f1;
width: 100%;
padding: 0;
letter-spacing: 1px;
font-family: "Segoe UI", Arial, sans-serif;
}
.menu-bar .menu-button {
white-space: normal;
}
.menu-bar .menu-bar-item {
padding: 8px 16px;
float: left;
width: auto;
border: none;
outline: none;
display: block;
}
a.topnav-icons {
width: 52px !important;
font-size: 20px !important;
padding-top: 11px !important;
padding-bottom: 13px !important;
}
.topnav a {
padding: 10px 15px 9px 15px !important;
}
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
}
.menu-left {
float: left!important;
}
.menu-btn,
.menu-button {
border: none;
display: inline-block;
outline: 0;
padding: 8px 16px;
vertical-align: middle;
overflow: hidden;
text-decoration: none;
color: inherit;
background-color: inherit;
text-align: center;
cursor: pointer;
white-space: nowrap;
z-index: 200;
}
.menu-bar .menu-bar-item {
padding: 8px 16px;
float: left;
width: auto;
border: none;
outline: none;
display: block;
}
a:hover {
background: black;
}
.ss {
background: red;
}
#sel {
position: absolute;
background: red;
opacity: 0.5;
}
</style>
</head>
<body>
<div class="menu-card-2 topnav" id="topnav" style="position: relative;">
<div style="overflow:auto;">
<div class="menu-bar menu-left" style="width:100%;overflow:hidden; position: relative;" id="menu_container">
<a class="menu-bar-item menu-button initial" title="HTML Tutorial">HTML</a>
<a class="menu-bar-item menu-button active" title="CSS Tutorial">CSS</a>
<a class="menu-bar-item menu-button" title="JavaScript Tutorial">JAVASCRIPT</a>
<a class="menu-bar-item menu-button" title="SQL Tutorial">SQL</a>
<div class="menu-bar-item menu-button" id="sel"></div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
var left = $(this).position().left;
left: left
)
});
})
</script>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
line-height: 1.5;
}
.topnav {
position: relative;
z-index: 2;
font-size: 17px;
background-color: #5f5f5f;
color: #f1f1f1;
width: 100%;
padding: 0;
letter-spacing: 1px;
font-family: "Segoe UI", Arial, sans-serif;
}
.menu-bar .menu-button {
white-space: normal;
}
.menu-bar .menu-bar-item {
padding: 8px 16px;
float: left;
width: auto;
border: none;
outline: none;
display: block;
}
a.topnav-icons {
width: 52px !important;
font-size: 20px !important;
padding-top: 11px !important;
padding-bottom: 13px !important;
}
.topnav a {
padding: 10px 15px 9px 15px !important;
}
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
}
.menu-left {
float: left!important;
}
.menu-btn,
.menu-button {
border: none;
display: inline-block;
outline: 0;
padding: 8px 16px;
vertical-align: middle;
overflow: hidden;
text-decoration: none;
color: inherit;
background-color: inherit;
text-align: center;
cursor: pointer;
white-space: nowrap;
z-index: 200;
}
.menu-bar .menu-bar-item {
padding: 8px 16px;
float: left;
width: auto;
border: none;
outline: none;
display: block;
}
a:hover {
background: black;
}
.ss {
background: red;
}
#sel {
position: absolute;
background: red;
opacity: 0.5;
}
</style>
</head>
<body>
<div class="menu-card-2 topnav" id="topnav" style="position: relative;">
<div style="overflow:auto;">
<div class="menu-bar menu-left" style="width:100%;overflow:hidden; position: relative;" id="menu_container">
<a class="menu-bar-item menu-button initial" title="HTML Tutorial">HTML</a>
<a class="menu-bar-item menu-button active" title="CSS Tutorial">CSS</a>
<a class="menu-bar-item menu-button" title="JavaScript Tutorial">JAVASCRIPT</a>
<a class="menu-bar-item menu-button" title="SQL Tutorial">SQL</a>
<div class="menu-bar-item menu-button" id="sel"></div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
$('a').ready(function() {
//点击事件
$('a').on('click', function() {
//获取当前标签的宽度值(返回值为具体数字)
$('#sel').width($(this).width());$('#sel').height($(this).height());
//获取鼠标点击标签的位置
var top = $(this).position().top;var left = $(this).position().left;
$('#sel').animate({
//加入位置信息
top: top,left: left
},
//动画时长
500)
});
})
</script>
</html>