网页右侧悬浮窗制作

最新推荐文章于 2024-04-13 14:35:33 发布

VIP文章 weixin_30915275

最新推荐文章于 2024-04-13 14:35:33 发布

阅读量1.7k

点赞数

文章标签：前端 javascript 人工智能 ViewUI

原文链接：http://www.cnblogs.com/charmingyj/p/3955714.html

版权

❀ 网页右侧悬浮导航制作

现在很多网站页面上都会出现弹出窗口、右下角广告窗、左下角论坛区等等，今天学习了一个右侧悬浮导航的制作，即无论页面超出屏幕多长，往下浏览页面时，悬浮导航依然保持窗口位置不动，展示在用户面前，下面和大家分享一下。（借用网站上的图片资源）

1、首先得具有基本的logo和导航分类，然后规定一个盒子大小，将他们布局好。

2、基本布局完成就得给它设置触动效果，鼠标触碰分类，就会有相应的背景色变化，点击之后就进入内页浏览。

3、重点在于如何将导航盒子固定在一个右侧的位置上不随用户的操作变动，用css样式中的position:fixed（用于固定对象的位置）来实现，不置顶就给它一个距离，左浮动就设置"left:0px;"右浮动就设置"right:0px;"，为了能够显示效果，加文字使之超过一个页面的大小可以上下滑动。

 1 <body>
 2             <div id="NavTop">
 3                 <div id="NavCon">
 4                     <img src="images/banner.png" class="banner">
 5                     <ul>
 6                         <li><a href="#">独家观点</a></li>
 7                         <li><a href="#">前排明星</a></li>
 8                         <li><a href="#">秀场细节</a></li>
 9                         <li><a href="#">场外街拍</a></li>
10                         <li><a href="#">秀场快讯</a></li>
11                     </ul>
12                     <img src="images/top.png" class

最低0.47元/天解锁文章

weixin_30915275

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
网页右侧悬浮窗制作

❀ 网页右侧悬浮导航制作现在很多网站页面上都会出现弹出窗口、右下角广告窗、左下角论坛区等等，今天学习了一个右侧悬浮导航的制作，即无论页面超出屏幕多长，往下浏览页面时，悬浮导航依然保持窗口位置不动，展示在用户面前，下面和大家分享一下。（借用网站上的图片资源）1、首先得具有基本的logo和导航分类，然后规定一个盒子大小，将他们布局好。2、基本布局完成就得给它设置触动效果，鼠标触碰...
复制链接

扫一扫