css3做了一个卷轴样式的菜单_css收起来卷轴样式-优快云博客

本文链接：https://blog.youkuaiyun.com/yeahsing/article/details/9259373

这篇博客展示了如何利用CSS3实现一个具有卷轴样式的菜单。通过设置不同的CSS属性，如过渡效果、阴影和宽度变化，创建了一个在鼠标悬停时宽度扩展的导航菜单。菜单项分为多个类别，每个类别都有独特的背景和边框效果，增强了用户体验。在WebKit浏览器中，此效果表现最佳。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link href="css/base.css" rel="stylesheet" type="text/css"/>
<title>无标题文档</title>
</head>
<style>
a{text-decoration:none;}
#nav{position:fixed; left:0px; top:200px;}
.nav_list{height:58px; position:relative; margin-top:10px; -moz-box-shadow:3px 3px #123456;  width:14px; -webkit-transition:width 1s linear; -moz-transition:width 1s linear;}
.border{ height:58px; width:7px; background:url(img/bian.jpg) no-repeat; float:left; -webkit-box-shadow:3px 3px 3px grey; -moz-box-shadow:3px 3px 3px grey;}
.nav_list ul{background:url(img/di.jpg) repeat-x; height:46px; float:left; margin-top:6px; overflow:hidden; width:0px; -webkit-transition:width 1s linear;  -moz-transition:width 1s linear; -webkit-box-shadow:3px 3px 3px grey; -moz-box-shadow:3px 3px 3px grey;}
.nav_list:hover ul{ width:500px;}
.nav_list:hover{width:514px;}
.nav_list li{list-style-type:none; float:left; padding:0 20px; line-height:46px;}
.wrapper{width:1000px;height:400px;background-color:#666666; margin-top:20px;}
</style>
<body>
    <div id="nav">
        <div class="nav_list">
            <div class="border"></div>
            <ul>
                <li><a href="">aaa</a></li>
                <li><a href="">aaa</a></li>
                <li><a href="">aaa</a></li>
                <li><a href="">aaa</a></li>
            </ul>
            <div class="border"></div>
        </div>
        <div class="nav_list">
            <div class="border"></div>
            <ul>
                <li><a href="">bbb</a></li>
                <li><a href="">bbb</a></li>
                <li><a href="">bbb</a></li>
            </ul>
            <div class="border"></div>
        </div>
        <div class="nav_list">
            <div class="border"></div>
            <ul>
                <li><a href="">ccc</a></li>
                <li><a href="">ccc</a></li>
                <li><a href="">ccc</a></li>
                <li><a href="">ccc</a></li>
                <li><a href="">ccc</a></li>
            </ul>
            <div class="border"></div>
        </div>
        <div class="nav_list">
            <div class="border"></div>
            <ul>
                <li><a href="">ddd</a></li>
                <li><a href="">ddd</a></li>
                <li><a href="">ddd</a></li>
                <li><a href="">ddd</a></li>
            </ul>
            <div class="border"></div>
        </div>
        <div class="nav_list">
            <div class="border"></div>
            <ul>
                <li><a href="">eee</a></li>
                <li><a href="">eee</a></li>
                <li><a href="">eee</a></li>
                <li><a href="">eee</a></li>
            </ul>
            <div class="border"></div>
        </div>
    </div>
    <div class="layc wrapper">
        
    </div>
    <div class="layc wrapper">
        
    </div>
</body>
</html>

其中base.css文件包括的是一些reset等等。
webkit下效果最佳，效果类似这样：