您现在的位置是：网站首页> 编程资料编程资料

CSS自适应导航菜单的实例代码纯CSS实现兼容IE7及以上宽度自适应无限级导航菜单附演示

2023-10-20 320人已围观

简介本篇文章主要介绍了CSS自适应导航菜单的实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

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

html

Portfolio
Illustration
Web Design
Print Media
Graphic Design

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; } }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇：纯CSS设置Checkbox复选框控件的样式(五种方法)HTML+CSS实现单选框、复选框美观的样式11种炫酷CSS3复选框checkbox样式美化特效源码CSS自定义绿色复选框按钮样式一波CSS的Checkbox复选框样式代码分享9款样式迷人的CSS3自定义Checkbox复选框特效源码CSS定义Radio单选项和Checkbox复选框样式有效代码

下一篇：天天酷跑新版本极速世界刀锋225万刷分视频攻略分享_手机游戏_游戏攻略_

您现在的位置是：网站首页> 编程资料编程资料

CSS自适应导航菜单的实例代码纯CSS实现兼容IE7及以上宽度自适应无限级导航菜单附演示

相关内容

点击排行

本栏推荐

猜你喜欢