导航栏样式HTML,[JavaScript 实例] 导航栏几种常见样式
这里记录下导航栏几种常见的样式,仅供大家参考。
导航栏1 (原生 JS 代码)
比较常见也比较简单的导航栏 ,用的 JavaScript 原生代码,大致思路是通过改变 li 元素的 className 实现鼠标移动切换 tab 时改变其背景色及文字颜色,同时切换显示 tab 对应内容。
nav-1.gif
导航栏1-JS原生版
* {
margin: 0;
padding: 0;
}
body {
font: 12px/2 "Courier New";
}
#header {
width: 550px;
height: 200px;
margin: 20px auto;
border: 1px solid #e1e1e1;
}
#nav {
list-style-type: none;
}
#nav li {
width: 110px;
height: 35px;
background: #fff;
float: left;
color: #000;
text-align: center;
line-height: 35px;
cursor: pointer;
border-bottom: 1px solid #e1e1e1;
font-weight: bold;
}
#nav li.active {
background: #11ac63;
color: #fff;
}
#content {
padding: 50px 30px;
}
#content ul {
display: none;
}
#content .list {
display: block;
}
window.onload = function() {
var aLi = document.getElementById("nav").getElementsByTagName("li");
var oUl = document.getElementById("content").getElementsByTagName("ul");
var i = 0;
for (i = 0; i < aLi.length; i++) {
aLi[i].index = i;
aLi[i].onmouseover = function() {
for (var x in aLi) {
aLi[x].className = "";
oUl[x].className = "";
}
this.className = "active";
oUl[this.index].className = "list";
};
aLi[i].onmouseout = function() {
this.className = "";
aLi[this.index].className = "active";
};
}
};
- 华为
- 苹果
- 小米
- 三星
- 一加
- 华为 Mate20
- 华为 P20
- 华为荣耀 10
- iPhone XS
- iPhone XS MAX
- iPhone 8
- 小米 8
- 小米 8 SE
- 小米 Play
- 三星 Note 9
- 三星 S9 +
- 三星 A8s
- 一加手机 6
- 一加手机 6T
- 一加手机 5T
导航栏1(jQuery 代码)
还是第一种导航栏样式,通过 jQuery 实现,思路不变。
导航栏2
* {
margin: 0;
padding: 0;
}
body {
font: 12px/2 "Courier New";
}
#header {
width: 550px;
height: 200px;
margin: 20px auto;
border: 1px solid #e1e1e1;
}
#nav {
list-style-type: none;
}
#nav li {
width: 110px;
height: 35px;
background: #fff;
float: left;
color: #000;
text-align: center;
line-height: 35px;
cursor: pointer;
border-bottom: 1px solid #e1e1e1;
font-weight: bold;
transition: 0.5s;
}
#nav li.active {
background: #fff;
color: #11ac63;
}
#content {
padding: 50px 30px;
}
#content ul {
display: none;
}
#content .list {
display: block;
}
$(function() {
$("#nav li").each(function(index) {
$(this).mouseover(function() {
$("#nav .active").removeClass("active");
$("#content .list").removeClass("list");
$(this).addClass("active");
$("#content ul:eq(" + index + ")").addClass("list");
});
});
});
- 华为
- 苹果
- 小米
- 三星
- 一加
- 华为 Mate20
- 华为 P20
- 华为荣耀 10
- iPhone XS
- iPhone XS MAX
- iPhone 8
- 小米 8
- 小米 8 SE
- 小米 Play
- 三星 Note 9
- 三星 S9 +
- 三星 A8s
- 一加手机 6
- 一加手机 6T
- 一加手机 5T
导航栏2
使用 jQuery 代码,思路与第一种一样,通过改变 li 元素的 className 实现,只是不改变 tab 的背景色而只改变字体颜色,也是比较常见的导航栏样式之一。为了更好的显示效果,顺便给切换标签时字体颜色的改变加了渐变效果。
nav-2.gif
导航栏2
* {
margin: 0;
padding: 0;
}
body {
font: 12px/2 "Courier New";
}
#header {
width: 550px;
height: 200px;
margin: 20px auto;
border: 1px solid #e1e1e1;
}
#nav {
list-style-type: none;
}
#nav li {
width: 110px;
height: 35px;
background: #fff;
float: left;
color: #000;
text-align: center;
line-height: 35px;
cursor: pointer;
border-bottom: 1px solid #e1e1e1;
font-weight: bold;
transition: 0.5s;
}
#nav li.active {
color: #11ac63;
}
#content {
padding: 50px 30px;
}
#content ul {
display: none;
}
#content .list {
display: block;
}
$(function() {
$("#nav li").each(function(index) {
$(this).mouseover(function() {
$("#nav .active").removeClass("active");
$("#content .list").removeClass("list");
$(this).addClass("active");
$("#content ul:eq(" + index + ")").addClass("list");
});
});
});
- 华为
- 苹果
- 小米
- 三星
- 一加
- 华为 Mate20
- 华为 P20
- 华为荣耀 10
- iPhone XS
- iPhone XS MAX
- iPhone 8
- 小米 8
- 小米 8 SE
- 小米 Play
- 三星 Note 9
- 三星 S9 +
- 三星 A8s
- 一加手机 6
- 一加手机 6T
- 一加手机 5T
导航栏3
使用 jQuery 代码,鼠标移动切换标签时 tab 背景色会通过滑动的方式切换至目标位置。实现思路是在之前导航栏样式基础上多加了个 li 标签,指定该 li 元素的定位类型为 absolute,同时还需设置其父元素为 relative 定位。然后在 JS 代码中修改上述 li 标签的 left 属性值,并且指定其文本内容(可获取当前 tab 的文本内容)。当然,最重要的是给该 li 标签添加过渡属性,否则 tab 切换就没有滑动效果了。
nav-3.gif
导航栏3
* {
margin: 0;
padding: 0;
}
body {
font: 12px/2 "Courier New";
}
#header {
width: 550px;
height: 200px;
margin: 20px auto;
border: 1px solid #e1e1e1;
}
#nav {
list-style-type: none;
position: relative;
}
#nav li {
width: 110px;
height: 35px;
background: #fff;
float: left;
color: #000;
text-align: center;
line-height: 35px;
cursor: pointer;
border-bottom: 1px solid #e1e1e1;
font-weight: bold;
}
#nav li.active {
position: absolute;
background: #11ac63;
color: #fff;
left: 0;
transition: 0.5s;
}
#content {
padding: 50px 30px;
}
#content ul {
display: none;
}
#content .list {
display: block;
}
$(function() {
$(".tab").hover(function() {
var index = $(".tab").index(this);
$(".active").css("left", 110 * index + "px");
setTimeout(function() {
$(".active").html($(".tab:eq(" + index + ")").html());
}, 250);
$("#content .list").removeClass("list");
$("#content ul:eq(" + index + ")").addClass("list");
});
});
- 华为
- 华为
- 苹果
- 小米
- 三星
- 一加
- 华为 Mate20
- 华为 P20
- 华为荣耀 10
- iPhone XS
- iPhone XS MAX
- iPhone 8
- 小米 8
- 小米 8 SE
- 小米 Play
- 三星 Note 9
- 三星 S9 +
- 三星 A8s
- 一加手机 6
- 一加手机 6T
- 一加手机 5T
导航栏4
使用 jQuery 代码,与上一种导航栏样式实现思路大致相同,只是把新添加的 li 更换为 div,同样设置好该 div 及其父元素的定位类型,并根据 tab 的高度自行调整 div 的高度及 top 属性值。除了该 div 无需设置文本内容外,还加入了 tab 切换时改变字体颜色,其他部分则上一种样式基本一致。
nav-4.gif
导航栏4
* {
margin: 0;
padding: 0;
}
body {
font: 12px/2 "Courier New";
}
#header {
width: 550px;
height: 200px;
margin: 20px auto;
border: 1px solid #e1e1e1;
}
#nav {
list-style-type: none;
position: relative;
}
#nav li {
width: 110px;
height: 35px;
background: #fff;
float: left;
color: #000;
text-align: center;
line-height: 35px;
cursor: pointer;
border-bottom: 1px solid #e1e1e1;
font-weight: bold;
}
#nav .active {
position: absolute;
background: #11ac63;
color: #fff;
top: 32px;
left: 0;
transition: 0.5s;
width: 110px;
height: 3px;
text-align: center;
}
#content {
padding: 50px 30px;
}
#content ul {
display: none;
}
#content .list {
display: block;
}
#nav .tab {
color: #11ac63;
transition: 0.5s;
}
$(function() {
$("#nav li").hover(function() {
var index = $("#nav li").index(this);
$(".active").css("left", 110 * index + "px");
$("#nav .tab").removeClass("tab");
$(this).addClass("tab");
$("#content .list").removeClass("list");
$("#content ul:eq(" + index + ")").addClass("list");
});
});
- 华为
- 苹果
- 小米
- 三星
- 一加
- 华为 Mate20
- 华为 P20
- 华为荣耀 10
- iPhone XS
- iPhone XS MAX
- iPhone 8
- 小米 8
- 小米 8 SE
- 小米 Play
- 三星 Note 9
- 三星 S9 +
- 三星 A8s
- 一加手机 6
- 一加手机 6T
- 一加手机 5T
导航栏样式HTML,[JavaScript 实例] 导航栏几种常见样式相关推荐
- matlab排版形式是什么样子,工作型PPT,图文排版的4种常见样式
原标题:工作型PPT,图文排版的4种常见样式 图片是PPT中最好用的一种元素,正所谓"一图抵过千言". 但要想让图片真正地发挥价值,图文排版的好坏非常关键.本期将聊聊4种图文排版的 ...
- JavaScript 数组拼接打印_8种常见数据结构及其Javascript实现
摘要: 面试常问的知识点啊- 原文:常见数据结构和Javascript实现总结 作者:MudOnTire Fundebug经授权转载,版权归原作者所有. 做前端的同学不少都是自学成才或者半路出家,计算 ...
- 在vue中怎么写行内样式高_13.VUE学习之控制行内样式
vue 测试一 测试二 测试三 var app = new Vue({ el: "#vue", data:{ red:"red", size:28, div2: ...
- 微信小程序之顶部导航栏(选项卡)实例 —— 微信小程序实战系列(1)
需求:顶部导航栏 效果图: wxml: <!--导航条--> <view class="navbar"><text wx:for="{{na ...
- 微信小程序之导航栏样式修改、自定义导航栏及封装
在微信小程序中我们会经常看到不同字样的顶部标题,这样的样式有的是一样的,而有的却又是不同的导航栏,这是怎么回事呢,在这里我们就探讨一下.(微信小程序json文件不能有注释,复制过去的时候有注释记得自行 ...
- android仿咸鱼底部导航栏,Flutter沉浸式状态栏/AppBar导航栏/仿咸鱼底部凸起导航栏效果...
如下图:状态栏是指android手机顶部显示手机状态信息的位置. android 自4.4开始新加入透明状态栏功能,状态栏可以自定义颜色背景,使titlebar能够和状态栏融为一体,增加沉浸感. 如上 ...
- html 导航栏设计,在网页中设计导航菜单的三个原则(附案例)
导航菜单可能是网页设计中最重要的部分了.每个用户浏览网站时一定有所需,因此导航菜单能够帮助用户寻找信息.好的导航菜单像是导游,告诉用户网站是干什么的,内容分类有哪些,在哪里可以找到什么信息. 而且导航 ...
- uni-app实现小程序沉浸式导航栏/顶部组件占满导航栏
uni-app实现小程序沉浸式导航栏/顶部组件占满导航栏 如果你只是想单纯的让屏幕最上方的那个组件(比如swiper)将通知栏(导航栏)填充满,那么你只需要在page.json文件中加入以下代码到你想 ...
- vue制作导航栏html,vue实现nav导航栏的方法
vue实现nav导航栏的方法 2019-01-07 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了vue实现nav导航栏的方法,编程之家小编觉得挺不错的,现在分 ...
最新文章
- 【MATLAB】matlab 文档使用 ( 文档查询 | 文档层次 | 自带搜索工具 | 帮助命令 | 学习导引 )
- 拳王虚拟项目公社:0成本的售卖高考资料的虚拟资源的其他最简单最轻松玩法
- 【报告分享】2021-2022年中国人工智能创投数据报告.pdf(附下载链接)
- 微信提示点击右上角浏览器中打开
- 电脑虎牙,虎牙助手主播版电脑版
- JS生成验证码、卡密,生成指定位数的字符串
- 取消全部呼叫转移代码_怎么取消呼叫转移-那些你不知道的功能,手机忘记带也能接电话,一个代码全搞定...
- MapReduce处理两个文件内不同行信息
- 覃卫平java,湖南省职业教“十一五”省级重点建设项目验收通过的项目.doc
- Hardware-in-the-loop End-to-end Optimization of Camera Image Processing Pipelines阅读笔记
- Excel 检测离群值 Outlier,极端值判断教学
- 谷歌浏览器无法更新解决办法
- Linux常见查看命令
- 迅睿CMS 万网虚拟主机无法连接数据库
- B2c购物网(一) 数据库关系图
- 中芯微 高精度实时定位_智慧工厂uwb高精度定位系统产品优势及解决案例简介...
- 如何测试电脑软件重复或多,如何快捷找出电脑内的重复文件(两个工具)
- 用递归法求数组最大值
- 数字孪生系统(开发)
- OpenCV开发笔记(七十四):OpenCV3.4.1+ffmpeg3.4.8交叉编译移植到海思平台Hi35xx平台
热门文章
- 六年级语文计算机个人研修计划,小学语文个人研修计划书
- 苹果开发测试设备达到100台上限
- 程序员2014年展望未来的八个小提示
- ios架构与开发第七课 UI层架构与点赞实战
- Unity ui点击事件只响应最上层ui的方式
- 转身以及低眉侧目 开始
- 思科笔记-One 什么是ip地址,ip地址分类和范围,网络手机流量单位换算
- “libgomp.so.1: version `GOMP_4.0' not found” || “libstdc++.so.6: version `CXXABI_1.3.8' not found”错误
- robocopy命令+部分xxcopy命令
- NOIP 2014 试做