不用js怎样实现悬浮导航
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了不用js怎样实现悬浮导航相关的知识，希望对你有一定的参考价值。
不用js就只能用css与伪类了，下面是我之前改了 懒人图库 的一个代码做成的，现在还不知能不能找到了。不过下面的代码我又修改了我以前的代码，已经测试成功了，你试试看（在chrome运行成功）。
这方面的东西可以到懒人图库学习啊。
<head><style type="text/css">
/* 设置table宽度、边框为0、(IE6) 使其居中*/
.navmargin:0px auto; height:30px; width:800px;
.nav ul table width:100%;border-collapse:collapse;border:0;
/* 默认隐藏下一级ul列表 */
.nav ul li ul display:none;
/* 当鼠标经过时显示下一级ul列表 */
.nav ul li:hover ul,
.nav ul li a:hover ul display:block;width:100%;
.nav li a:hover font-weight:bold;
/* ====================== 以上为关键属性 ====================== */
/* ====================== 以下各位随意发挥 ====================== */
/* 修饰样式一 */
.nav li float:left;width:150px;display:block;font-size:0;
.nav li a width:150px;display:block;height:28px;
font-size:16px;text-align:center; line-height:28px; color:#555;text-decoration:none;background:#f7f7f7;
.nav li:hover a,
.nav li a:hover font-weight:bold;color:red;
.nav li:hover li border:0;
.nav li li a,
.nav li:hover li a _border:0;font-weight:normal;color:#555;
.nav li li a:hover color:red;font-weight:normal;
</style>
</head>
<div class="fixed">
<div class="nav">
<ul>
<li class="up">
<a href="#">用户信息管理</a>
<table><tr><td>
<ul>
<li><a href="#" onclick="chgpg(11)" >更改用户名和密码</a></li>
<li><a href="../../aspx/user.aspx?req=exit" >退出</a></li>
<li><a href="#"></a></li>
<li><a href="#" id="uname"></a></li>
<li><a href="#" id="upower"></a></li>
</ul>
</td></tr></table>
</li>
<li><a href="#">学生信息管理</a>
<table><tr><td>
<ul>
<li><a href="#" onclick="chgpg(21)">添加学生信息</a></li>
<li><a href="#" onclick="chgpg(22)">查询学生信息</a></li>
<li><a href="#"></a></li>
</ul>
</td></tr></table>
</li>
<li><a href="#">公寓信息管理</a>
<table><tr><td>
<ul>
<li><a href="#" onclick="chgpg(31)">添加公寓</a></li>
<li><a href="#" onclick="chgpg(32)">删除/修改公寓楼</a></li>
<li><a href="#" onclick="chgpg(34)">修改宿舍信息</a></li>
<li><a href="#" onclick="chgpg(33)">查看住宿情况</a></li>
<li><a href="#"></a></li>
</ul>
</td></tr></table>
</li>
<li><a href="#">公寓分配管理</a>
<table><tr><td>
<ul>
<li><a href="#" onclick="chgpg(41)">学生宿舍分配</a></li>
<li><a href="#"></a></li>
</ul>
</td></tr></table>
</li>
</ul>
</div>
</div> 参考技术A 不用js就只能用css与伪类了，下面是我之前改了 懒人图库 的一个代码做成的，现在还不知能不能找到了。不过下面的代码我又修改了我以前的代码，已经测试成功了，你试试看（在chrome运行成功）。
这方面的东西可以到懒人图库学习啊。
<head>
<style type="text/css">
/* 设置table宽度、边框为0、(IE6) 使其居中*/
.navmargin:0px auto; height:30px; width:800px;
.nav ul table width:100%;border-collapse:collapse;border:0;
/* 默认隐藏下一级ul列表 */
.nav ul li ul display:none;
/* 当鼠标经过时显示下一级ul列表 */
.nav ul li:hover ul,
.nav ul li a:hover ul display:block;width:100%;
.nav li a:hover font-weight:bold;
/* ====================== 以上为关键属性 ====================== */
/* ====================== 以下各位随意发挥 ====================== */
/* 修饰样式一 */
.nav li float:left;width:150px;display:block;font-size:0;
.nav li a width:150px;display:block;height:28px;
font-size:16px;text-align:center; line-height:28px; color:#555;text-decoration:none;background:#f7f7f7;
.nav li:hover a,
.nav li a:hover font-weight:bold;color:red;
.nav li:hover li border:0;
.nav li li a,
.nav li:hover li a _border:0;font-weight:normal;color:#555;
.nav li li a:hover color:red;font-weight:normal;
</style>
</head>
<div class="fixed">
<div class="nav">
<ul>
<li class="up">
<a href="#">用户信息管理</a>
<table><tr><td>
<ul>
<li><a href="#" onclick="chgpg(11)" >更改用户名和密码</a></li>
<li><a href="../../aspx/user.aspx?req=exit" >退出</a></li>
<li><a href="#"></a></li>
<li><a href="#" id="uname"></a></li>
<li><a href="#" id="upower"></a></li>
</ul>
</td></tr></table>
</li>
<li><a href="#">学生信息管理</a>
<table><tr><td>
<ul>
<li><a href="#" onclick="chgpg(21)">添加学生信息</a></li>
<li><a href="#" onclick="chgpg(22)">查询学生信息</a></li>
<li><a href="#"></a></li>
</ul>
</td></tr></table>
</li>
<li><a href="#">公寓信息管理</a>
<table><tr><td>
<ul>
<li><a href="#" onclick="chgpg(31)">添加公寓</a></li>
<li><a href="#" onclick="chgpg(32)">删除/修改公寓楼</a></li>
<li><a href="#" onclick="chgpg(34)">修改宿舍信息</a></li>
<li><a href="#" onclick="chgpg(33)">查看住宿情况</a></li>
<li><a href="#"></a></li>
</ul>
</td></tr></table>
</li>
<li><a href="#">公寓分配管理</a>
<table><tr><td>
<ul>
<li><a href="#" onclick="chgpg(41)">学生宿舍分配</a></li>
<li><a href="#"></a></li>
</ul>
</td></tr></table>
</li>
</ul>
</div>
</div> 参考技术B html代码：
<div class="nav">
<ul>
<li><a href="http://www.zzarea.com">项目1</a></li>
<li><a href="#">项目2</a></li>
<li><a href="#">项目3</a></li>
<li><a href="#">项目4</a></li>
<li><a href="#">项目5</a></li>
<li><a href="http://bbs.zzarea.com">项目6</a></li>
<li><a href="#">项目7</a></li>
</ul>
</div>
CSS代码：
<style type="text/css">
*
margin:0px;
padding:0px;
body
font-size:14px;
font-family:"微软雅黑";
.nav
width:1000px;
margin:30px auto 0px auto;
background-color:#0099FF;
height:40px;
ul
list-style:none;
li
float:left;
line-height:40px;
width:100px;
text-align:center;
i a
color:#FFFFFF;
text-decoration:none;
display:block; /*块状结构*/
width:100px;
height:40px;
li a:hover
background-color:#000000;
</style>
请注意红色地方，如果你直接在hover里写上背景颜色，只会把文字的背景变掉，而不会填充一定的宽高，所以直接用display:block 变成块状元素，再设置宽高，就搞定了。 参考技术C 用css啊
JS实现悬浮导航的制作（附源码）--web前端
思想：导航在这里只有两种状态，一种是初始状态、一种是固定布局状态。实现悬浮导航其实就是通过Javascript脚本语言控制导航的两种状态，主要是对两种状态成立条件的判断，明确了这些，实现起来就不会太难。
1、基础页面（HTML+CSS）
效果图：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html" charset="UTF-8">
<!--页面三要素-->
<title>JS实现悬浮导航</title>
<meta name="Keywords" content="关键词">
<meta name="description" content="描述">
<style type="text/css">
*{margin: 0;padding: 0;}
#top{margin: 0 auto;width: 1000px;}
#navbg{background-color:#ff3399;width: 100%;height: 37px }
#navbg nav{width: 1000px;height:37px;margin: 0 auto}
#navbg nav a{color: #ffffff;font-size: 14px;font-family: 微软雅黑;width: 160px;height: 37px;
display: block;float:left;text-decoration: none;text-align: center;line-height: 37px; }
#navbg nav a:hover{background:#e50065}
.scrollNav{position: fixed;left: 0;top: 0}//固定导航栏的css样式
</style>
</head>
<body>
<div id="top"><img src="images/20170715125349.png" height="55" width="1000"/></div>
<div id="navbg">
<nav>
<a href="#">公司团队</a>
<a href="#">科技前沿</a>
<a href="#">业务咨询</a>
<a href="#">合作伙伴</a>
<a href="#">加入我们</a>
<a href="#">关于前端</a>
</nav>
</div>
<!--由于页面主体部分没有添加具体内容，滚动条显示不出来，在这里使用换行使浏览器显示滚动条-->
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>
2、JS实现悬浮导航
代码如下：(直接将JS代码插入到HTML页面中即可实现所述效果)
<script language="JavaScript" src="JQuery/jquery-3.2.1.js"></script>//调用JQuery框架
<script type="text/javascript">
$(document).ready(function () {
var topH=$("#top").height();//获取头部高度，top指导航栏上面的部分
var navbg=$("#navbg");//获取导航栏对象
$(window).scroll(function () {
if($(window).scrollTop()>topH){//对比滚动的距离与导航栏上面部分的高度大小来动态添加css样式
navbg.addClass("scrollNav")//对导航栏添加样式
}else{
navbg.removeClass("scrollNav")//去掉导航栏添加的样式
}
});
});
</script>
源码：JS实现悬浮导航制作.zip
备注：
文章为本人原创 转载请注明出处 文章难免会有纰漏之处 还望大家多多包含 如有意见或者建议可与本人联系 本人QQ：2187093468（非诚请勿扰，加好友请备注在哪里看到的）
以上是关于不用js怎样实现悬浮导航的主要内容，如果未能解决你的问题，请参考以下文章
我想让鼠标悬浮在某个窗口的时候就选中这个窗口，不用单击左键，我的是w7旗舰，怎么设置？
我用css定位了导航，怎么当网页下拉到一定高度的时候变成悬浮的？