MENUjquery效果

2024-04-27 15:02:20

字体：大中小

来源：转载

供稿：网友

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

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

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>