精选文章 好看的网站首页,顶部多层导航

好看的网站首页,顶部多层导航

作者:藥師YS 时间: 2020-07-27 01:13:19
藥師YS 2020-07-27 01:13:19

好看的网站首页,顶部多层导航1

之前有做过一个侧边多层导航, 原本觉得还不错,但是用着用着感觉不太方便,就把它改了改,变成了现在这样的

先说一下功能吧,当鼠标悬浮导航栏是,会显示对应导航栏下的内容,可以根据需求放入链接或者方法。当导航栏下内容超出页面时,会出现美化过的滚动条。背景图片和导航栏背景色可以根据喜好自己更改。

对了,图片里的网站链接我没放进去,是一些挺好用的网站,如果要的话可以在下面评论区说一下。

好了,开始写代码

第一步,HTML代码

       
				
        

第二步,为HTML设置样式

	
		*{
			margin: 0;
			padding: 0;
			list-style: none;
			text-decoration: none;
			color: white;
			text-align: center;
		}
		body{
			min-height: 100vh;
            /*背景图片路径*/
			background: url(https://raw.githubusercontent.com/szharf/hello-world/master/images/%E4%B9%A6%E6%88%BF.jpg) no-repeat; 
			background-size:100% 100%;
			font-family: "微软雅黑";
		}
		#navigate{
			width: 80%; 
			height: 50px;
			margin: auto;
			background-color: rgba(205,104,57,0.8) ;
		}
		.labels{
			border-bottom:solid gainsboro 1px;
			float: left;
			width: 25%;
			line-height: 50px;
			font-size: 20px;
			}
		.tab{
			display: none;
			background-color:rgba(238,118,33,0.8);
			overflow:auto; 
			appearance:none;
			-moz-appearance:none;
			-webkit-appearance:none;
			font-size: 16px;
			line-height: 40px;
			}
		/*美化滚动条*/
		.tab::-webkit-scrollbar-track {
			-webkit-box-shadow:inset 0 0 3px rgba(238,118,33,0.3);
			background-color:#F5F5F5;
		}
		.tab::-webkit-scrollbar {
			width:5px;
			background-color:#font: 5px F5 F5;;
		}
		.tab::-webkit-scrollbar-thumb {
			background-color:#CD6839;
			border:2px solid #CD6839;
		}
	

第三步,用jQuery添加事件

$(function(){
			//鼠标悬浮显示div的内容
			$(".labels_1").mouseover(function () {
				  $(".one").slideDown();
				  //鼠标离开,div隐藏
			}).mouseleave(function () {
				$(".one").slideUp(); 	
			 })
			 //2
			$(".labels_2").mouseover(function () {
				$(".two").slideDown();
			}).mouseleave(function () {
				$(".two").slideUp(); 	
			 })
			 //3
			$(".labels_3").mouseover(function () {
				$(".three").slideDown();
			}).mouseleave(function () {
				$(".three").slideUp(); 	
			 })
			 //4
			$(".labels_4").mouseover(function () {
				$(".four").slideDown();
			}).mouseleave(function () {
				$(".four").slideUp(); 	
			 })
			 
			 //获取页面高度,减去顶部高度
			 var height =$(window).height()-51;
			 //获取内容的高度
			 var height1 =$('.one').outerHeight();
			 //判断div高度是否大于页面高度
			 if(height1>=height){
					//当div高度大于页面高度时,为div设置高度
					$(".one").height(height);
			 }
			 var height2 =$('.two').outerHeight();
			 if(height2>=height){
				  $(".two").height(height);
			 }
			 var height3 =$('.three').outerHeight();
			 if(height3>=height){
				  $(".three").height(height);
			 }
			 var height4 =$('.four').outerHeight();
			 if(height4>=height){
				  $(".four").height(height);
			 }
		})

好了,很简单,这就已经完成了

勿删,copyright占位
分享文章到微博
分享文章到朋友圈

上一篇:vnc远程桌面,vnc远程桌面如何恢复历史数据

下一篇:pytorch 利用netron可视化网络结构

