Effect Show http://hovertree.com/texiao/nav/3/
jquery beautiful Icons Vertical navigation menu is a when the mouse over the menu item, there will be a background mask layer with the mouse movement, the effect is very cool, the icon or vector diagram.
SOURCE download
As follows:
The HTML file code is as follows:
<!DOCTYPE HTML><HTMLLang= "zh"><Head><MetaCharSet= "UTF-8"><Metahttp-equiv= "X-ua-compatible"content= "Ie=edge,chrome=1"> <Metaname= "Viewport"content= "Width=device-width, initial-scale=1.0"><title>JQuery SVG icons Vertical navigation menu code-what to ask</title><BaseTarget= "_blank" /><Linkrel= "stylesheet"href= "Http://hovertree.com/texiao/nav/3/css/style.css"> <style>Body{background:#494A5F;Color:#D5D6E2;Font-weight: -;font-size:1.05em;}a{Color:mediumvioletred} </style></Head><Body> <Divstyle= "text-align:center;margin:5px 0; font:normal 14px/24px ' MicroSoft yahei ';"> <H1>JQuery SVG icons Vertical navigation menu</H1> <!--What to ask: Menu Start - <Divclass= "Menu-container"> <Menu> <ahref= "Http://hovertree.com"> <MenuItem> <imgsrc= "Http://hovertree.com/texiao/nav/3/img/144211.svg" />Avocado</MenuItem> </a> <ahref= "http://hovertree.com/menu/texiao/"> <MenuItem> <imgsrc= "Http://hovertree.com/texiao/nav/3/img/144207.svg" />Banana</MenuItem> </a> <ahref= "Http://hovertree.com/h/bjaf/30dq3r8y.htm"> <MenuItem> <imgsrc= "Http://hovertree.com/texiao/nav/3/img/144210.svg" />Cherry</MenuItem> </a> <ahref= "Http://hovertree.com/h/bjaf/ati6k7yk.htm"> <MenuItem> <imgsrc= "Http://hovertree.com/texiao/nav/3/img/144198.svg" />Eggplant</MenuItem> </a> </Menu> <Divclass= "Sliding-bar"></Div> </Div> <!--What to ask: Menu End - <P>Please move the cursor over the menu item. Applicable browser: Chrome, Edge, FireFox, Opera, proud Tour, 360, Sogou, window of the world and other new browser.</P> <P>Source:<ahref= "http://hovertree.com/"Target= "_blank">How to ask</a> <ahref= "http://hovertree.com/menu/texiao/">Web effects</a> <ahref= "Http://hovertree.com/h/bjaf/buik5tfi.htm">Code description</a> </P> </Div><Scriptsrc= "Http://down.hovertree.com/jquery/jquery-3.0.0.min.js"type= "Text/javascript"></Script><Scripttype= "Text/javascript">$ (window). Ready (function() {initmenu (); }); $('MenuItem'). Hover (function(){ varOffset= $( This). offset (); $('. Sliding-bar'). offset (offset); }); $('Menu'). Hover (function(){ $('. Sliding-bar'). CSS ({opacity:1}); },function(){ $('. Sliding-bar'). CSS ({opacity:0}); }) varInitmenu= function () { var$initElem= $('Menuitem:first-of-type'); varInitoffset=$initElem. offset (); varinitsize={width: $initElem. css ('width'), Height: $initElem. css ('Height') } $('. Sliding-bar'). Offset (initoffset). CSS (initsize)}//hwq2.com</Script></Body></HTML>
Transferred from: http://hovertree.com/h/bjaf/buik5tfi.htm
Effect Summary: http://www.cnblogs.com/roucheng/p/texiao.html
jquery beautiful Icons Vertical navigation menu