做一个下拉菜单栏效果
网站首页的下拉菜单栏
下列为实例演示
实例演示
以下为代码部分
<!DOCTYPE?html>
<html?lang=”en”>
<head>
????????<meta?charset=”UTF-8″>
? ? ? ? <meta?name=”viewport”?content=”width=device-width,?initial-scale=1.0″>
????????<title>状态栏</title>
</head>
<style>
????*?{
????????margin:?0;
????????padding:?0;
????}
????#ststus?{
????????width:?500px;
????????position:?relative;
????????top:?50px;
????????margin:?auto;
????????/*?overflow:?hidden;?*/
????}
????#tit?{
????????float:?left;
????????font-size:?20px;
????????font-weight:?bold;
????????margin-left:?25px;
????????border-radius:?10px;
????}
????#tit:hover?{
????????background:?goldenrod;
????????/*?box-shadow:?5px?5px?1px?#888888;?*/
????????cursor:?pointer;
????}
????#tit:hover?ul?{
????????display:?block;
????}
????#tit?ul?li?{
????????background:?grey;
????}
????#tit?ul?{
????????position:?absolute;
????????font-size:?20px;
????????font-weight:?bold;
????????left:?110px;
????????top:?27px;
????????display:?none;
????}
????li?{
????????/*?position:?absolute;?*/
????????margin-top:?2px;
????}
????li:hover?{
????????border:?1px?solid?black;
????????border-radius:?5px;
????}
</style>
<body>
????<div?id=”ststus”>
????????<div?id=”tit”>首页</div>
????????<div?id=”tit”>产品展现
????????????<ul>
????????????????<li>产品1</li>
????????????????<li>产品2</li>
????????????????<li>产品3</li>
????????????????<li>产品4</li>
????????????????<li>产品5</li>
????????????</ul>
????????</div>
????????<div?id=”tit”>处理方案</div>
????????<div?id=”tit”>联络我们</div>
????</div>
</body>
????????????????????????????????????<!–?普通下拉菜单无需js?–>
<!–?<script>
????//获取tit
????var?tit?=?document.getElementById(“solve”);
????//获取li
????var?liList?=?Array.from(document.getElementsByTagName(“li”));
????//?tit.addEventListener(“click”,?titClick);
????for?(var?i?=?0;?i?<?liList.length;?i++)?{
????????liList[i].addEventListener(“click”,?liClick);
????}
????//click事件绑定
????function?titClick()?{
????????alert(“若产品存在使用问题，欢迎与我司联络”);
????}
????//li点击
????function?liClick()?{
????????alert(“当前产品还在研发中”);
????}
</script>?–></html>
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 做一个下拉菜单栏效果
