文档章节

从实战中学前端:顶部导航

有力量的神经病
 有力量的神经病
发布于 2016/12/07 22:21
字数 1420
阅读 21
收藏 2
点赞 0
评论 0

本篇是从实战中学前端的第二篇,上一篇用css实现了几个还不错的按钮,这一篇来实现顶部导航,其中包含二级导航的实现。

首先我们来看看将要实现的导航效果图: 顶部导航效果图

接下来我们要实现的导航功能:

  • 活动导航下滑横线
  • 鼠标悬停于菜单上显示下滑背景
  • 支持二级导航

提示:在第一篇中,我们讲了css的三种用法,这里我们使用第三种即把css放在一个单独的文件中

实现思路:观察导航条我们发现导航分为:大背景、一级菜单、菜单下划线、二级菜单块、二级菜单及部分构成,一级菜单每个菜单是水平一行,而二级菜单是竖行。

这里我们用<ul>标签来实现一个个菜单,<ul>称之为无序列表标签,常用标签之一,其每个子项用<li>标签实现。

html5中新增了<nav>标签,即英文单词navgator的缩写,表示导航,这里我们把nav作为最外层,下面是基本的代码:

<nav>
	<ul>
		<li><a href="#">首页</a></li>
		<li><a href="#">新闻类别</a></li>
		<li><a href="#">技术达人</a></li>
		<li><a href="#">关于我们</a></li>
		<li><a href="#">加入我们</a></li>
	</ul>
</nav>

效果如图:

输入图片说明

这不是我们想要的效果,下面我们写css代码,并给相应的html代码加上类属性,具体功能看注释:

/*class选择器,导航条类*/
.navbar{
	width: 100%;/*宽度100%*/
	z-index: 1000;
	margin: 0;
	padding-top: 5px;
	height: 60px;
}
/*导航条默认样式,便于以后根据需要更改导航条样式*/
.navbar-default {
	background: #323232;
	color: white;
	font-size: 18px;
}
/*导航正文样式*/
.navbar-content{
	position: relative;/*对菜单进行定位,使用相对模式*/
}
.navbar-content ul,li{
	list-style: none;/*屏蔽每个li之间的小圆点(小圆点也可以为其他样式,如方块)*/
}
.navbar-content li{
	padding: 5px;
	float: left;/*使Li左浮动,即实现水平,因为ul默认是竖直的*/
}
.navbar-default>.navbar-content {
	background: #323232;
	color: white;/*文字颜色*/
	font-size: 18px;/*文本大小*/
}



<nav class="navbar navbar-default">
	<ul class="navbar-content">
		<li><a href="#">首页</a></li>
		<li><a href="#">新闻类别</a></li>
		<li><a href="#">技术达人</a></li>
		<li><a href="#">关于我们</a></li>
		<li><a href="#">加入我们</a></li>
	</ul>
</nav>

效果图:

输入图片说明

接下来我们改变文本样式和增加绿色下划线效果:


.navbar {
	width: 100%;
	z-index: 1000;
	margin: 0;
	padding-top: 5px;
	min-height: 60px;
	}
.navbar-content {
	display: block;
}
.navbar-header {
	display: none;
}
.navbar-default {
	background: #323232;
}
.navbar>ul>li {
	float: left;
	width: 130px;
	text-align: center;/*文字居中*/
	list-style: none;
}
.navbar>ul>li>a {
	padding: 17px 0;
	color: rgba(255, 255, 255, 0.8);/*rgba颜色模式,分别代表红绿蓝和透明度值*/
	border-bottom: 5px solid rgba(255, 255, 255, 0);
	text-decoration: none;/*链接取消下划线*/
}
.navbar>ul>li>a:hover,
.navbar>ul>.active>a {
	border-bottom: 5px solid rgba(50, 205, 50, 1);/*底部边框,即那条绿色边框*/
	color: rgba(255, 255, 255, 1);
	width: 130px;
}
.navbar>ul>.active>a {
	padding: 17px;
}