您可能感兴趣

  • .NET实现大文件上传

    最近遇见一个需要上传超大大文件的需求,调研了七牛和腾讯云的切片分段上传功能,因此在此整理前端大文件上传相关功能的实现。 在某些业务中,大文件上传是一个比较重要的交互场景,如上传入库比较大的Excel表格数据、上传影音文件等。如果文件体积比较大,或者网络条件不好时,上传的时间会比较长(要传输更多的报文,丢包重传的概率也更大),用户不能刷新页面,只能耐心等待请求完成。 下面从文件上传方式入手,整...

  • 2020前端面试专题整理

    全是从网上整理的(狗头保命) vue3.0 与vue2.0的区别:https://juejin.im/post/6844904128628391944 目录结构发生变化: 移除了配置文件目录(config与build文件夹),但是多了env.production与env.development,除了文件位置,实际配置和2.0没有什么不同,没有config文件,跨域配置转移到vue.confi...

  • 「鹿班智能设计平台」是如何工作的

    目录 商业设计大脑的三大挑战 可控的视觉生成过程 机器如何学习设计 组成一,设计框架。 组成二,元素中心。 组成三,行动器。 组成四,评估网络。 视觉设计的四个层次 最基础的:临摹拓展。 第二层:场景表达。 第三层:创意洞见。 最后一层:创造趋势。 商业设计大脑的三大挑战 在开始做事情之前,我们遇到了三个比较严峻的挑战。 第一个挑战,缺少标注数据。今天所有的人工智能都基于大量的结构化标注数据...

  • 计算机必备专用英语词汇

    非常好的单词整理,转载一下当作笔记 1.单词说明:   command n. 命令,指令 [kə'mɑ:nd]   单词拼写 名词 单词含义 音标(发音)   提示:着重记忆单词对应的意思,有能力最好词性也记忆。 2.词性说明: n v vi vt conj prep pron adj adv 名词 动词 非及物动词 及物动词 连词 介词 代词 形容词 副词 3.单词列表: 1.file,n...

  • Next.js 9.5 发布:支持 Webpack 5

    作者 | Next.js 团队 译者 | 王强 策划 | 李俊辰 Next.js 9.5 发布,具体有这些内容。 Next.js 9.5 今天正式发布了,其改进包括: 稳定的增量静态再生 :部署后以毫秒为单位重建静态页面 可自定义的基本路径 :在域的子路径上轻松托管 Next.js 项目 支持重写、重定向和标头 :重写虚拟 URL,重定向旧 URL,向静态页面添加标头 URL 中的可选尾斜杠...

  • 中国耳机能否把AirPods拉下铁王座,全看一颗“芯”

    作者|茜茜 编辑|猛哥 1853年,犹太青年李维斯和当时的许多美国人一样,满怀梦想地踏上了西部淘金之旅。 很遗憾,他去晚了,到处都是人,还被抢地盘的恶棍们给揍了一顿。 李维斯很快从欺辱中恢复过来,他发现淘金人的衣服很容易磨破,而西部到处都是废弃的帐篷,如果把这些帐篷缝制成裤子,肯定抗穿耐磨。就这样,他缝制了世界上第一条牛仔裤。从此开创了他的牛仔裤王国。 世上的事情就是这么不可思议。 150年...

  • Flutter 1.17 中的导航解密和性能提升

    Python实战社群 Java实战社群 长按识别下方二维码,按需求添加 扫码关注添加客服 进Python社群▲ 扫码关注添加客服 进Java社群▲ 作者丨恋猫de小郭 来源丨GSYTech(gsy-tech-zone) Flutter 1.17 对比上一个稳定版本,更多是带来了性能上的提升,其中一个关键的优化点就是 Navigator 的内部逻辑,本篇将带你解密 Navigator 从 1....

  • 如何基于 Electron 开发跨终端的应用

    自我介绍 欢迎大家来到今天的早早聊跨端跨栈专场,今天我分享的主题是《如何基于 Electron 开发跨终端的应用》。先做一下自我介绍,我叫逯子洋,17 年加入政采云,目前主要负责政采云前端工程化平台敦煌以及政采云电子招投标客户端的建设。这边是我们团队的微信公众号,大家如果想对我们团队有更多的了解,可以关注一下我们的公众号。 首先我们分享的第一块叫端的延展。不知道大家对这张图熟不熟悉,前段时间...

华为云40多款云服务产品0元试用活动

免费套餐,马上领取!
CSDN

CSDN

中国开发者社区CSDN (Chinese Software Developer Network) 创立于1999年,致力为中国开发者提供知识传播、在线学习、职业发展等全生命周期服务。