一个固定二级位置的二级导航

Posted 2021-01-09 hiteme

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了一个固定二级位置的二级导航相关的知识，希望对你有一定的参考价值。

在网上浏览我发现，网上的二级页位置都是随父级走

那可不可以弄一个二级页位置不变的二级导航，于是我弄了个伪二级导航，上代码

html部分，不用说了相信大家都能明白，这里其实不算二级导航，其实是导航ul改变下方div的原理

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<ul>

</ul>

</div>

<li><a href="#">我是卖报的小行家</a></li>

<li><a href="#">不等天明就去卖报</a></li>

<li><a href="#">今天的新闻真的好</a></li>

<li><a href="#">一个同伴就买两份报</a></li>

</ul>

</div>

<ul>

</ul>

</div>

<ul>

</ul>

</div>

<ul>

</ul>

</div>

<ul>

<li><a href="shouye/ykdt/index.html">Pink Champagne</a></li>

<li><a href="shouye/zkzc/index.html">Five More Hours</a></li>

<li><a href="shouye/lxwm/index.html">你曾经是少年</a></li>

</ul>

</div>

<ul>

</ul>

</div>

<ul>

</ul>

</div>

// 用jq做文字滚动效果，为啥不用原生呢，。。。。。

// 因为我懒

// 为啥不写外部呢。。。。

// 还是因为我懒

$(function () {

var num = 0;

function goLeft() {

//750是根据你给的尺寸，可变的

if (num == -1300) {

num = 0;

}

num -= 1;

$(".scroll").css({

left: num

})

}

//设置滚动速度

var timer = setInterval(goLeft, 10);

//设置鼠标经过时滚动停止

$(".box").hover(function () {

clearInterval(timer);

function () {

timer = setInterval(goLeft, 10);

})

</script>

</body>

</html>

css部分就一些基础的样式

list-style: none;

text-decoration: none;

padding: 0;

margin: 0

}

/* 导航栏 */

.top_nav_two{

width: 100%;

height: 65px;

}

.top_nav_two ul {

margin: auto;

width: 1200px;

height: 100%;

padding: 0;

list-style: none;

background-color: #e64650;

}

.top_nav_two ul li {

display: inline-block;

list-style: none;

margin-left: 37px;

font-size: 17px;

text-align: center;

font-family: MicrosoftYaHei;

font-weight: 400;

color: rgba(255, 255, 255, 1);

}

.top_nav_two ul li a {

text-decoration: none;

color: #fff;

margin-bottom: 20px;

}

.top_nav_two ul li .top_nav_two_span {

height: 0px;

display: inline-block;

background: rgba(255, 255, 255, 1);

}

.top_nav_two ul li:hover .top_nav_two_span {

height: 2px;

}

/* 滚动文字 */

.winBox {

width:1150px;

height:40px;

overflow:hidden;

margin: auto;

position:relative;

}

.winBox1{

width:300px;

height:40px;

overflow:hidden;

float: right;

z-index: 5;

margin-right: 15%;

position:relative;

}

.scroll {

/*width的大小是根据下面li的长度和多少个li而定的，需注意！*/

width:1700px;

height: 40px;

position:absolute;

left:0px;

top:0px;

}

.scroll li {

width:150px;

float:left;

line-height:40px;

text-align:center;

}

/* 获取到funavc的第一个元素 */

.funav .funavc:first-child {

position: absolute;

width: 100%;

}

/* 二级列表样式 */

.funav{

position: relative;

height: 50px;

background-color: #fff;

}

.funav li{

height: 100%;

float: left;

margin-right: 30px;

}

.funav li a{

display: block;

height: 48px;

text-align: center;

color: #4A4A4A;

padding: 0 10px;

}

.funav li a:hover{

color: #E00000;

}

.funav .funavcur a{

border-bottom: 2px solid #E00000;

}

.funavc{

position: relative;

display: none;

margin:auto;

width:1200px;

height:100%;

color:#4A4A4A;

font-size:14px;

line-height:50px;

font-size: 14px;

}

.funavc_1{

display: block;

}

js部分：相对来说js部分只有判断div位置有点复杂，其他的很简单

var topNavTwo = document.getElementsByClassName("top_nav_two")[0],

topNavTwoUl = topNavTwo.getElementsByTagName("ul")[0],

topNavTwoLi = topNavTwoUl.getElementsByTagName("li"),

funavc = document.getElementsByClassName("funavc"),

OwinBox = document.getElementsByClassName("winBox")[0],

topNavTwoLiSpan = document.getElementsByClassName("top_nav_two_span");

// 入口函数

function init() {

mou_thr();

hovers();

divHovers();

};

// 鼠标经过时头顶的横条

function mou_thr() {

for (var i = 0; i < topNavTwoLi.length; i++) {

topNavTwoLiSpan[i].style.width = topNavTwoLi[i].clientWidth + "px";

};

//鼠标经过li时发生div切换

function hovers() {

for (var i = 1; i < topNavTwoLi.length; i++) {

(function (i) {

topNavTwoLi[i].onmouseenter = function () {

for (var j = 1; j < topNavTwoLi.length; j++) {

funavc[j].classList.remove("funavc_1");

OwinBox.classList.add("winBox1")

}

funavc[i].classList.add("funavc_1");

}

})(i)

};

}

// 当鼠标移出div时进行判断，超出div范围执行，若没进入div范围则无影响

function divHovers() {

for (var i = 1; i < topNavTwoLi.length; i++) {

(function (i) {

// 这里会形成闭包，所以用立即执行函数，

funavc[i].onmouseleave = function (event) {

// 判断鼠标位置，如果超出div范围则改变

var x = event.clientX;//获取鼠标位置

var y = event.clientY;//获取鼠标位置

var divx1 = funavc[i].offsetLeft;//div位置

var divy1 = funavc[i].offsetTop;//div位置

var divx2 = funavc[i].offsetLeft + funavc[i].offsetWidth;

var divy2 = funavc[i].offsetTop + funavc[i].offsetHeight;

if (x < divx1 || x > divx2 || y < divy1 || y > divy2) {

funavc[i].classList.remove("funavc_1");

OwinBox.classList.remove("winBox1");

};

})(i);

};

init();

以上是关于一个固定二级位置的二级导航的主要内容，如果未能解决你的问题，请参考以下文章

鼠标下滑到一定的高度时二级导航条固定在顶部

怎么用vue.js实现一个二级导航栏

jQuery用jQuery实现定位滚动导航效果

一个简单的二级导航

jquery实现的点击二级下拉导航菜单

vue 二级导航重定向，二级导航默认选中某一项的问题