原创投稿
  1. 创想鸟首页
  2. 用户投稿

CSS实现自适应导航菜单

程序猿 • • 用户投稿

这次给大家带来CSS实现自适应导航菜单，CSS实现自适应导航菜单的注意事项有哪些，下面就是实战案例，一起来看一下。

以下是一个简单实例，可以通过学习了解响应工菜单的制作。

html

css

 .nav {            position: relative;            margin: 20px 0;        }            .nav ul {                margin: 0;                padding: 0;            }                .nav ul li {                    margin: 0 5px 10px 0;                    padding: 0;                    list-style: none;                    float: left;                }            .nav a {                padding: 3px 12px;                text-decoration: none;                color: #999;                line-height: 100%;            }                .nav a:hover {                    color: #000;                }            .nav .current a {                background: #999;                color: #fff;                border-radius: 5px;            }            /* right nav */            .nav.right ul {                text-align: right;            }            /* center nav */            .nav.center ul {                text-align: center;            }

页面小于600显示成一列

        @media (max-width: 600px) {            .nav {                position: relative;                min-height: 30px;            }                .nav ul {                    width: 180px;                    padding: 5px 0;                    position: absolute;                    top: 0;                    left: 0;                    border: solid 1px #aaa;                    background: #fff url(images/icon-menu.png) no-repeat 10px 11px;                    border-radius: 5px;                    box-shadow: 0 1px 2px rgba(0,0,0,.3);                }                .nav li {                    display: none; /* hide all 
  •  items */                    margin: 0;                }                .nav .current {                    display: block; /* show only current 
  •  item */                }                .nav a {                    display: block;                    padding: 5px 5px 5px 32px;                    text-align: left;                }                .nav .current a {                    background: none;                    color: #666;                }                /* on nav hover */                .nav ul:hover {                    background-image: none;                }                    .nav ul:hover li {                        display: block;                        margin: 0 0 5px;                    }                    .nav ul:hover .current {                        background: url(images/icon-check.png) no-repeat 10px 7px;                    }                /* right nav */                .nav.right ul {                    left: auto;                    right: 0;                }                /* center nav */                .nav.center ul {                    left: 50%;                    margin-left: -90px;                }        }

    • 相信看了本文案例你已经掌握了方法，更多精彩请关注创想鸟其它相关文章！

    推荐阅读：

    用CSS3实现弹幕效果

    你不知道的冷门CSS属性

    CSS定制文本省略的方法

    以上就是CSS实现自适应导航菜单的详细内容，更多请关注创想鸟其它相关文章！

    版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
    如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
    发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1609483.html

    赞 (0)
    打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
    0 0

    关于作者

    程序猿的头像

    程序猿签约作者

    413.8K 文章
    0 评论
    2 粉丝
    这个人很懒，什么都没有留下～
    用css3实现圆圈进度条
    上一篇 2025年12月24日 00:48:22
    用CSS实现JS的效果
    下一篇 2025年12月24日 00:48:31

    相关推荐

    发表回复

    登录后才能评论
    关注微信