效果图:

输入图片说明

接下来实现二级菜单: 思路:所谓二级菜单不过就是正常情况下隐藏,当鼠标悬浮或滑过时显示,这里可以用css的display属性:display:block显示,display:none;就会隐藏。二级菜单我们仍然放在ul中,只是这次li不需要浮动,让它自然显示。

/*二级导航核心部分*/
.navbar>ul>.dropdown-menu>ul {
        display: none;/*使二级菜单隐藏*/
	position: relative;
	top: 25px;
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
	border: 1px solid #e7e7e7;
	text-align: center;
}
.dropdown-menu>ul>li {
	padding: 12px;
}
.navbar>ul>.dropdown-menu:hover>a {
	border-bottom: 5px solid rgba(50, 205, 50, 1);
	color: rgba(255, 255, 255, 1);
	padding: 17px 15px;
}

.navbar>ul>.dropdown-menu:hover>ul {
	display: block;/*鼠标悬浮即hover属性时显示*/
}

.dropdown-menu>ul a {
	color: #000000;
	font-weight: 500;
	text-decoration: none;
}

.dropdown-menu>ul a:hover {
	color: orangered;
	font-weight: 800;
}

<!--html代码-->
<nav class="navbar navbar-default">
	<ul class="navbar-content">
	<li class="active"><a href="#">首页</a></li>
	<li class="dropdown-menu">
		<a href="#">新闻类别</a>
		<ul>
			<li><a href="#">创业故事</a></li>
			<li><a href="#">今日热点</a></li>
		</ul>
		</li>
		<li><a href="#">技术达人</a></li>
		<li><a href="#">关于我们</a></li>
		<li><a href="#">加入我们</a></li>
	</ul>
</nav>

效果图

输入图片说明

从图中看,这里的实现还有点问题,本文就不去实现了,留给读者自己去实现。

PS:写文真的是一件痛苦的事,本文整体思路感觉有点混乱,上了一天班也只有晚上有空,在第一篇有网友评论鼓励我继续写下去成为一个系列,感谢鼓励。我会努力,纠正我这种懒惰不想写文的思想。

附全部代码:

注:这里我为了方便就放在一个文件里边,建议将css放在一个单独的css文件。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>顶部导航</title>
		<style>
			.navbar {
				width: 100%;
				z-index: 1000;
				margin: 0;
				padding-top: 5px;
				min-height: 60px;
			}
			.navbar-content {
				display: block;
			}
			.navbar-header {
				display: none;
			}
			.navbar-default {
				background: #323232;
			}
			.navbar>ul>li {
				float: left;
				width: 130px;
				text-align: center;
				list-style: none;
			}
			.navbar li {
				list-style: none;
			}
			.navbar>ul>li>a {
				padding: 17px 0;
				color: rgba(255, 255, 255, 0.8);
				border-bottom: 5px solid rgba(255, 255, 255, 0);
				text-decoration: none;
			}
			.navbar>ul>li>a:hover,
			.navbar>ul>.active>a {
				border-bottom: 5px solid rgba(50, 205, 50, 1);
				color: rgba(255, 255, 255, 1);
				width: 130px;
			}
			.navbar>ul>.active>a {
				padding: 17px;
			}
			.navbar>ul>.dropdown-menu>ul {
				display: none;
				position: relative;
				top: 25px;
				box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
				border: 1px solid #e7e7e7;
				text-align: center;
			}
			.dropdown-menu>ul>li {
				padding: 12px;
			}
			.navbar>ul>.dropdown-menu:hover>a {
				border-bottom: 5px solid rgba(50, 205, 50, 1);
				color: rgba(255, 255, 255, 1);
				padding: 17px 15px;
			}
			.navbar>ul>.dropdown-menu:hover>ul {
				display: block;
			}
			.dropdown-menu>ul a {
				color: #000000;
				font-weight: 500;
				text-decoration: none;
			}
			.dropdown-menu>ul a:hover {
				color: orangered;
				font-weight: 800;
			}
		</style>
	</head>
	<body>
		<nav class="navbar navbar-default">
			<ul class="navbar-content">
				<li class="active"><a href="#">首页</a></li>
				<li class="dropdown-menu">
					<a href="#">新闻类别</a>
					<ul>
						<li><a href="#">创业故事</a></li>
						<li><a href="#">今日热点</a></li>
					</ul>
				</li>
				<li><a href="#">技术达人</a></li>
				<li><a href="#">关于我们</a></li>
				<li><a href="#">加入我们</a></li>
			</ul>
		</nav>
	</body>
