myMenu version 1.0 build 1

经常做网页前台,总是那么点东西,写烦了就想搞个插件,jQuery方便些.

先把网页的基本东西发出来,

首先是HTML:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>myMenu version 1.0 build 1</title>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <link href="Styles/myMenu.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div id="root">
        <div id="header">
            <div id="menu">
                <ul>
                    <li><a href="#"><span>首页</span></a></li>
                    <li><a href="#"><span>产品</span></a></li>
                    <li><a href="#"><span>服务</span></a></li>
                    <li><a href="#"><span>博客</span></a></li>
                    <li><a href="#"><span>加入我们</span></a></li>
                    <li><a href="#"><span>关于我们</span></a></li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

CSS:

/* myMenu version 1.0 build 1
----------------------------------------------------------*/
body 
{
    margin:0;
    padding:50px 0;
}

div,ul,li,img
{
    margin:0;
    padding:0;
    list-style-type:none;
}
a{ text-decoration:none;}
a:link{ text-decoration:none;}
a:visited{ text-decoration:none;}
a:hover{ text-decoration:none;}
a:active{ text-decoration:none;}

#root 
{
    width:960px;  
}

#header
{
    height:200px;
}

#menu ul
{
    background:url("../images/menu-bg.gif") no-repeat scroll center 0 transparent;
    /*position: relative;*/
    height:50px;
    padding-left:3%;
}
#menu ul li
{
    float:left;
    margin-left:4px;
    margin-top:10px;
}

#menu ul li a
{
    font-size:15px;
    font-weight: bold;
    font-family:微软雅黑;
    
    color: #FFFFFF;
    /*padding: 0 11px 0 0;
    padding:15px 30px 15px;*/
    padding:15px 0px 25px;
}

#menu ul li a span
{
    padding:15px 20px 25px;
}

#menu ul li a:active
{
    background: url("../images/menu-act-right.gif") no-repeat scroll right 0 transparent;
    color: #252222;
    /*outline: 0 none;
    z-index: 9;*/
}
#menu ul li a:active span
{
    background: url("../images/menu-act-left.gif") no-repeat scroll 0 0 transparent;
}
#menu ul li a:hover span
{
    background: url("../images/menu-act-left.gif") no-repeat scroll 0 0 transparent;
}
#menu ul li a:hover
{
    background: url("../images/menu-act-right.gif") no-repeat scroll right 0 transparent;
    color: #252222;
    /*outline: 0 none;
    z-index: 999;*/
}

如果做这个插件呢.呵呵,我也在想,哪有把MENU做成插件的,实在有点2.

但是为了提高开发速度,这样还是不错的.起码方便一下自己是吧!


文章待续.

posted @ 2012-01-31 13:37  M80sic  阅读(116)  评论(0)    收藏  举报