Home>

Show secondary menu when mouse hover,This similar effect,Presumably, you will often encounter it when browsing the web,Here is an example.Everyone can take a look

1. Layout:

<div>
<img src="~/images/head_icon.png" />
<div>
<ul>
<li>
<a
href="#">
<span>Change password</span>
</a>
</li>
<li>
<a
href="#"
<<span>exit</span></a>
</li>
</ul>
</div>
</div>

2.js control:

function dropmenu (obj) {
$(obj) .each (function () {
var thespan=$(this);
var themenu=thespan.find (". drop");
var tarheight=themenu.height ();
themenu.css ({height:0, opacity:0});
var t1;
function expand () {
cleartimeout (t1);
//thespan.find("a").addclass("selected ");
themenu.stop (). show (). animate ({height:tarheight, opacity:1}, 200);
}
function collapse () {
cleartimeout (t1);
t1=settimeout (function () {
//thespan.find ("a"). removeclass ("selected");
themenu.stop (). animate ({height:0, opacity:0}, 200, function () {
$(this) .css ({display:"none"});
});
}, 250);
}
thespan.hover (expand, collapse);
themenu.hover (expand, collapse);
});
}
  • Previous Laravel installation and configuration tutorial
  • Next Golang server and client code sharing
  • Trends