冒险岛2官网模拟具体教程之二头部的布局以及动态交互实现(详解)（连载）

冒险岛2静态页面展示：

冒险岛当鼠标移入时，页面展示：

需求：
1、当滚动条滚动到一定距离时，导航栏固定在页面的最上端
2、当鼠标移入对应的li标签时，下面的黄线就跟随到对应的li标签下面
3、当鼠标移入到导航栏的盒子上方，显示线面的下拉菜单，同时鼠标移入到下拉子菜单对应的li标签上时，相应的文字高亮
4、当鼠标移出导航栏或者下拉子菜单的时候，下拉子菜单隐藏

布局设置：

设计思路：
因为在后面的交互过程中，整个头部的颜色都会发生改变，那么为了区分出头部与下拉菜单，这里做一个假的来欺骗用户的眼睛，用menu-bg放在与头部topBar盒子一样的位置，但是背景色也与它的一样（在JS交互过程中，topBar的背景色会发生改变），所以这里在通栏头部放两个盒子。现在问题是怎样放两个盒子进来呢，用定位的方式，但是，不能用相对定位relative，因为它是就是参考自身作位移，同时它不脱标，还占据位置，这样会覆盖掉menu-bg的让其颜色显示不出来，那么只有用绝对定位了，absolute它参考定位父级做位移（这里是body）,同时它脱标可以让两个盒子都浮动起来,那么就需要设置topBar的盒子的定位层级z-index的层级设置为最高，因为menu-bg在下面只是为了显示颜色，这样也不会遮住我们的topBar,不影响交互功能。

设置topBar的高度也为为交互时的高度，当鼠标移入的时候，给topBar盒子一个类名g-active,这个类名是用来改变topBar的高度以及背景色，这样下拉菜单的背景色就是g-active里面的颜色。还记得上一幅图里面为什么要放menu-bg这个盒子吗，就是因为g-active会改变整个topBar里面的颜色，这样就不能区分出谁是导航栏谁是下拉菜单了，有了menu-box 就可以解决。

这就是导航栏的布局.现在奉上
HTML结构代码:

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><link rel="stylesheet" href="index.css"/><script src='jquery-1.12.4.js'></script><script src='index.js'></script>
</head>
<body>
<div id="topBar" class="g-header"><div class=" w inner"><!-- logo设计 --><div class="logo"><h1><!-- a跳转到本网页 --><a href="#">冒险岛2官方网站</a></h1></div><!-- 快捷菜单 --><div class="menu-box"><ul class="nav"><li class="nav-item"><a href="#">官网首页</a></li><li class="nav-item"><a href="#">新闻中心</a><ul class="sub-nav"><li><a href="#">全部</a><a href="#">新闻</a><a href="#">公告</a><a href="#">活动</a><a href="#">媒体</a><a href="#">玩家</a></li></ul></li><li class="nav-item"><a href="#">游戏资料</a><ul class="sub-nav"><li><a href="#">新手指南</a><a href="#">平行世界</a><a href="#">游戏特色</a><a href="#">资料站</a><a href="#">萌尬特攻队</a></li></ul></li><li class="nav-item"><a href="#">下载专区</a></li><li class="nav-item"><a href="#">自动服务</a><ul class="sub-nav"><li><a href="#">账号充值</a><a href="#">兑换中心</a><a href="#">在线客服</a><a href="#">安全中心</a><a href="#">安全模式</a><a href="#" class="imp">封号查询</a><a href="#">方块妞的工具箱</a></li></ul></li><li class="nav-item"><a href="#">玩家互动</a><ul class="sub-nav"><li><a href="#">攻略中心</a><a href="#">活动中心</a><a href="#">官方直播</a><a href="#">同萌会</a><a href="#">官方微博</a><a href="#">官方论坛</a></li></ul></li><li class="nav-item"><a href="./首页-冒险岛2周边商城/thua商城.html">在线商城</a></li></ul></div><!--登录页 开始--><div id="cover-bg"></div><div class="login-box"><div class="unlogin" id="unlogin" style="display: block;"><a href="javascript:LoginManager.login();" class="login-btn">登录<span class="login-people-icon"></span></a></div><div id="login-web"><div class="login-title">快速安全登录</div><div class="login-tips">请使用<a href="#">QQ手机版</a>扫描二维码,<br>安全登录,防止盗号</div><div class="login-qr"><div class="qr-box"><img src="./images/loginqr" alt=""/></div><div class="scan"></div></div><div class="login-link"><a href="#">账号密码登陆</a><span class="dotted">|</span><a href="#">注册新账号</a><span class="dotted">|</span><a href="#">意见反馈</a></div><div class="login-header"><a href="javascript:;" class="close"></a></div></div></div><!--登录页结束--></div><div class="menu-bg"></div>
</div>
</body>
</html>

