CSS3实现精美横向滚动菜单按钮

互联网   04-14 10:24:53   作者:佚名   我要评论

今天给大家分享基于css3实现精美横向滚动菜单按钮,非常不错,具有参考借鉴价值,需要的的朋友参考下吧

废话不多说,直接上图:

然后是代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>精美横向滚动菜单按钮 - Glunefish</title>
    </head>
<!-- 这里接下面的行间样式 -->
    <body>
        <ul>
            <li><a href="" class="a1"><span>Home</span></a></li>
            <li><a href="" class="a2"><span>Chat</span></a></li>
            <li><a href="" class="a3"><span>About</span></a></li>
        </ul>
    </body>
</html>

CSS:

 <style>
        ul{list-style:none;}
        ul li a{
            display:block;
            width:40px;
            height:40px; 
            background:rgb(208,165,37); 
            margin-top:10px; 
            text-decoration:none; 
            line-height:40px; 
            position:relative;
            }
        ul li a span{
            width:0; 
            height:40px;
            display:block;
            visibility:hidden;
            overflow:hidden;
            font-weight:bold;
            position:absolute;
            left:40px;
            transition:all 0.3s;
            }
        ul li .a1 span{background:rgb(30,139,180);}
        ul li .a2 span{background:rgb(125,163,23);}
        ul li .a3 span{background:rgb(175,30,131);}
        ul li a:hover span{visibility:visible; width:auto; padding:0 20px;}
    </style>

 

为了便于阅读特别优化了一下代码,主要涉及到:

CSS3动画 (transtion)

元素的隐藏 (overflow / visibility)

相关文章

  • CSS3 二级导航菜单的制作的示例

    这篇文章主要介绍了CSS3 二级导航的制作的示例的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-02
  • 纯css实现多级折叠菜单折叠树效果

    这篇文章主要介绍了纯css实现多级折叠菜单折叠树效果,运用checkbox的checked值来判断下级栏目是否展开,通过css3选择器提供的checked伪类来实现此效果,感兴趣的朋友参考
    2018-03-29
  • 纯CSS实现下拉菜单的示例代码

    这篇文章主要介绍了纯CSS实现下拉菜单的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-09
  • 使用HTML+CSS实现鼠标划过的二级菜单栏的示例

    本篇文章主要介绍了使用HTML+CSS实现鼠标划过的二级菜单栏的示例,非常具有实用价值,需要的朋友可以参考下
    2017-09-14
  • HTML+CSS实现简单下拉菜单效果

    使用Html+css实现简单的下拉菜单代码非常简单,具有参考借鉴价值,需要的的朋友参考下吧
    2017-06-22
  • CSS3模拟动画下拉菜单效果

    使用css3制作的下拉菜单外观非常漂亮,在各大网站都适用,今天小编通过本文给大家分享基于css3制作的动画下拉菜单效果,需要的的朋友参考下吧
    2017-04-12
  • 利用CSS实现几款不错的菜单栏实例代码

    这篇文章主要介绍了利用CSS实现的几款不错的菜单栏实例代码,文中包含滑动菜单、左侧带图标多级下拉菜单、立体动感菜单、可同时折叠的手风琴菜单、鼠标滑动展开二级菜单以
    2017-02-16
  • 纯CSS3实现扇形动画菜单(简化版)实例源码

    这篇文章主要给大家介绍了利用纯CSS3实现扇形动画菜单(简化版)实例源码,文中给出了完整的示例源码,实现后的效果非常动感漂亮时尚,需要的朋友可以参考借鉴,下面来一起看
    2017-01-17
  • CSS下拉菜单简单制作教程

    这篇文章主要为大家详细介绍了CSS下拉菜单简单制作教程,鼠标移动到指定元素上会出现下拉菜单,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-07-05
  • 纯CSS实现可折叠树状菜单

    这篇文章主要介绍了纯CSS实现可折叠树状菜单,不用js让你体会到css的强大,需要的朋友可以参考下
    2018-04-17

最新评论