zoukankan      html  css  js  c++  java
  • CSS导航菜单会跳起的多彩菜单

    这里来实现跳起的效果。是基于前一例的制作过程,让菜单跳起时,就是让菜单项在鼠标指针式,使菜单文字所在的p段落变高一些。

    1,首先改造HTML。在每个li中,增加一个div,把类别名设为“pad”,即垫子的意思,代码如下:

     <li>
         <a href="#">
            <div class="pad"></div>
            <div class="row1"></div><div class="row2"></div>
            <div class="row3"></div><div class="row4"></div>
            <p>Home</p>
            </a>
        </li>

    这里只做一个,其他几个都是相同的

    对这个垫子,div设置css样式,代码如下:

    .item .pad{
     height:10px;
     border:0;
     background:transparent;
    }

    分别设置“垫子”和p段落在鼠标经过的样式,代码如下。

    .item a:hover .pad{
     height:0px;
    }

    这样就可以正确实现跳起的效果了

    下面就是实现多彩效果了,若想每个菜单项不能颜色显示,就要在每个li的类别中增加一个累的别名

    例如

     <li class="item orange">
         <a href="#">
            <div class="pad"></div>
            <div class="row1"></div><div class="row2"></div>
            <div class="row3"></div><div class="row4"></div>
            <p>Home</p>
            </a>
        </li>

    想让第一个菜单项以黄色显示,其他几项也同样的处理。

    设置鼠标响应时代码如下:

    .orange p,.orange .row2,.orange .row3,.orange .row4{
     background:#fa0;
    }
    .orange a:hover p,.orange a:hover .row2,.orange a:hover .row3,.orange a:hover .row4{
     background:#fa0;
    }
    .yellow p,.yellow .row2,.yellow .row3,.yellow .row4{
     background:#ff0;
    }
    .yellow a:hover p,.yellow a:hover .row2,.yellow a:hover .row3,.yellow a:hover .row4{
     background:#ff0;
    }
    .green p,.green .row2,.green .row3,.green .row4{
     background:#0e0;
    }
    .green a:hover p,.green a:hover .row2,.green a:hover .row3,.green a:hover .row4{
     background:#0e0;
    }
    .blue p,.blue .row2,.blue .row3,.blue .row4{
     background:#0cf;
    }
    .blue a:hover p,.blue a:hover .row2,.blue a:hover .row3,.blue a:hover .row4{
     background:#0cf;
    }
    .red p,.red .row2,.red .row3,.red .row4{
     background:#F00;
    }
    .red a:hover p,.red a:hover .row2,.red a:hover .row3,.red a:hover .row4{
     background:#F00;
    }

    这样就实现了最终的效果,如图:

  • 相关阅读:
    scikit-learn
    caffe
    大型云原生项目在数字化企业落地过程解密
    「澳洋主数据项目」主数据促企业变革
    Docker镜像仓库清理的探索之路
    用友云开发者中心助你上云系列之在线调试
    如何精简企业主数据“裹脚布”
    企业推动移动化战略中为什么需要Moli?
    欧派家居牵手用友云平台 打造标准化数据资产管理平台
    用友云开发者中心,你应该知道的那些事
  • 原文地址:https://www.cnblogs.com/zfang/p/2223907.html
Copyright © 2011-2022 走看看