div+css+js打造的一款菜单的收缩与展开代码

代码简介:

DIV+CSS+JavaScript二者结合实现一个独特的展开/收缩菜单,实际上是用JS控制某一元素的显示与隐藏,这种效果比较不错,可以用到解释说明某些产品的技术参数等部分。

代码内容:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1

-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>div+css+js打造的一款菜单的收缩与展开代码_网页代码站(www.webdm.cn)</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
 margin: 30px auto;
}
ul {
 list-style: none;
}
#faq {
 font-size: 12px;
 width: 800px;
}
#faq li {
 margin: 0 0 10px;
 padding: 0 0 5px;
}
#faq dl {
 margin: 0;
 padding:0;
 display:inline;
}
#faq dt {
 font-weight:bold;
 cursor:pointer;
 line-height: 20px;
 padding: 0 0 5px 22px;
 border-bottom:1px #ccc dotted;
}
#faq dd {
 display:none;
 margin:0;
 padding: 5px 0 5px 20px;
 background:#E5ECF9;
 line-height: 180%;
}
</style>
<script type="text/javascript">
var lastFaqClick=null;
window.οnlοad=function(){
  var faq=document.getElementById("faq");
  var dls=faq.getElementsByTagName("dl");
  for (var i=0,dl;dl=dls[i];i++){
    var dt=dl.getElementsByTagName("dt")[0];//取得标题
     dt.id = "faq_dt_"+(Math.random()*100);
     dt.οnclick=function(){
       var p=this.parentNode;//取得父节点
        if (lastFaqClick!=null&&lastFaqClick.id!=this.id){
          var dds=lastFaqClick.parentNode.getElementsByTagName("dd");
          for (var i=0,dd;dd=dds[i];i++)
            dd.style.display='none';
        }
        lastFaqClick=this;
        var dds=p.getElementsByTagName("dd");//取得对应子节点,也就是说明部分
        var tmpDisplay='none';
        if (gs(dds[0],'display')=='none')
          tmpDisplay='block';
        for (var i=0;i<dds.length;i++)
          dds[i].style.display=tmpDisplay;
      }
  }
}

function gs(d,a){
  if (d.currentStyle){
    var curVal=d.currentStyle[a]
  }else{
    var curVal=document.defaultView.getComputedStyle(d, null)[a]
  }
  return curVal;
}
</script>
</head>
<body>
<ul id="faq">
  <li>
    <dl>
      <dt>关于网页代码站</dt>
      <dd><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质

量的代码!</dd>
    </dl>
  </li>
   <li>
    <dl>
      <dt>网页代码站是一个学习型代码下载站</dt>
      <dd>网页代码站立志做一个最好的学习型代码下载站,欢迎您的经常光临,也欢迎提出宝贵建议!</dd>
    </dl>
  </li>
 <li>
    <dl>
      <dt>AjAX是什么?</dt>
      <dd>一种能够提升用户体验的WEB2.0新型技术,可以实现像电脑系统一样的操作体验,类似本地化的一种脚本

技术。</dd>
    </dl>
  </li>
 </ul>
</body>
</html>
<br>
<a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!

代码来自:http://www.webdm.cn/webcode/4904ebbf-690b-4295-aebb-df677f6fcf39.html

转载于:https://www.cnblogs.com/webdm/archive/2011/04/21/2023122.html

可以使用HTML和CSS结合JavaScript来实现点击扇形展开效果菜单。以下是一个简单的示例: HTML代码: ```html <div class="circle-menu"> <div class="circle-menu-item" id="item1"></div> <div class="circle-menu-item" id="item2"></div> <div class="circle-menu-item" id="item3"></div> <div class="circle-menu-item" id="item4"></div> <div class="circle-menu-item" id="item5"></div> <div class="circle-menu-item" id="item6"></div> <div class="circle-menu-item" id="item7"></div> <div class="circle-menu-item" id="item8"></div> <div class="circle-menu-item" id="item9"></div> <div class="circle-menu-item" id="item10"></div> <div class="circle-menu-item" id="item11"></div> <div class="circle-menu-item" id="item12"></div> <div class="circle-menu-trigger"></div> </div> ``` CSS样式: ```css .circle-menu { position: relative; width: 200px; height: 200px; margin: 50px auto; } .circle-menu-item { position: absolute; top: 50%; left: 50%; width: 50px; height: 50px; margin: -25px 0 0 -25px; border-radius: 50%; background-color: #333; opacity: 0; transform: scale(0); transition: all 0.3s ease-in-out; } .circle-menu-trigger { position: absolute; top: 50%; left: 50%; width: 50px; height: 50px; margin: -25px 0 0 -25px; border-radius: 50%; background-color: #fff; border: 2px solid #333; cursor: pointer; z-index: 100; } .circle-menu-trigger.active ~ .circle-menu-item { opacity: 1; transform: scale(1); } #item1 { transform: translate(-100px, 0); } #item2 { transform: translate(-70px, -70px); } #item3 { transform: translate(0, -100px); } #item4 { transform: translate(70px, -70px); } #item5 { transform: translate(100px, 0); } #item6 { transform: translate(70px, 70px); } #item7 { transform: translate(0, 100px); } #item8 { transform: translate(-70px, 70px); } #item9 { transform: translate(-85px, -30px); } #item10 { transform: translate(85px, -30px); } #item11 { transform: translate(85px, 30px); } #item12 { transform: translate(-85px, 30px); } ``` JavaScript代码: ```javascript var trigger = document.querySelector('.circle-menu-trigger'); trigger.addEventListener('click', function() { trigger.classList.toggle('active'); }); ``` 在上面的示例中,通过HTML代码定义了一个菜单圆形容器和12个菜单项,以及一个触发器元素。通过CSS样式定义了菜单项的样式和触发器的样式,并且通过CSS3动画将菜单项隐藏,并在触发器被激活时显示。通过JavaScript代码监听点击触发器的事件,并在触发器被点击时切换样式类,从而实现菜单展开收缩效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值