顶部右侧导航问题
<!DOCTYPE html> <html> <head> <title>exercise</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="../css/exercise.css"> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script> <script type="text/javascript" src="../js/exercise.js"></script> </head> <body> <!--顶部--> <div class="top"> <div class="top-hr"> <!--登录注册部分--> <div class="top-left"> <div><a href="javascript:void(0);" class="loginLink" id="loginLink">亲，请先登录</a></div> <div><a href="javascript:void(0);" class="registerLink" id="registerLink">免费注册</a></div> <div><a href="javascript:void(0);" class="top-left-3">手机逛慕课</a></div> </div> <!--顶部右侧相关菜单--> <div class="top-right"> <div class="title"> <div class="words">我的慕课<img src="../素材/icon/22.png"></div> <div class="sub-title"> <div>a1</div> <div>b1</div> <div>c1</div> </div> </div> <div class="title"> <div class="words">收藏夹<img src="../素材/icon/22.png"></div> <div class="sub-title"> <div>a2</div> <div>b2</div> <div>c2</div> </div> </div> <div class="title"> <div class="words">商品分类<img src="../素材/icon/22.png"></div> <div class="sub-title"> <div>a3</div> <div>b3</div> <div>c3</div> </div> </div> <div class="title"> <div class="words">卖家中心<img src="../素材/icon/22.png"></div> <div class="sub-title"> <div>a4</div> <div>b4</div> <div>c4</div> </div> </div> <div class="title"> <div class="words">联系客服<img src="../素材/icon/22.png"></div> <div class="sub-title"> <div>a5</div> <div>b5</div> <div>c5</div> </div> </div> </div> <!--弹出层遮罩--> <div class="layer"> <div class="layer-mask" id="layer-mask"></div> <div class="layer-pop" id="layer-pop"> <div class="layer-close" id="layer-close"></div> <div class="layer-content" id="layer-content"></div> </div> <!--登录窗体--> <div class="loginHTML" style="display:none;" id="loginHTML"> <div class="login"> <div class="layer-content-login"> <div class="login-login-title">登录</div> <div class="login-register-title">注册</div> </div> <div class="item"> <input id="username" class="input" name="username" type="text" placeholder="请输入登录邮箱或手机号" /> <div class="error-msg username-error-msg"></div> </div> <div class="item"> <input id="password" class="input" name="password" type="password" placeholder="6-16位密码，区分大小写，不能用空格"/> <div class="error-msg password-error-msg"></div> </div> <div class="i-autolog"> <div class="autolog"> <input type="checkbox" name="autolog" id="autolog" />下次自动登录 </div> <div class="forgetpassword"> <a href="">忘记密码</a> </div> </div> <div class="item"> <input type="button" name="button" value="登录" class="submit" id="loginsubmit" /> </div> <div class="loginLink-foot"> <div class="loginLink-img"> <div><img src="../素材/icon/xinlang.png"></div> <div><img src="../素材/icon/weixin.png"></div> <div><img src="../素材/icon/QQ.png"></div> </div> </div> </div> </div> <!--注册窗体--> <div class="registerHTML" style="display: none;" id="registerHTML"> <div class="register"> <div class="layer-content-login"> <div class="register-login-title">登录</div> <div class="register-register-title">注册</div> </div> <div class="item"> <input id="username" class="input" name="username" type="text" placeholder="请输入注册邮箱或手机号" /> <div class="error-msg username-error-msg"></div> </div> <div class="item"> <input id="yanzhengma" class="input" name="yanzhengma" type="text" placeholder="请输入验证码"/><img src="../素材/verify.png"> <div class="error-msg yanzhengma-error-msg"></div> </div> <div class="item"> <input type="button" name="button" value="注册" class="submit" id="registersubmit"/> </div> <div class="loginLink-foot"> <div class="loginLink-img"> <div><img src="../素材/icon/xinlang.png"></div> <div><img src="../素材/icon/weixin.png"></div> <div><img src="../素材/icon/QQ.png"></div> </div> </div> </div> </div> </div> </div> </div> </body> </html>
*{
margin:0;
padding:0;
}
body{
font: 14px/1.5 "微软雅黑",Verdana,Tahoma,Arial,sans-serif,"宋体";
}
.top{
width: 100%;
height:50px;
text-align: center;
background:#f3f5f7;
}
.top-hr{
width:1200px;
height:50px;
margin:0 auto;
color:#333;
border-bottom:1px solid #bbb;
}
a{
color:#333;
text-decoration: none;
}
.top-left{
width:300px;
height:50px;
float: left;
line-height: 50px;
}
.loginLink{
color: red;
}
.loginLink,.registerLink,.top-left-3{
margin-left:10px;
float:left;
}
.registerLink:hover,.top-left-3:hover{
color: red;
}
.top-right{
width:500px;
height:50px;
line-height: 50px;
float:right;
}
.top-right .title{
margin-left:15px;
height: 50px;
line-height: 50px;
float：right;
display: inline-block;
cursor: pointer;
}
.sub-title{
position: absolute;
display: none;
border:1px solid grey;
width:70px;
margin-top: -14px;
}
.sub-title div{
width:70px;
height:20px;
border:1px solid grey;
margin-top: -1px;
}
.sub-title div:hover{
background: #f3f5f7;
}
.top-right .title:hover .sub-title{
display: block;
z-index:2;
}
.top-right .words:hover{
color:red;
}
.layer{
width:100%;
height:100%;
}
.layer-mask{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
opacity: 0.5;
z-index: 9999;
background-color:#000;
}
.layer-pop{
display:none;
text-align: center;
z-index: 10000;
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
width:400px;
height:300px;
background:#fff;
margin:auto;
}
.layer-close
{
float :right;
width: 34px;
height:34px;
border: 3px solid #fff;
text-align: center;
line-height: 34px;
border-radius: 50%;
background: url(../素材/icon/20.png);
margin-right:20px;
margin-top: 10px;
}
.layer-close:hover
{
cursor: pointer;
background: #ccc;
color: #fff;
}
.login{
width:400px;
height:350px;
}
.layer-content-login{
height:40px;
line-height: 40px;
font-size:16px;
font-weight: bold;
margin-left:20px;
}
.login-login-title{
color: red;
border-bottom:5px solid red;
float:left;
height: 40px;
cursor: pointer;
width: 32px;
}
.login-register-title{
float:left;
height:40px;
margin-right: 250px;
cursor: pointer;
width: 38px;
}
.register-login-title{
float:left;
height: 40px;
cursor: pointer;
width: 32px;
}
.register-register-title{
float:left;
height:40px;
margin-right: 250px;
cursor: pointer;
color: red;
border-bottom:5px solid red;
width: 38px;
}
.item .input{
height:40px;
width:350px;
padding-left:5px;
border:1px solid #ccc;
margin-bottom: 20px;
margin-left: 10px;
}
#yanzhengma{
width: 250px;
height:20px;
padding:10px 5px;
border:1px solid #ccc;
margin-left:12px;
margin-right:20px;
margin-bottom: 100px;
}
.item img{
width:80px;
height: 50px;
margin-top: 5px;
margin-bottom: -20px;
}
.i-autolog{
height: 40px;
line-height: 40px;
margin-top:-10px;
}
.autolog{
float:left;
margin-left:40px;
}
.forgetpassword{
float:right;
margin-right:40px;
}
.item .submit{
background: #e40;
border:1px solid #e40;
border-radius:5px;
padding:10px auto;
width:360px;
color:#fff;
height: 40px;
}
.loginLink-img{
width:300px;
height:60px;
line-height:60px;
margin-left:70px;
margin-top: 20px;
}
.loginLink-img div{
float:left;
background:#ddd;
width:30px;
height:30px;
border-radius:50%;
line-height:30px;
margin-left:40px;
}
.error-msg{
color:#e40;
text-align: left;
padding-left: 30px;
}
.yanzhengma-error-msg{
margin-top:-90px;
}
.username-error-msg{
margin-top: -20px;
}
.password-error-msg{
margin-top: -20px;
}$(function(){
// 登录链接事件
$("#loginLink").click(function(){
// 获取登录窗体代码
var loginHTML = $("#loginHTML").html();
showLayer(loginHTML,400,300,closeCallback);
// 登录表单校验
$("#loginsubmit").click(function(){
var username = $("input[name='username']").val();
var password = $("input[name='password']").val();
if(username === 'imooc' && password === '123456'){
alert("登录成功");
}else if(username != 'imooc'){
$(".error-msg").html("账号输入错误");
}
else if (password != '123456') {
$(".error-msg").html("密码输入错误");
}
});
});
// 注册链接事件
$("#registerLink").click(function(){
// 获取注册窗体代码
var registerHTML = $("#registerHTML").html();
showLayer(registerHTML,400,300,closeCallback);
// 注册表单校验
$("#registersubmit").click(function(){
var username = $("input[name='username']").val();
var yanzhengma = $("input[name='yanzhengma']").val();
if(username === 'imooc' && yanzhengma === 'gyyd'){
alert("注册成功");
}else if("username != 'imooc'"){
$(".error-msg").html("账号输入错误");
}
else if (yanzhengma != 'gyyd') {
$(".error-msg").html("验证码输入错误");
}
});
});
// 弹出层关闭回调函数
function closeCallback(){
$(".error-msg").html("");
}
// 显示弹出层
function showLayer(html,width,height,closeCallback){
// 显示弹出层遮罩
$("#layer-mask").show();
// 显示弹出层窗体
$("#layer-pop").show();
// 设置弹出层窗体样式
$("#layer-pop").css({
width : width,
height : height
});
// 填充弹出层窗体内容
$("#layer-content").html(html);
// 弹出层关闭按钮绑定事件
$("#layer-close").click(function(){
// 弹出层关闭
hideLayer();
// 关闭的回调函数
closeCallback();
});
}
// 隐藏弹出层
function hideLayer(){
// 弹出层关闭
$("#layer-mask").hide();
$("#layer-pop").hide();
}
})老师请问一下右侧顶部导航怎么实现呀，我的做法有问题，希望能明确指导一下
24
收起
正在回答
1回答
经过测试 , 顶部右侧导航鼠标经过时可以出现下拉菜单哦. 可以把导航出现的问题在描述清楚一些呢 ,这样更好的进行测试哦 . 祝学习愉快 !
相似问题
登录后可查看更多问答，登录/注册
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星