纯div css二级下拉菜单样式模板
2015-02-16 11:31:32 By: shinyuu
一直以来、大家都知道下拉菜单都是利用JS控制HTML标签来达到下拉菜单的效果、但这样的话、在搜索引擎的快照页面就不会显示二级菜单、如果直接使用css来做菜单的话、在搜索引擎的快照页面就会显示二级菜单、大家可以看下我的博客的菜单、就是使用纯css实现的、在快照页可以正常显示功能菜单、其实、下拉菜单的原理并不难、就是利用CSS的overflow属性和height、以及hover(伪类)、三者相互配合、首先将父菜单和子菜单全部排版出来(父菜单和所有的子菜单在同一个<li>标签里面、实际应用中父菜单不可能只有一个、列表排版比较多)、下面是一个简单的css菜单代码
a { color: #fff; } a:hover { color: #3d61a2; text-decoration: none; } .demo { margin-top: 40px; min-height: 300px; } .page-menu-wrapper { width: 960px; line-height: 45px; margin: 0 auto; background-color: #446cb3; } .page-menu-wrapper > ul > li { position: relative; float: left; border-left: 1px solid #3d61a2; border-right: 1px solid #3d61a2; margin-right: -1px; } .menu-function { float: left; } .menu-share { float: right; } .page-menu-wrapper > .menu-function > li:first-child { border-left: none; } .page-menu-wrapper > .menu-share > li:last-child { border-right: none; } .page-menu-wrapper a { position: relative; display: block; padding: 0 15px; transition: all .3s ease-out; } .page-menu-wrapper > ul > li:hover > a { color: #3d61a2; background-color: #fff; } .page-menu-wrapper > ul > li:hover .dropdown-menu { display: block; } .dropdown-menu { display: none; position: absolute; width: 260px; font-size: 18px; font-weight: bold; text-align: left; background-color: #fff; } .dropdown-menu.categories a { color: #000; } .dropdown-menu.categories a:hover { color: #5bc4be; margin-left: 10px; } #search:target a[href="#search"] { display: none; } #search:target ~ #search-hidden { display: block; } #search-hidden { display: none; padding: 0 5px; background-color: #fff; }
HTML代码
<ul class="menu-function"> <li> <a href="" title="">CATEGORIES</a> <ul class="dropdown-menu categories"> <li><a href="" title="">Design</a></li> <li><a href="" title="">Freebies</a></li> <li><a href="" title="">Tutorials</a></li> <li><a href="" title="">Coding</a></li> <li><a href="" title="">Inspiration</a></li> <li><a href="" title="">WordPress</a></li> <li><a href="" title="">Resources</a></li> </ul> </li> <li><a href="" title="">SHOP</a></li> <li id="search"> <a href="#search" title="">SEARCH</a> </li> </ul>
最后贴上纯css实现的二级和多级菜单Demo的源代码、大家可以参考一下、修改修改也可以融入到自己的项目中
源代码下载链接: http://dwtedx.com/download.html?bdkey=s/1sjwk6KX 密码: el8u
若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力
想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号(ddblogs)
或者你也可以关注我的新浪微博、了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)
如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教
为保证及时回复、可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)
感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