当前位置:96看吧 > 实用代码 > 导航菜单 > 纯css实现固定在网页底部导航菜单

纯css实现固定在网页底部导航菜单

时间:2013/06/29
作者:未知
来源:网络转载
查看:
标签:导航菜单

纯css实现固定在网页底部导航菜单

导航菜单是老外设计的固定在底部导航菜单,纯css实现固定在网页底部的效果,为使用任何js与jQuery。菜单上的字体有阴影效果。兼容各种浏览器。96看吧推荐。

该导航菜单的核心部分是sytle代码如下:

  1. <style type="text/css">  
  2. #stickey_footer { /* This will make your footer stay where it is */ backgroundnone repeat scroll 0 0 #1D1D1Dborder1px solid rgba(0000.3); bottom: 0font-familyArialHelveticasans-serifheight40px; left: 50%margin0 auto 0 -490pxpadding0 10pxpositionfixedtext-shadow1px 1px 1px #000000width960px; }  
  3. /* border curves */ 
  4. #stickey_footer { -moz-border-radius: 10px 10px 0px 0px; -webkit-border-radius: 10px 10px 0px 0px; border-radius: 10px 10px 0px 0px; }  
  5. /* hover effect */ 
  6. #stickey_footer:hover { backgroundnone repeat scroll 0 0 #2b2a2a; }  
  7. /* shadow for the footer*/ 
  8. #stickey_footer { -moz-box-shadow:0px 0px 11px #191919; -webkit-box-shadow:0px 0px 11px #191919; box-shadow:0px 0px 11px #191919; }  
  9. #footer_menu { margin0padding0width:auto; }  
  10. #footer_menu li { list-stylenonefloatleftfont-size:12pxpadding12px 14px 14px 14pxborder-right:1px solid rgba(0000.4); background: rgba(0000.1); }  
  11. #footer_menu .imgmenu { padding:5px 8px 3px 14pxfloat:leftbackground:url("images/home.png"13px 5px no-repeatwidth:36pxheight:30pxborder:noneborder-right:1px solid rgba(0000.4); cursor:pointer; }  
  12. #footer_menu li:hover { background:#202020/* Fallback color for old browsers */ background: rgba(0000.3); }  
  13. #footer_menu .imgmenu:hover { background:url("images/home_hover.png"13px 5px no-repeat; }  
  14. #footer_menu li a { displayblockcolor#cccccctext-decorationnone; }  
  15. #footer_menu li a:hover { color#ffffff; }  
  16. #footer_menu li span { display:none; }  
  17. #stickey_footer #social_icons { float:right/* social icons positions */ width:automargin:5px 15px 0pxpadding:0pxoverflow:hidden; }  
  18. #stickey_footer #social_icons li { margin-right:12px/* 12px is the space between each one of them */ float:leftwidth:24pxpadding:0pxheight:32pxlist-style:none_margin-right:0px/* this is for IE6 only */ }  
  19. </style> 

 

 

上一篇:百度蓝色科技感jQuery导航菜单
下一篇:始终悬浮在网页右侧的导航菜单
演示地址
Demo
下载地址
Down
页面举报
Report
关闭页面
Close
收藏页面
Favorites
分享页面
Share
版权信息:栏目内,站内会员所分享的全部“资源/素材/文章”,仅供学习与参考,版权为原作者所有。
下载提示:非注册用户每天可下载一个文件,已注册会员不受限制。
网友评论
数据载入中
验证码
  • 请您注意:
  • ·请不要在评论中含与内容无关的广告链接。
  • ·不良评论请用报告管理员,以利管理员及时删除。
  • ·遵守中华人民共和国的各项有关法律法规
  • ·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
  • ·本站管理人员有权保留或删除评论中的任意内容
  • ·您在本站发表的作品,本站有权在网站内转载或引用
  • ·参与本评论即表明您已经阅读并接受上述条款
相关最新
相关热门