CSS3 jQuery多级伸出式立体风格菜单.rar

  • D0_810646
    了解作者
  • 4.3KB
    文件大小
  • rar
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-04-14 09:18
    上传日期
CSS3 jQuery多级伸出式立体风格菜单,鼠标放在菜单项上,菜单项向右稍微伸出,以产生交互式的响应效果,本菜单的立体效果基于添加阴影的原理实现,而阴影效果的实现采取了图片调用的方法实现。
css3menusore.rar
  • srcfans.com
  • CSS3+jQuery多级伸出式立体风格菜单
  • images
  • border.png
    13.4KB
  • shad2.png
    1.8KB
  • index.html
    2KB
内容介绍
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS3+jQuery制作立体风格菜单</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8;charset=utf-8" /> <style type="text/css"> * { margin:0; padding:0; } html {height: 100%;} body{ position: relative; height: 100%; background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#fff)); } .navbox { position: relative; float: left; } ul.nav { list-style: none; display: block; width: 200px; position: relative; top: 100px; left: 100px; padding: 60px 0 60px 0; background: url(images/shad2.png) no-repeat; -webkit-background-size: 50% 100%; } li { margin: 5px 0 0 0; } ul.nav li a { -webkit-transition: all 0.3s ease-out; background: #cbcbcb url(images/border.png) no-repeat; color: #174867; padding: 7px 15px 7px 15px; -webkit-border-top-right-radius: 10px; -webkit-border-bottom-right-radius: 10px; width: 100px; display: block; text-decoration: none; -webkit-box-shadow: 2px 2px 4px #888; } ul.nav li a:hover { background: #ebebeb url(images/border.png) no-repeat; color: #67a5cd; padding: 7px 15px 7px 30px; } </style> </head> <body> <div class="navbox"> <ul class="nav"> <li><a href="" rel='nofollow' onclick='return false;'>XHTML</a></li> <li><a href="" rel='nofollow' onclick='return false;'>C++</a></li> <li><a href="" rel='nofollow' onclick='return false;'>Mootools</a></li> <li><a href="" rel='nofollow' onclick='return false;'>HTML5</a></li> <li><a href="" rel='nofollow' onclick='return false;'>CSS</a></li> <li><a href="" rel='nofollow' onclick='return false;'>jQuery</a></li> <li><a href="" rel='nofollow' onclick='return false;'>Ajax</a></li> <li><a href="" rel='nofollow' onclick='return false;'>PHP</a></li> <li><a href="" rel='nofollow' onclick='return false;'>Perl</a></li> </ul> </div> <div class="navbox"> <ul class="nav"> <li><a href="" rel='nofollow' onclick='return false;'>XHTML</a></li> <li><a href="" rel='nofollow' onclick='return false;'>HTML5</a></li> <li><a href="" rel='nofollow' onclick='return false;'>CSS</a></li> <li><a href="" rel='nofollow' onclick='return false;'>jQuery</a></li> <li><a href="" rel='nofollow' onclick='return false;'>Ajax</a></li> <li><a href="" rel='nofollow' onclick='return false;'>PHP</a></li> </ul> </div> <div class="navbox"> <ul class="nav"> <li><a href="" rel='nofollow' onclick='return false;'>XHTML</a></li> <li><a href="" rel='nofollow' onclick='return false;'>HTML5</a></li> <li><a href="" rel='nofollow' onclick='return false;'>CSS</a></li> </ul> </div> </body> </html>
评论
    相关推荐