CSS样式代码:

/* 初始化 */body,
div,
span,
p,
input,
img,
ul,
li,
a,
h1,
h2,
h3,
i,
em,
strong {margin: 0;padding: 0;
}a {text-decoration: none;color: #999;
}/* a:hover {color: #f10215;
} */input {border: 0 none;outline: 0 none;
}img {border: 0 none;vertical-align: middle;
}li {list-style: none;
}h1,
h2,
h3
{font-weight: normal;
}i {font-style: normal;
}.w {width: 1200px;margin: 0 auto;
}body {font: 12px/1.5 tahoma, "\5FAE\8F6F\96C5\9ED1", sans-serif;/*改变背景颜色*/background-color: #cccccc;
}/*topBar的CSS代码 start*/
.g-header {height: 100px;width: 100%;position: absolute;top: 42px;/* 提升层级为最高 */z-index: 1000;
}.g-header-active {height: 325px;background: rgba(43, 46, 71, .85);box-shadow: inset 3px 0 10px rgba(0, 0, 0, .3);transition: height .2s ease-in-out;
}.g-header-fixed {position: fixed;top: 0;left: 0;
}.inner {position: relative;z-index: 999;margin: 0 auto;
}.g-header .logo {width: 120px;height: 70px;float: left;overflow: hidden;margin: 16px 0 0 10px;background: url(./images/header-spr.png) no-repeat0 -369px;
}.g-header .logo a {display: block;width: 100%;height: 100%;text-indent: -999px;overflow: hidden;
}.menu-box {position: relative;float: left;margin-left: 20px;height: 100px;overflow: hidden;
}.g-header-active .menu-box {height: 325px;transition: height .2s ease-in-out;
}.g-header  .nav-item {float: left;width: 100px;height: 100px;line-height: 100px;color: #fff;font-size: 14px;text-align: center;
}.g-header ul .active {height: 98px;border-bottom: 2px solid #fff000
}.g-header .nav-item a {display: block;line-height: 100px;color: #fff;
}.nav-item .sub-nav {padding-top: 15px;height: 210px;border-right: 1px solid #49475d;
}.nav-item .sub-nav li {line-height: 30px;font-size: 14px;
}.nav-item .sub-nav li a {display: block;width: 100%;height: 30px;line-height: 30px;color: #fff;
}.menu-bg {position: absolute;top: 0;left: 0;width: 100%;height: 100px;background: yellow;background: rgba(40, 47, 88, .9);
}.imp {color: yellow !important;
}/*登录页*/
.login-box {float: left;color: #fff;font-size: 14px;
}#cover-bg {position: absolute;display: block;left: -100px;top: 0px;opacity: 0.5;z-index: 998;/*与背景色比较*/background-color: red;width: 1920px;height: 1276px;z-index: 9;display: none;
}.login-btn {position: relative;top: 30px;display: inline-block;width: 78px;height: 35px;line-height: 35px;padding-left: 30px;color: #fff;font-size: 14px;border-radius: 20px;border: 2px solid #fe9422;margin-left: 10px;
}.login-people-icon {position: absolute;top: 11px;right: 24px;width: 9px;height: 13px;background: url(./images/header-spr.png);background-position: -248px 0;
}#login-web {background-color: #fff;width: 618px;height: 364px;position: fixed;left: 50%;top: 50%;/*margin-left: -309px;*//*margin-top: -182px;*/transform: translate(-50%,-50%);z-index: 20;text-align: center;display: none;
}#login-web .login-header {height: 50px;width: 50px;position: absolute;top: 0;right: 0;font-family: "微软雅黑";z-index: 21;
}#login-web .login-header .close {width: 47px;height: 20px;float: right;background: url('./images/icon_3_tiny.png') -221px -126px no-repeat;
}#login-web .login-header .close:hover {background: url('./images/icon_3_tiny.png') -221px -151px no-repeat;
}#login-web .login-qr .qr-box{position: relative;
}#login-web .scan{opacity: 0;width: 160px;height: 198px;position: absolute;background: url("./images/small_24_tiny.png");top: 118px;left: 321px;
}#login-web .login-title{font-family: helvetica,arial,微软雅黑,华文黑体;color: #333;font-size: 20px;width: 618px;height: 26px;margin-top: 36px;margin-bottom: 16px;
}#login-web .login-tips {width: 618px;height: 42px;line-height: 21px;margin-bottom: 36px;color: #666;font-size: 16px;
}.login-link a,.login-link span {display: inline !important;
}#login-web .login-tips a {color: #3481cf;
}#login-web .login-link {position: absolute;right: 10px;bottom: 10px;
}#login-web .dotted {color: #bfbfbf;margin: 0 5px;
}

