jquery+css实现悬浮发光菜单导航效果代码

代码语言:html

所属分类:菜单导航

代码描述:jquery+css实现悬浮发光菜单导航效果代码

代码标签: 发光 菜单 导航 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!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>
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css">
    <style>
@charset "utf-8";
        /* CSS Document */


        body {
            background: #000000;
        }

        #nav
        {
            background: url(//repo.bfw.wiki/bfwrepo/images/nav/slice.jpg) repeat-x;
            width: 100%;
            height: 70px;
        }
        #navigation
        {
            margin-left: 250px;
        }



        #navigation li
        {

            float: left;
            display: block;
        }

        #navigation li a
        {
            background-image: url(//repo.bfw.wiki/bfwrepo/images/nav/sprite.jpg);
            display: block;
            outline: none;
            position: relative;
            height: 70px;
            text-decoration: none;
            width: auto;

        }




        #navigation .home
        {
            background-position: 0px 0px;
            width: 102px;
            height: 70px;

        }

        #navigation .services
        {
            background-position: -102px 0px;
            width: 110px;
            height: 70px;
        }

        #navigation .portfolio
        {
            background-position: -212px 0px;
            width: 108px;
            height: 70px;
        }

        #navigation .about
        {
            background-position: -320px 0px;
            width: 102px;
            height: 70px;
        }

        #navigation .contact
        {
            background-position: -422px 0px;
            width: 103px;
            height: 70px;
        }



        #navigation a .hover {
            background: transparent  url(//repo.bfw.wiki/bfwrepo/images/nav/sprite.jpg) no-repeat;
            display: block;
            opacity: 0;
            position: relative;
            top: 0;
            left: 0;
            height.........完整代码请登录后点击上方下载按钮下载查看

网友评论0