小米商城侧导航栏的实现(导航栏的制作)
侧导航栏在我们写的时候很常用,很多网站上面都有侧边导航栏的应用,那么如何制作侧边导航栏呢?
下面看一看我制作的小米商城的侧导航栏。
看下列代码:
<body><div class="box3-1"><ul><li><a href="#">手机</a><div class="Sidebar"></div></li><li><a href="#">电脑</a><div class="Sidebar"></div></li><li><a href="#">笔记本 平板</a><div class="Sidebar"></div></li><li><a href="#">出行 穿戴</a><div class="Sidebar"></div></li><li><a href="#">耳机 音箱</a><div class="Sidebar"></div></li><li><a href="#">家电</a><div class="Sidebar"></div></li><li><a href="#">智能 路由器</a><div class="Sidebar"></div></li><li><a href="#">电源 配件</a><div class="Sidebar"></div></li><li><a href="#">健康 儿童</a><div class="Sidebar"></div></li><li><a href="#">生活 箱包</a><div class="Sidebar"></div></li></ul></div>
</body>
我们实现的思路是先制作一个列表,设置列表的样式,然后在列表里面完成我们需要的内容。
所涉及到的知识点有定位和格式化文档。
下面看一下css代码:
<style>.box3-1 {width: 234px;height: 460px;background-color: rgba(128, 128, 128, .5);}/* 制作列表大小和样式 */.box3-1 ul {height: 418px;padding: 20px 0px;position: relative;border-right: 1px solid #6e6a6a;}.box3-1 li {list-style: none;padding: 0px 23px 0px 30px;height: 42px;line-height: 42px;}.box3-1 li>a {text-decoration: none;color: #ffffff;font-size: 14px;}/* 鼠标移入是背景颜色改变 */.box3-1 li:hover {background-color: rgb(255, 103, 0);}/* 下拉框部分 */.Sidebar {position: absolute;left: 236px;top: 0px;width: 994px;height: 460px;background-color: rgb(162, 79, 79);box-shadow: 0px 0px 5px #b0b0b0;/* 将元素隐藏 */display: none;}/* 鼠标移入列表元素出现 */.box3-1 li:hover .Sidebar {display: block;}
</style>
css代码段如上所示
我的想法是将下拉框写在列表里面,然后给下拉框绝对定位,给ul相对定位,因为我没有给li设置相对定位,那么下拉框的参照物就是相对定位了的ul,把下拉框的位置定好,然后实现鼠标移入下拉框出现,鼠标移出下拉框消失的问题。
这里需要注意的知识点是position定位属性。在position:absolute绝对定位。产生top,left等四个属性。通过这四个属性调节位置,在之前的文章中有详细介绍,大家可以看看哦
具体看以上代码
页面元素隐藏
页面元素隐藏的方法:
1.display:none;
2. visibility: hidden;visibility 属性规定元素是否可见。默认可见可继承
3. opacity:0;
4. position:absolute;left:-10000px;
看一下运行效果:
这是一个很简单的练习,但是里面的小知识点也不少,大家可以试一试哦。
小米商城侧导航栏的实现(导航栏的制作)相关推荐
- 仿酒仙网的一款jQuery侧栏弹出导航栏特效
2019独角兽企业重金招聘Python工程师标准>>> 仿酒仙网的一款jQuery侧栏弹出导航栏特效 一款常用于商城左侧商品导航的jquery菜单导航特效. 非常不错的一款商品分类特 ...
- Axure中如何快速设计左边导航栏,侧导航栏和顶部导航栏等?
Axure中如何快速设计侧导航栏和顶部导航栏? 1.下载侧导航栏和顶部导航栏组件 参考<蚂蚁金服 ant design 中下载axure 菜单组件库> 2.导入组件 下载保存为AntDes ...
- 【CSS】课程网站横版导航栏 ( 横版导航栏测量及样式 | 代码示例 )
文章目录 一.盒子测量及样式 1.总体盒子测量及样式 2.左侧盒子测量及样式 3.中间盒子测量及样式 4.右侧盒子测量及样式 二.横版导航栏代码示例 1.HTML 标签结构 2.CSS 样式 3.显示 ...
- android studio 顶部导航栏_Android10 手势导航开发与处理:边到边(I)
这是我们有关"手势导航"系列的第一篇文章. 借助Android 10,已添加了新的系统导航模式,允许用户向后导航,导航至主屏幕并通过手势触发设备助手. Android 10 中新手 ...
- React Native 的顶部导航栏和底部导航栏目
说来也是惭愧,本来关于底部导航栏,我已经写过一篇博客,只不过那篇更偏向于入门一些,当时一实现功能之后就迫不及待的分享给大家了.地址在这儿:http://blog.csdn.net/LJFPHP/art ...
- 【HTML+CSS】页内侧边导航栏 页内导航
页内侧边导航栏 页内导航 源码 HTML部分 CSS部分 效果 源码 HTML部分 <!DOCTYPE html> <html><head><meta cha ...
- SharePoint 2010 如何隐藏快速启动栏,顶部导航及Ribbon菜单
新建Application页面默认会显示快速启动栏,顶部导航及Ribbon菜单.如果你想在对话框框架(Dialog Framework)里打开该application页面,这些东西会占用很多空间,让你 ...
- Android中导航栏之自定义导航布局
Toolbar系列文章导航 Android中导航栏之Toolbar的使用 Android中导航栏之溢出菜单OverflowMenu Android中导航栏之搜索框SearchView Android中 ...
- ios 上滑隐藏导航下拉显示导航栏实现
为了最大限度的利用手机屏幕,出现了上滑隐藏导航下拉显示导航栏. 先看看效果(代码:http://download.csdn.net/detail/gx_wqm/9771247), 把代码跑一下看一下是 ...
最新文章
- 02-maven常用命令,以及使用命令创建目录
- css 水珠动图,CSS3逼真水珠特效
- mybatis foreach 错误_MyBatis高级结果映射之一对一映射
- docker-compose HBase + Phoenix 开发环境单机快速部署
- eeprom的wp 引脚_EEPROM
- win7怎么看服务器文件管理,Win7库文件管理器怎么用 Win7库功能及其使用方法详解...
- Azure下通过Powreshell批量添加、删除VM终结点
- 疫情相关电信诈骗涉案金额超3.51亿元,谨防这四类骗局!
- 目标反射回波检测算法及其FPGA实现 之二:互相关/卷积/FIR电路的实现
- win7美化_Win10桌面美化实用软件推荐
- 图解冰河木马一次使用过程
- edem合成运动教程
- 《三体2:黑暗森林》读后感
- 《蜗居》台词100句 血淋淋的经典
- 一只青蛙一次可以跳上1级台阶,也可以跳上2级,也可以跳n级。求该青蛙跳上一个n级的台阶总共有多少种跳法(先后次序不同算不同的结果)
- matlab ode 初值,关于ODE45初值问题和erf函数的问题
- ubuntu系统中webpy的使用
- Win7下使用wubi.exe安装Ubuntu系统
- itchat微信自动回复消息
- excel文件打不开如何修复
热门文章
- 李涛PS高手之路基础篇(1)
- 『phphot』【SD2.0大会】毛新生:“傻瓜”软件将成用户最爱
- python +pyqt 小说下载阅读器 转语音合成 ,基于PyQt5生成图形页面(已打成exe可直接下载使用)
- java 记录微信app支付接口实现
- 时间同步通道跳频TSCH
- js中null和undefined区别
- 并发模型和I/O模型介绍
- 被一个问题卡了近两天,下班后我哭了。。。
- 人工的智能?谷歌AI订位系统Duplex的大部分电话是真人打的
- 通过三种情况深度分析,复杂的公网环境,网络穿透如何做到?丨C++后端开发丨P2P丨c/c++Linux服务器开发丨网关API