静态页面展示:

现在分析,利用jQuery的方法实现页面的交互:
需求:
1.当鼠标移入时改变topBar的宽度,同时,要实现我的nav的盒子的宽度也要变长,那怎样才能实现鼠标移入,两个盒子的宽度都同时变高呢?这里我们定义一个g-active类,这个类的目的是改变topBar的盒子的高度,但是同时它也会改变nav(导航栏)盒子的高度.

.g-header-active {height: 325px;background: rgba(43, 46, 71, .85);box-shadow: inset 3px 0 10px rgba(0, 0, 0, .3);transition: height .2s ease-in-out;
}
/*这里是nav盒子的样式,注意它只有一个类名*/
.menu-box {position: relative;float: left;margin-left: 20px;height: 100px;overflow: hidden;
}/*这里是另外一个nav盒子的样式,当鼠标移入时,我添加上g-head-active类此时这个选择器就会生效,同时因为层级的原因,它里面的重复样式会覆盖前面的
*/
.g-header-active .menu-box {height: 325px;transition: height .2s ease-in-out;
}

2.移入鼠标后,会改变颜色,这里直接添加类名就可以了,比较简单.
3.滚动页面,会固定导航栏
4.点击登录会弹出登录框(后期分一个小节描述)

/*** Created by Alex on 2018/8/14.*/(function(){$(function(){//给每一个li标签注册鼠标移入事件,var $navItem = $('.nav-item');$navItem.mouseenter(function (  ) {//让下方显示黄色的横杠$( this ).addClass ( "active" ).siblings ( "li" ).removeClass('active');//给topBar大盒子一个新的类g-header-active$("#topBar").addClass('g-header-active');});//给导航栏一级菜单一个鼠标离开事件var $menuBox = $('.menu-box');$menuBox.mouseleave(function (  ) {//让所有的li标签在移出导航栏后,黄线消失$navItem.removeClass('active');//鼠标移出一级菜单后高度要显示到原来的位置$("#topBar").removeClass('g-header-active');});//遍历所有的子级菜单的 li$( ".sub-nav" ).find ( "a" ).mouseenter(function (  ) {//鼠标移入其中的一个sub-nav时,改变a标签的样色$(this).css('color','yellow').siblings('a').css('color','#fff');});//遍历所有的子级菜单$( ".sub-nav" ).mouseleave(function (  ) {// 当鼠标移出的时候设置a的标签样式为默认的$(this).find('a').css('color','#fff');});//页面滚动做一个固定定位$(window).scroll(function(){//时刻获取页面的scrollTop的值var scrollTopVal = $(window).scrollTop();if(scrollTopVal > 42) {//设置topBar为固定定位$('#topBar').addClass('g-header-fixed')}else {//设置topBar为固定定位$('#topBar').removeClass('g-header-fixed')}});//点击登录打开页面$('#unlogin').on('click',function(){$('#login-web').show();$('#login-web').show();})//登录页打开$('#unlogin').on('click', function () {$('#cover-bg').show();$('#login-web').show();})//登录页关闭$('.login-header .close').on('click', function () {$('#cover-bg').hide();$('#login-web').hide();})//登录页动画$('#login-web .qr-box>img').on('mouseenter', function () {$('#login-web .qr-box').stop(true,false).animate({left:'-70px'},150,'swing', function () {$('#login-web .scan').stop(true,false).animate({opacity:'1'},150,'swing')})})$('#login-web .qr-box>img').on('mouseleave', function () {$('#login-web .scan').stop(true,false).animate({opacity:'0'},150,'swing', function () {$('#login-web .qr-box').stop(true,false).animate({left:'0'},150,'swing')})})})}())

移入鼠标时:

单击登录框:

冒险岛2官网模拟具体教程之二头部的布局以及动态交互实现(详解)（连载）相关推荐

冒险岛2官网模拟具体教程之一工具的准备(详解)（连载）
第一步:因为我们没有UI提供的页面原图,所以我们需要自己在官网场面去截图,那么怎么截图呢? a: 用谷歌浏览器先打开冒险岛官网:http://mxd2.qq.com/main.htm b: 打开你想截 ...
冒险岛2官网模拟之四自动轮播图(连载)
在官网的的轮播图: 具体的需求: 1.轮播图每间隔7秒滚动一次 2.每一次滚动下面的滚动条的样式发生相应的变化 3.有两个点击事件(官方/合作)点击之后切换到不同的轮播图:图中展示的官方对应的轮播图, ...
冒险岛2官网模拟之三单击登录弹出登陆框的具体实现(连载)
登录框的设计的样式以及结构思路在样式中需要设置登录的unlogin盒子,以及登录框login-web盒子,最后写一个全局的cover-bg来做遮罩层.但是设置样式的时候将cover-bg设置为定位这 ...
eclipse官网下载安装教程
eclipse官网下载安装教程 eclipse下载地址方法一:直接输入网址方法二:浏览器搜索方法三:国内镜像下载网址 eclipse安装步骤注意事项: 需要先安装好jdk环境才能打开eclip ...
XMind 8 Update 8 Pro 激活教程（亲测可用）国外官网下载破解教程（带离线安装包）
Jun 21, 2019 | 资源 - 破解软件(稀缺)资源 - 破解软件(常用) | 1.2k 字 | 4 分钟文章目录 1. 本博文的简述or解决问题? 2. 下载安装包: 3. 说明: 4 ...
虚幻4脱坑指南——官网C++编程教程中第一人称设计游戏教程的若干问题及解决方法
一.前言我使用的虚幻4引擎版本为4.25.3,碰到的问题是针对官网C++编程教程中第一人称设计游戏教程出现的情况. 二.问题与实现 2.1.缺少引用的编译错误如图1所示的步骤2.7中,将官网的代码 ...
Arduinojson官网序列化示例教程
Arduinojson官网序列化示例教程 Arduinojson官方示例程序: #include <ArduinoJson.h>void setup() {// Initialize Se ...
Arduinojson官网反序列化示例教程
Arduinojson官网反序列化示例教程官方反序列化示例程序: 程序源码: #include <ArduinoJson.h>void setup() {// Initialize se ...
Hyperledger Fabric 官网翻译入门教程--之关键概念(Hyperledger Fabric 模型）
英文地址:http://hyperledger-fabric.readthedocs.io/en/latest/fabric_model.html Hyperledger Fabric Model/ ...

冒险岛2官网模拟具体教程之二头部的布局以及动态交互实现(详解)（连载）

冒险岛2官网模拟具体教程之二头部的布局以及动态交互实现(详解)（连载）相关推荐

最新文章

热门文章