你的位置:首页 > Java教程

[Java教程]MENU jquery效果


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

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

 

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 ></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:暂时就想这些。