自适应网站之网站头顶部导航栏

2021-03-01 10:06 admin
热烈欢迎您赶到懒之才-网站站长的共享服务平台! 学好偷懒,并懒出国界是提升工作中高效率最合理的方式!

网页页面适用自适应网站的益处我也不用说了,这儿我根据写一个简易的网址导航来学习培训响应合理布局的开发设计

Meta标识界定

 !--应用 viewport meta 标识手中机访问器上操纵合理布局-- 
 meta name= viewport  content= width=device-width,initial-scale=1,maximum-scale=1  / 
 !--根据便捷方法开启时全屏幕显示信息-- 
 meta name= apple-mobile-web-app-capable  content= yes  / 
 !--掩藏情况栏-- 
 meta name= apple-mobile-web-app-status-bar-style  content= blank  / 
 !--iPhone会将看上去像电話号码的数据加上电話联接,理应关掉-- 
 meta name= format-detection  content= telephone=no  / 

界定body中的构造

 div  >

界定款式

 style type= text/css 
 body {
 margin: 0;
 padding: 0;
 }
 
 .nav {
 position: relative;
 background-color: #fff;
 height: 78px;
 width: 100%;
 border-bottom: 1px solid #DADADA;
 }
 
 .nav img {
 position: absolute;
 right: 20px;
 top: 30px;
 width: 28px;
 display: none;
 }
 
 .nav ul {
 list-style: none;
 margin: 0;
 padding: 0;
 text-align: center;
 }
 
 .nav ul li {
 height: 78px;
 width: 168px;
 line-height: 78px;
 text-align: center;
 display: inline-block;
 }
 
 .nav ul li:hover {
 cursor: pointer;
 }
 
 .nav ul li a {
 text-decoration: none;
 color: #666;
 padding-bottom: 8px;
 }
 
 .nav ul li .actived {
 border-bottom: 3px solid #EE4C42;
 }
 
  /style 

查询实际效果图

.png

能看到导航栏早已显示信息出去了,大家给导航栏再加点一下恶性事件以更改导航栏选定款式

 script 
 $(function() {
 $( .nav ul li ).click(function() {//导航栏点一下
 $( .nav ul li a ).removeClass( actived 
 $(this).children( a ).addClass( actived 
 });
 });
  /script 

那假如说大家要想适用自适应网站该如何做呢?

上边最初大家早已加上适用手机上的Meta有关标识原素了,然后大家根据新闻媒体查寻来使大家手机上适用响应式导航栏显示信息

screen and (max-width: 878px) {}   设定当显示屏总宽低于878px的情况下实行里边的款式

这儿大家先在右上方显示信息一个标志,随后点一下标志的情况下显示信息右边的导航栏,点一下击标志掩藏右边的导航栏

大家再次在Style标识内加上下列款式

/*新闻媒体查寻*/
 /*显示屏总宽低于878px的情况下实行里边的css*/
 
 @media only screen and (max-width: 878px) {
 .nav img {
 display: inline;
 }
 .nav ul {
 position: absolute;
 right: 0;
 text-align: right;
 top: 78px;
 display: none;
 }
 .nav ul li {
 display: block;
 border: 1px solid #dadada;
 height: 58px;
 line-height: 58px;
 width: 98px;
 }
 .nav ul li a {
 display: block;
 padding-bottom: 0;
 }
 .nav ul li .actived {
 border-bottom: none;
 }
 .nav ul li a:hover {
 background-color: #6E6E6E;
 color: #fff;
 }
 }

最终将js加上上来,用以实际操作显示信息或掩藏正下方导航栏目录

$( .nav img ).click(function() {//显示信息或掩藏正下方导航栏目录
 $( .nav ul ).slideToggle(100);
 });

OK,进行。

大家看来下实际效果,手中机上边开启网页页面显示信息导航栏以下图

1.png

点一下右边标志显示信息导航栏实际效果

1.png


一、强烈推荐应用迅雷资源或快车等多段程免费下载手机软件免费下载本网站資源。

二、未登陆vip会员没法免费下载,登陆后可得到大量便捷作用,若未申请注册,请先申请注册。

三、假如网络服务器暂未能免费下载请稍后再试!一直不可以免费下载,请点我出错 ,感谢协作!

四、本网站全部資源(包含模版、素材图片、手机软件、字体样式等)仅作学习培训与参照,请勿用以商业服务主要用途,不然造成的一切不良影响将由您自身担负!

五、若有别的难题,请加网站制作沟通交流群(点一下这儿查询沟通交流群 )开展沟通交流。

六、如需转截本网站資源,请标明转截来源于并附加连接

七、本网站一部分資源为数据加密缩小文档,统一缓解压力登陆密码为: