美文网首页原生Js的Demo合集
商城分类导航纯Css与Js版的简单Demo

商城分类导航纯Css与Js版的简单Demo

作者: 做有趣的恶魔 | 来源:发表于2017-05-02 20:29 被阅读46次
一、Html布局
<ul class="topmenu">
        <div class="toptitle">
            全部商品分类
        </div>
        <li><a href="#">图书、音像、数字商品</a><span></span>
            //加入span标签是为了遮挡两个menu之间的边框
            <div class="submenu">
                <div class="leftdiv">
                    <dl>
                        <dt><a href="#">电子书</a></dt>
                        <dd>
                            <a href="#">免费</a> <a href="#">小说</a> <a href="#">励志与成功</a> <a href="#">婚恋/两性</a>
                            <a href="#">文学</a> <a href="#">经管</a> <a href="#">畅读VIP</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt><a href="#">数字音乐</a></dt>
                        <dd>
                            <a href="#">通俗流行</a> <a href="#">古典音乐</a> <a href="#">摇滚说唱</a> <a href="#">爵士蓝调</a>
                            <a href="#">乡村民谣</a> <a href="#">有声读物</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt><a href="#">音像</a></dt>
                        <dd>
                            <a href="#">音乐</a> <a href="#">影视</a> <a href="#">教育音像</a> <a href="#">游戏</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt><a href="#">文艺</a></dt>
                        <dd>
                            <a href="#">小说</a> <a href="#">文学</a> <a href="#">青春文学</a> <a href="#">传记</a> <a
                                href="#">艺术</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt><a href="#">人文社科</a></dt>
                        <dd>
                            <a href="#">历史</a> <a href="#">心理学</a> <a href="#">政治/军事</a> <a href="#">国学/古籍</a>
                            <a href="#">哲学/宗教</a> <a href="#">社会科学</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt><a href="#">经管励志</a></dt>
                        <dd>
                            <a href="#">经济</a> <a href="#">金融与投资</a> <a href="#">管理</a> <a href="#">励志与成功</a>
                        </dd>
                    </dl>
                    <dl class="fore7">
                        <dt><a href="#">生活</a></dt>
                        <dd>
                            <a href="#">家教与育儿</a> <a href="#">旅游/地图</a> <a href="#">烹饪/美食</a> <a href="#">时尚/美妆</a>
                            <a href="#">家居</a> <a href="#">婚恋与两性</a> <a href="#">娱乐/休闲</a> <a href="#">健身与保健</a>
                            <a href="#">动漫/幽默</a> <a href="#">体育/运动</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt><a href="#">科技</a></dt>
                        <dd>
                            <a href="#">科普</a> <a href="#">IT</a> <a href="#">建筑</a> <a href="#">医学</a> <a href="#">
                                工业技术</a> <a href="#">电子/通信</a> <a href="#">农林</a> <a href="#">科学与自然</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt><a href="#">少儿</a></dt>
                        <dd>
                            <a href="#">少儿</a> <a href="#">0-2岁</a> <a href="#">3-6岁</a> <a href="#">7-10岁</a>
                            <a href="#">11-14岁</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt><a href="#">教育</a></dt>
                        <dd>
                            <a href="#">教材</a> <a href="#">中小学教辅</a> <a href="#">考试</a> <a href="#">外语学习</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt><a href="#">其它</a></dt>
                        <dd>
                            <a href="#">英文原版书</a> <a href="#">港台图书</a> <a href="#">工具书</a> <a href="#">套装书</a>
                            <a href="#">杂志/期刊</a>
                        </dd>
                    </dl>
                </div>
                <div class="rightdiv">
                    <dl>
                        <dd>
                            <a href="http://sale.jd.com/act/1XDZ6ShE5M7tTrl.html">
                                <img src="http://img30.360buyimg.com/erpVCAare/g16/M00/0B/1B/rBEbRlOCFcoIAAAAAAArMNB2tlkAACTlwDgVG8AACtI514.jpg"
                                    width="194" height="70" title="\家电">
                            </a>
                        </dd>
                        <dd>
                            <a href="http://sale.jd.com/act/v8kJIaPmsMGuebpH.html">
                                <img src="http://img30.360buyimg.com/erpVCAare/g16/M00/0B/19/rBEbRlOAiHUIAAAAAAAx8X2c6oIAACTCAP56A4AADIJ112.jpg"
                                    width="194" height="70" title="小家电--三请聚宝盆">
                            </a>
                        </dd>
                    </dl>
                    <dl>
                        <dt>推荐品牌</dt>
                        <dd>
                            <a href="#">美的官方旗舰店</a>
                        </dd>
                        <dd>
                            <a href="#">苏泊尔旗舰店</a>
                        </dd>
                        <dd>
                            <a href="#">九阳旗舰店</a>
                        </dd>
                        <dd>
                            <a href="#">东菱旗舰店</a>
                        </dd>
                        <dd>
                            <a href="#">海尔统帅旗舰店</a>
                        </dd>
                        <dd>
                            <a href="#">小熊旗舰店</a>
                        </dd>
                    </dl>
                    ![](wii.png)
                </div>
            </div>
        </li>
        <li><a href="#">家用电器</a></li>
        <li><a href="#">手机、数码</a></li>
        <li><a href="#">电脑、办公</a></li>
        <li><a href="#">家居、家具、家装、厨具</a></li>
        <li><a href="#">服饰内衣、珠宝首饰</a></li>
        <li><a href="#">个护化妆</a></li>
        <li><a href="#">鞋靴、箱包、钟表、奢侈品</a></li>
        <li><a href="#">运动户外</a></li>
        <li><a href="#">汽车用品</a></li>
        <li><a href="#">母婴、玩具乐器</a></li>
        <li><a href="#">食品饮料、酒类、生鲜</a></li>
        <li><a href="#">营养保健</a></li>
  </ul>
二、Css样式
  • 纯css版
<style type="text/css">
   body{
        padding: 0;
        font-size: 10pt;
        behavior:url(css/csshover.htc);
        /*为兼容IE6引的补丁文件*/
    }
    .topmenu{
        display: block;
        width: 220px;
        border: 2px solid #e4393c;
        margin: 0;
        padding: 0;
    }
    .toptitle{
        height: 40px;
        line-height: 40px;
        text-align: left;
        font-size: 11pt;
        font-weight: bold;
        color: White;
        background: #e4393c;
        padding-left: 20px;
    }
    .topmenu li{
        height: 30px;
        line-height: 30px;
        font-size: 11pt;
        list-style-type: none;
        text-align: left;
        padding-left: 8px;
        z-index: 3;
        /*图层*/
        background-image:url(http://img.mukewang.com/5411027300014f0200220030.jpg);
        /*箭头图片*/
        background-repeat:no-repeat;
        background-position:right;
    }
    .topmenu li:hover{
        background-image:none;
        /*去掉箭头图片*/
        border:1px solid #DDD;
        border-right: 0;
        box-shadow:0 0 8px #DDD;
        /*向框添加一个或多个阴影*/
        -moz-box-shadow: 0 0 8px #DDD;
        /* 老的 Firefox */
        -webkit-box-shadow: 0 0 8px #DDD;
        /*兼容谷歌*/
        border-left: 4px solid #e4393c;
    }
    .topmenu li a{
        text-decoration: none;
        color: #313131;
    }
    .topmenu li a:hover{
        text-decoration: underline;
        font-weight: bold;
        color: #e4393c;
    }
    .submenu{
      display: none;
      width: 715px;
      position: absolute;
      top: 40px;
      left:220px;
      border: 1px solid #DDD;
      z-index: 4;
      background: white;
      box-shadow:0 0 8px #DDD;
      -moz-box-shadow: 0 0 8px #DDD;
      -webkit-box-shadow: 0 0 8px #DDD;
    }
    .leftdiv{
      float: left;
      width: 490px;
      margin: 5px;
    }
    .rightdiv{
      float: left;
      width: 200px;
      margin: 5px;
    }
    .topmenu li:hover .submenu{
      display: block;
    }
    .topmenu li:hover span{
      background: white;
      display: inline-block;
      z-index: 20;
      width: 20px;
      height: 30px;
      float: right;
      position: relative;
    }
    .leftdiv dl{
      display: block;
      border-bottom: 1px solid #EEE;
      padding-bottom: 6px;
      overflow: hidden;
    }
    .leftdiv dl dt{
      display: block;
      float: left;
      width: 60px;
      text-align: right;
      height: 22px;
      line-height: 22px;
      padding-right: 6px;
    }
    .leftdiv dl dt a{
      color: #e4393c;
      font-weight: bold;
      text-decoration: underline;
      font-size: 10pt;
    }
    .leftdiv dl dd{
      display: block;
      overflow: hidden;
    }
    .leftdiv dl dd a{
      display: block;
      float: left;
      border-left: 1px solid #ccc;
      color: #737373;
      font-size: 9pt;
      padding: 0 8px;
      height: 14px;
      line-height: 14px;
      margin: 4px 0;
    }
    .rightdiv dl dd{
      margin: 3px 0;
    }
    .rightdiv dl dt{
      color: #e4393c;
      font-size: 10pt;
      font-weight: bold;
    }
    .rightdiv dl dd a{
      font-size: 9px;
      color: #737373;
      line-height: 22px;
    }
    .rightdiv dl dd a:hover{
      font-weight: normal;
      color: #737373;
    }
</style>
  • Js版的css样式(简单的将 li:hover 改成一个类名 .lihover)
.topmenu .lihover{/*鼠标移动到上面时应用的样式*/
        background-image:none;
        /*去掉箭头图片*/
        border:1px solid #DDD;
        border-right: 0;
        box-shadow:0 0 8px #DDD;
        /*向框添加一个或多个阴影*/
        -moz-box-shadow: 0 0 8px #DDD;
        /* 老的 Firefox */
        -webkit-box-shadow: 0 0 8px #DDD;
        /*兼容谷歌*/
        border-left: 4px solid #e4393c;
    }
    .topmenu .lihover .submenu{/*悬浮层*/
      display: block;
    }
    .topmenu .lihover span{/*白色小方框*/
      background: white;
      display: inline-block;
      z-index: 20;
      width: 20px;
      height: 30px;
      float: right;
      position: relative;
    }
三、Js部分
<script>
  window.onload = function(){
    var Lis = document.getElementsByTagName('li');
    for (var i = 0; i < Lis.length; i++) {
      Lis[i].i = i;//由于Js中的闭包 for循环中的i是最后一个数 所以不能直接使用i
      Lis[i].onmouseover = function(){
        this.className = "lihover";
        // 为其添加lihover类的样式 后面的.submenu span等会自动继承

        var h0 = (this.i-1)*30+42;//当前的一级菜单的高度 30为每一行的高度 42为标题的高度
        var y = this.getElementsByTagName('div')[0].offsetHeight;//当前一级菜单下悬浮层的高度
        var h = this.getElementsByTagName('div')[0].style.top + y;
        if(h < h0){
          this.getElementsByTagName('div')[0] = h0+'px';
          //防止当悬浮层内容太少的时候其远离一级菜单
        }
        if(y>550){
          this.getElementsByTagName('div')[0].style.top = "3px";
          //防止当悬浮层内容太多的时候一屏无法展示完整将其上移
        }
      }
      Lis[i].onmouseout = function(){
        this.className = "";
      }
    }
  }
</script>

相关文章

网友评论

    本文标题：商城分类导航纯Css与Js版的简单Demo

    本文链接：https://www.haomeiwen.com/subject/wrdhtxtx.html

    延伸阅读

    深度阅读

    • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

    栏目导航

    热点阅读

    原生Js的Demo合集

    关于我们|服务条款|联系我们|商城分类导航纯Css与Js版的简单Demo|投稿指南|网站地图|RSS订阅|排版工具|手机版

    提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

    Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

    备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

    本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

    所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！