V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
wandou
V2EX  ›  问与答

请教下,能用纯css实现导航按钮hover时滑动下拉出菜单吗

  •  
  •   wandou · 2013-09-02 15:11:19 +08:00 · 5141 次点击
    这是一个创建于 4091 天前的主题,其中的信息可能已经有所发展或是发生改变。
    第 1 条附言  ·  2013-09-02 16:11:22 +08:00
    说用 hover+transition 的
    drop块 初始定位 和 hover后的定位 具体怎么设置
    感觉这地方避不开的是需要取得 drop块的高度(因为需要滑动,这个高度其实是实际的滑动距离),但是不用js不可能取到
    所以很疑惑
    14 条回复    1970-01-01 08:00:00 +08:00
    Sivan
        1
    Sivan  
       2013-09-02 15:12:53 +08:00
    当然可以
    wandou
        2
    wandou  
    OP
       2013-09-02 15:16:52 +08:00
    @Sivan 求指点。。
    alay9999
        3
    alay9999  
       2013-09-02 15:17:50 +08:00
    li:hover ul{

    }
    alay9999
        4
    alay9999  
       2013-09-02 15:18:59 +08:00
    li ul{
    display:none;
    }

    li:hover ul{
    display:block;
    }
    wandou
        5
    wandou  
    OP
       2013-09-02 15:20:11 +08:00
    @alay9999 滑动怎么做,自上而下滑出来那种
    guchengf
        6
    guchengf  
       2013-09-02 16:05:06 +08:00
    CSS3 Transition ,具体方法Google
    wandou
        7
    wandou  
    OP
       2013-09-02 16:11:50 +08:00
    @guchengf 刚贴的附言
    guchengf
        8
    guchengf  
       2013-09-02 16:23:59 +08:00
    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="a.css">
    </head>
    <body>
    <div>
    <ul id="a">111
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
    </ul>
    </div>
    </body>
    </html>



    #a li{
    list-style: none;
    background: black;
    color: white;
    height: 0px;
    -moz-transition: height 2s ease;
    -webkit-transition: height 2s ease;
    -o-transition: height 2s ease;
    transition: height 2s ease;
    }
    #a:hover li{
    height: 20px;
    }


    上面是HTML,下面是CSS,你看是不是你要的效果
    wandou
        9
    wandou  
    OP
       2013-09-02 16:55:57 +08:00
    @guchengf 阿里嘎多,代码都贴出来了: )

    不过 高度变化 其实是“伪滑动”

    和真实的位移滑动效果差别还是很明显的
    alexrezit
        10
    alexrezit  
       2013-09-02 17:07:18 +08:00
    @wandou
    平移? translate.
    wandou
        11
    wandou  
    OP
       2013-09-02 17:11:58 +08:00
    @alexrezit 额,css有translate吗。。没听说过,求详解
    Sivan
        12
    Sivan  
       2013-09-02 18:39:59 +08:00 via iPhone
    @wandou 这个不难的,自己研究下吧 :D
    alexrezit
        13
    alexrezit  
       2013-09-02 18:42:17 +08:00
    @wandou
    有啊. 我不是做前端的都知道.
    Kaiyuan
        14
    Kaiyuan  
       2013-09-02 20:11:29 +08:00   ❤️ 1
    单纯滑动只有在导航在最顶部的时候可以,要是不是导航在最顶部的话会「露馅」的。

    我当年做了一个3d的。厚颜的卖$3 http://gum.co/suID ,结果没人买,哈哈。
    很多网站都有教css3的特效
    http://tympanus.net/codrops/ 这个网站有大量的css3、html5、js 特效,可以找到你想要的。
    http://www.webdesignerdepot.com/
    http://webdesign.tutsplus.com/
    http://www.smashingmagazine.com/
    http://css-tricks.com/
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1216 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 18:21 · PVG 02:21 · LAX 10:21 · JFK 13:21
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.