CSS完成导航栏固定不■动的、上下拖动的翻转条

2021-01-20 23:33 jianzhan

如上实际效果的导航栏,导航栏是固定不动在顶端的,能够上下拖动点一下大量选择项的。

这类制作非常简易,文中仅仅提几个方面留意:

固定不动部位

莱单固定不动在顶端没动,应用 position:fixed; top:0; left:0;。同时要留意:

  • 下边目录下移相对的部位,不然开启网页页面时,正下方目录会被遮挡住一一部分。
  • 为莱单设定情况,不然全透明得话,与下边目录翻转上去的內容会重合显示信息。
  • 为 body 设定情况,由于手机微信访问器默认设置有一个情况色(并不是乳白色),将会会与大家的实际效果矛盾,按需设定情况。

应用 table

一般大家应用 ul、li 作 float,可是当一行显示信息不下时,要让它难落到第二行得话,较为不便,因此大家强烈推荐应用 table。

下列是全部 CSS 编码,在其中 .wrapper 是表层,.nav、.list 是弟兄。

body, .wrapper 
{ 
background:#fff; 
}

.nav 
{ 
position:fixed; 
top:0;
 left:0; padding:0; 
width:100%; 
height:60px; 
overflow-x:scroll; 
background:#fff; 
}
.nav table 
{ 
width:720px;
 border-collapse:collapse;
 }
.nav table td 
{
 padding-top:10px; 
padding-bottom:10px; 
width:80px; 
text-align:center; 
}
.nav table td a 
{ 
line-height:40px; 
font-size:14px; 
font-weight:bold; 
}
.nav table td.cur a 
{ 
box-sizing:border-box; 
border-bottom:2px solid #f07515; color:#f07515; 
}

.list 
{ 
margin-top:60px; 
}

动态性限制总宽

上边 CSS 编码为 table 设定了 720px,即 9 个 td 的总宽,一般大家莱单总数是固定不动的,因此立即那么设定,可是假如不固定不动得话,能够运用程序来动态性设定,例如 JavaScript 设定方式:

$(".header table").width($(".header table td").length * $(".header table td").width());

选定后边的莱单项时,显示信息后边的莱单项

针对非 Ajax 网页页面,点一下后边的莱单页时,网页页面更新,随后显示信息最左侧的好多个莱单项,大家能够运用 JavaScript 翻转莱单项,使当今选定项显示信息出去,实例编码以下:

var count = 0;
$(".header table td").each(function () {
	if ($(this).hasClass("cur")) {
		return false;
	}
	count++;
});
if (count >= 3) { // 选定前边好多个时不翻转
	count -= 2; // 无须滚到最左侧
	$(".header").get(0).scrollLeft = count * $(".header table td").width();
}

小结

到此这篇有关CSS完成导航栏固定不动的、上下拖动的翻转条制作方式的文章内容就详细介绍到这了,大量有关css 导航栏固定不动上下拖动翻转条內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容,期待大伙儿之后多多的适用脚本制作之家!