</html>

© 著作权归作者所有

共有 人打赏支持
有力量的神经病
粉丝 5
博文 16
码字总数 9692
作品 0
成都
程序员
【备忘】2017小凡老师泰牛Web基础班项目实战玩完整版-美团网项目

2017小凡老师泰牛Web基础班项目实战玩完整版-美团网项目 1.对于前端开发人员来说,最核心的技能是什么? 2.前端基础,学的怎么样,能否独立开发一些项目? 3.对css和js掌握的怎么样?了解、熟...

qq_38155396 ⋅ 2017/06/30 ⋅ 0

HTML5开发实战之网易微博 【转】

HTML5在国内外越来越受到互联网开发团队的青睐。国外,谷歌兴致勃勃地开发Chrome Web Store,微软发布了支持使用HTML5技术开发的“Irish Spring”主题网站,诺基亚斥巨资购得并打造的NOKIA M...

曾沙 ⋅ 2012/06/19 ⋅ 8

微信小程序教学第四章第三节(含视频):小程序中级实战教程:详情-功能完善

详情 - 功能完善 本文配套视频地址: v.qq.com/x/page/f055… 开始前请把 分支中的 目录导入微信开发工具 这一节中,我们把详情的其他功能完善起来:下一篇、 分享、 返回列表。 Step 1. 增加...

iKcamp ⋅ 2017/11/03 ⋅ 0

MoMoCMS 企业建站 V3.1 版本更新

更新的地方 1、webkit和IE在前端兼容 2、页面加入侧栏定制功能,每一个页面可以选择不同的侧栏模块 3、页面加入关键字和描述 4、顶部导航、友情链接、底部导航在后台控制,并集中在一个控制菜...

YouYaX开发者 ⋅ 2014/07/22 ⋅ 20

Bootstrap响应式前端框架笔记十——导航栏相关组件

Bootstrap响应式前端框架笔记十——导航栏相关组件 Bootstrap中提供的导航栏分为两种模式,使用nav-tabs类可以创建页卡模式的导航栏,使用nav-pills类可以创建胶囊模式的导航栏,示例如下: ...

珲少 ⋅ 2016/12/12 ⋅ 0

BEM实战之扒一扒淘票票页面

BEM解析 BEM是一套CSS国际命名规范,是一个非常有用的功能强大且简单的命名约定,它能使前端代码更易读,易于理解易于扩展。BEM是块(block)、元素(element)、修饰符(modifier)的缩写。...

TeanLee ⋅ 2017/11/21 ⋅ 0

ONES v0.3 发布,开源 PHP 企业管理软件

基础框架: 优化:前端样式重写,去除ACE Admin代码(因授权问题) 优化:控制面板模块支持拖放及缩放操作,并自动持久化+本地化存储 优化:一级导航栏分离至页面顶部,优化操作体验,不再出...

老法海 ⋅ 2015/03/22 ⋅ 27

一个JS效果竟然要研究一天,我是不是不适合做前端?

前言 今天这篇文章的标题,显然是要搞事情。一个JS交互效果,居然花费了一天的宝贵时间才研究出来,我是不是不太适合做前端? 别急,搬好小板凳,正文从这开始~ 本来今天下班回来感觉有点累...

