MENUjquery效果

12/6/2015来源:Javascript教程人气:509

写了几遍,都不满意,删了重写,突然就符合我的预想了。

编写的时候要不断的完善自己的思路。选择适合的思路。

 

BODY:

尽量简化结构。

语义化classname

<body>
    <div id="menubox" class="menubox">
        <div id="menutitle" class="menutitle">
            <div class="hr"></div>
            <div class="mbtext">Menu</div>
        </div>
        <ul id="menu" class="menu">
            <li class="list"><a href="#">All Select</a></li>
            <li class="list"><a href="#">BackTop</a></li>
            <li class="list"><a href="#">Save To Local</a></li>
            <li class="list"><a href="#">Slide</a></li>
            <li class="list"><a href="#">Tab</a></li>
            <li class="list"><a href="#">仿宋</a></li>
        </ul>
    </div>
</body>

CSS:

base.css | common.css | page.css

有层次的编写属性:尺寸 - 位置 - 其他 ps:方便阅读

考虑在浏览器自带的编辑器里编辑,方便预览

<link rel="stylesheet" ype="text/css" href="css/ibase.css" />
<style rel="stylesheet" type="text/css">
.menubox{
width:250px;
height:100%;

position: absolute;
top:0;
left:50%;
margin-left:-125px;

background-color: #F5F5F5;
font-family: 'courier new', 'FangSong'; //courier new字体系统自带,默认是关闭状态,右击显示

-moz-box-shadow: 0px 0px 20px #000000;
-webkit-box-shadow: 0px 0px 20px #000000;
box-shadow: 0px 0px 20px #000000;
overflow: hidden;
}
.menutitle{
width:100%;
height:16px;
margin-top:40px;
overflow: hidden;
text-align: center;
color: #000;
}
.hr{
width:200px;
height:0;
margin-left:25px;
margin-top:8px;
border-bottom: 1px solid #000;
}
.mbtext{
width:70px;
margin-left: 90px;
margin-top:-8px;
background-color:#F5F5F5;
text-align: center;
}
.menu{
margin-top:40px;
color: #696969;
font-size:15px;
text-align: center;
}
.menu .list{
margin-top:20px;
padding: 0 0 3px 0;
cursor: default;
}
a{
color:#696969;
}
a:hover{
text-decoration: none;
color:#000;
}
.menu .underline{
height:0;
margin-top: -1px;
border-top:1px solid #000;
display: none;
}
</style>

JS:

作用域/链

同一个js语句不能混合原声的js和jq.

<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/Javascript">
var lis = $("a");
for(var i=0; i<lis.length; i++){

lis[i].onmouSEOver = function(){
var lineW = $(this).width();
var lineL = $(this).position().left;
var parent = $(this).parent();
var lineClassName = "underline";  //以上变量待整合,到函数或者对象中

if(parent.next().attr("class") != lineClassName)
    parent.after("<li class="+lineClassName+"></li>");

var underLine = parent.next();
underLine.css("width",lineW);
underLine.css("margin-left",lineL);
underLine.fadeIn("slow");
}

lis[i].onmouseout = function(){
    var parent = $(this).parent();
    var underLine = parent.next();
    var lineClassName = "underline";

    if(underLine.attr("class") == lineClassName)
        underLine.fadeOut("slow"); //600毫秒
    }

}
</script>

新手一枚,这个目录是为我练习一些做的查询目录。 ps:暂时就想这些。