小米商城侧导航栏的实现(导航栏的制作)

侧导航栏在我们写的时候很常用,很多网站上面都有侧边导航栏的应用,那么如何制作侧边导航栏呢?

下面看一看我制作的小米商城的侧导航栏。

看下列代码:

<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;

看一下运行效果:

这是一个很简单的练习,但是里面的小知识点也不少,大家可以试一试哦。

原文链接:https://blog.csdn.net/weixin_65607135/article/details/126643900?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522167034648916800192216446%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=167034648916800192216446&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-25-126643900-null-null.nonecase&utm_term=%E5%B0%8F%E7%B1%B3

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发
头像
文明发言,共建和谐米科社区
提交
头像

昵称

取消
昵称表情图片

    暂无评论内容