闰土少年 ⋅ 2017/11/21 ⋅ 0

微信小程序教学第四章第一节(含视频):小程序中级实战教程:详情-页面制作

详情 - 页面制作 本文配套视频地址: v.qq.com/x/page/o055… 开始前请把 分支中的 目录导入微信开发工具 这一章节中,主要介绍详情页的页面制作过程 首先看一下我们最终要展示的页面 页面结...

iKcamp ⋅ 2017/10/31 ⋅ 0

推荐一款可用型原型工具,能生成可用的ext、jqueryui代码

一直以来做web界面都得找美工,找前端页面开发人员,比较郁闷。最近用了一个页面工具,微简的vjpage,基本上解决了这个问题。这是一个可用型原型工具,简单拖拽就可以生成jquery、ext的代码,...

liswhome ⋅ 2016/01/24 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

SAS笔记-宏2

宏是一种文本,一般来说其编译是在程序执行之前。 宏变量的创建 %let语句 %let macro_variables = text; %let是常见的宏变量建立方式,其编译就在执行前。如下例中,想要宏变量test等于数据集...

tonorth123 ⋅ 8分钟前 ⋅ 0

如何使用serverchan微信推送告警

之前实现推送告警信息到微信的方法有如下几种: 1、通过企业公众号实现----收费: 2、通过QQ邮箱,在微信平台上开启收到邮件进行提醒; 3、第三方告警平台API,一般也是收费的; 不过最近看文...

问题终结者 ⋅ 35分钟前 ⋅ 0

TCP的RPC

RPC就是远程方法调用(Remote Process Call ),包含了客户端和服务端,涉及了对象的序列化传输。 1.服务端启动,注册远程调用的类2.客户端发送请求信息包含类、方法、参数的一些信息、序列化传...

Cobbage ⋅ 55分钟前 ⋅ 0

IOS-UI UI初步代码布局添加事件

ISO开发界面,UI是必须学习的一部分,其实很早之前想学来了,一直没有沉下心来学习。看到IOS的代码风格和布局就别扭的不行,跟java代码和android布局比较显得不是那么方便,所以一直到现在。...

京一 ⋅ 今天 ⋅ 0

浅谈OpenDaylight的二次开发

OpenDaylight作为一款开源SDN网络控制器,依托于强大的社区支持以及功能特性,成为了目前主流的SDN网络控制器开发平台。在比较稳定的OpenDaylight Helium版本中,已经为开发者提供了大量的网...

wangxuwei ⋅ 今天 ⋅ 0

API 开发中可选择传递 token 接口遇到的一个坑

在做 API 开发时,不可避免会涉及到登录验证,我使用的是jwt-auth 在登录中会经常遇到一个token过期的问题,在config/jwt.php默认设置中,这个过期时间是一个小时,不过为了安全也可以设置更...

等月人 ⋅ 今天 ⋅ 0

Java NIO之文件处理

程序要操作本地操作系统的一个文件,可以分为以下三个部分: 对文件位置的操作 对文件的操作 对文件内容的操作 其中,对文件内容的操作在 Java NIO之Channel 中已经有了介绍,通过FileChann...

士别三日 ⋅ 今天 ⋅ 0

Maven的pom.xml配置文件详解

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.......

小海bug ⋅ 今天 ⋅ 0

解决httpclient超时设置不生效的问题

最近公司有项目需要通过http调用第三方服务,且第三方服务偶有超时,故需要设置一定的超时时间防止不响应的情况出现。 初始设置如下: [java] view plain copy //超时设置 RequestConfig re...

Mr_Tea伯奕 ⋅ 今天 ⋅ 0

过滤器Filter和拦截器HandlerInterceptor

过滤器 依赖于servlet容器。在实现上基于函数回调,可以对几乎所有请求进行过滤,但是缺点是一个过滤器实例只能在容器初始化时调用一次。使用过滤器的目的是用来做一些过滤操作,获取我们想要...

hutaishi ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部