一个css3制作的下拉菜单-插件特效-星河码客

下面的代码不需要任何解释,所以我在这里粘贴原始版本,这样您就可以快速查看。HTML submenu类来避免使用 .menu ul稍后。为了更好的和更短的CSS选择器。

浮动css.cf:before,.cf:after { content: " "; display: table;}.cf:after { clear: both;}.cf { *zoom: 1;}.menu,.submenu { margin: 0; padding: 0; list-style: none;}/* Main level */.menu { margin: 50px auto; width: 800px; width: fit-content; }.menu > li { background: #34495e; float: left; position: relative; transform: skewX(25deg);}.menu a { display: block; color: #fff; text-transform: uppercase; text-decoration: none; font-family: Arial, Helvetica; font-size: 14px;} .menu li:hover { background: #e74c3c;} .menu > li > a { transform: skewX(-25deg); padding: 1em 2em;}/* Dropdown level*/.submenu { position: absolute; width: 200px; left: 50%; margin-left: -100px; transform: skewX(-25deg); transform-origin: left top;}.submenu li { background-color: #34495e; position: relative; overflow: hidden; } .submenu > li > a { padding: 1em 2em; }.submenu > li::after { content: ''; position: absolute; top: -125%; height: 100%; width: 100%; box-shadow: 0 0 50px rgba(0, 0, 0, .9); } /* Odd stuff */.submenu > li:nth-child(odd){ transform: skewX(-25deg) translateX(0);}.submenu > li:nth-child(odd) > a { transform: skewX(25deg);}.submenu > li:nth-child(odd)::after { right: -50%; transform: skewX(-25deg) rotate(3deg);} /* Even stuff */.submenu > li:nth-child(even){ transform: skewX(25deg) translateX(0);}.submenu > li:nth-child(even) > a { transform: skewX(-25deg);}.submenu > li:nth-child(even)::after { left: -50%; transform: skewX(25deg) rotate(3deg);}/* Show dropdown */.submenu,.submenu li { opacity: 0; visibility: hidden; }.submenu li { transition: .2s ease-out transform;}.menu > li:hover .submenu,.menu > li:hover .submenu li { opacity: 1; visibility: visible;} .menu > li:hover .submenu li:nth-child(even){ transform: skewX(25deg) translateX(15px); }.menu > li:hover .submenu li:nth-child(odd){ transform: skewX(-25deg) translateX(-15px); }不要试图改变窗口的大小,这个菜单演示并不适应,因为这不是本文的重点,我不想变形的CSS

一个css3制作的下拉菜单

在线演示积分下载 6毛下载砍两刀下载

文件目录······

暂无数据

猜你喜欢更多»