The common left navigation effect _javascript skill of JS implementation

The common left navigation effect, JS simple, in order to improve the performance of navigation, you can refer to the application.

Effect Display:

Html:

Copy Code code as follows:

<!--left menu-->
<div class= "Menu" >
<ul class= "Menu_list" >
<li class= "even" >
<p class= "Menu_title bgfs" ><a href= "#" target= "_blank" > Apparel bags </a></p>
<p class= "Menu_sort" >
<a href= "#" target= "_blank" > Women's </a><a href= "#" target= "_blank" > Men's </a><a href= "#" target= "_ Blank "> Children's Wear </a><a href=" # "target=" _blank "> Package </a><br/>
<a href= "#" target= "_blank" > Shoes </a><a href= "#" target= "_blank" > Accessories </a>
</p>
</li>
<li class= "Odd" >
<p class= "Menu_title bgjs" ><a href= "#" target= "_blank" > Drinks </a></p>
<p class= "Menu_sort" >
<a href= "#" target= "_blank" > Women's </a><a href= "#" target= "_blank" > Men's </a><a href= "#" target= "_ Blank "> Children's Wear </a><a href=" # "target=" _blank "> Package </a><br/>
<a href= "#" target= "_blank" > Shoes </a><a href= "#" target= "_blank" > Accessories </a>
</p>
</li>
<li class= "even" >
<p class= "Menu_title bgjj" ><a href= "#" target= "_blank" > Home building Materials </a></p>
<p class= "Menu_sort" >
<a href= "#" target= "_blank" > Women's </a><a href= "#" target= "_blank" > Men's </a><a href= "#" target= "_ Blank "> Children's Wear </a><a href=" # "target=" _blank "> Package </a><br/>
<a href= "#" target= "_blank" > Shoes </a><a href= "#" target= "_blank" > Accessories </a>
</p>
</li>
<li class= "Odd" >
<p class= "Menu_title bgcy" ><a href= "#" target= "_blank" > Dining entertainment </a></p>
<p class= "Menu_sort" >
<a href= "#" target= "_blank" > Women's </a><a href= "#" target= "_blank" > Men's </a><a href= "#" target= "_ Blank "> Children's Wear </a><a href=" # "target=" _blank "> Package </a><br/>
<a href= "#" target= "_blank" > Shoes </a><a href= "#" target= "_blank" > Accessories </a>
</p>
</li>
<li class= "even" >
<p class= "Menu_title bgmr" ><a href= "#" target= "_blank" > Beauty care </a></p>
<p class= "Menu_sort" >
<a href= "#" target= "_blank" > Women's </a><a href= "#" target= "_blank" > Men's </a><a href= "#" target= "_ Blank "> Children's Wear </a><a href=" # "target=" _blank "> Package </a><br/>
<a href= "#" target= "_blank" > Shoes </a><a href= "#" target= "_blank" > Accessories </a>
</p>
</li>
<li class= "Odd" >
<p class= "Menu_title bgjy" ><a href= "#" target= "_blank" > Education Training </a></p>
<p class= "Menu_sort" >
<a href= "#" target= "_blank" > Women's </a><a href= "#" target= "_blank" > Men's </a><a href= "#" target= "_ Blank "> Children's Wear </a><a href=" # "target=" _blank "> Package </a>
</p>
</li>
<li class= "even" >
<p class= "Menu_title bggyp" ><a href= "#" target= "_blank" > Industrial Products </a></p>
<p class= "Menu_sort" >
<a href= "#" target= "_blank" > Women's </a><a href= "#" target= "_blank" > Men's </a><a href= "#" target= "_ Blank "> Children's Wear </a><a href=" # "target=" _blank "> Package </a>
</p>
</li>
<li class= "Odd" >
<p class= "Menu_title bgxqt" ><a href= "#" target= "_blank" > New peculiar </a></p>
<p class= "Menu_sort" >
<a href= "#" target= "_blank" > Women's </a><a href= "#" target= "_blank" > Men's </a><a href= "#" target= "_ Blank "> Children's Wear </a><a href=" # "target=" _blank "> Package </a><br/>
<a href= "#" target= "_blank" > Shoes </a><a href= "#" target= "_blank" > Accessories </a>
</p>
</li>
</ul>

<div class= "Menu_box Hide" >
<div class= "Menu_cont Hide" >

<div class= "menu_cont01" >
<span class= "Menu_title_video" > Project video </span>
<div class= "Menu_video" >
<ul>
<li><a href= "#" target= "_blank" ></a></li>
<li><a href= "#" target= "_blank" ></a></li>
<li><a href= "#" target= "_blank" ></a></li>
<li><a href= "#" target= "_blank" ></a></li>
<li><a href= "#" target= "_blank" ></a></li>
</ul>
</div>
<div class= "Scroll_menu" >
<span class= "Prev_menu" href= "#" ></span>
<span class= "Next_menu" href= "#" ></span>
<div class= "Roolbox_menu" >
<div class= "Scroll_list_menu" >
<ul>
<li>
<p class= "Ad_logo ad_fs01" >
<a href= "#" target= "_blank" ></a>
</p>
<p class= "Ad_logo" >
<span class= "AD_FS02" >
<a href= "#" target= "_blank" ></a>
</span>
<span class= "Ad_fs03" >
<a href= "#" target= "_blank" ></a>
</span>

</p>
<p class= "Ad_logo ad_fs04" >
<a href= "#" target= "_blank" ></a>
</p>
<p class= "Ad_logo" >
<span class= "AD_FS02" >
<a href= "#" target= "_blank" ></a>
</span>
<span class= "Ad_fs03" >
<a href= "#" target= "_blank" ></a>
</span>

</p>
<p class= "Ad_logo" >
<span class= "Ad_fs05" >
<a href= "#" target= "_blank" ></a>
</span>
<span class= "Ad_fs06" >
<a href= "#" target= "_blank" ></a>
</span>

</p>
</li>
<li>
<p class= "Ad_logo ad_fs01" >
<a href= "#" target= "_blank" ></a>
</p>
<p class= "Ad_logo" >
<span class= "AD_FS02" >
<a href= "#" target= "_blank" ></a>
</span>
<span class= "Ad_fs03" >
<a href= "#" target= "_blank" ></a>
</span>

</p>
<p class= "Ad_logo ad_fs04" >
<a href= "#" target= "_blank" ></a>
</p>
<p class= "Ad_logo" >
<span class= "AD_FS02" >
<a href= "#" target= "_blank" ></a>
</span>
<span class= "Ad_fs03" >
<a href= "#" target= "_blank" ></a>
</span>

</p>
<p class= "Ad_logo" >
<span class= "Ad_fs05" >
<a href= "#" target= "_blank" ></a>
</span>
<span class= "Ad_fs06" >
<a href= "#" target= "_blank" ></a>
</span>

</p>
</li>
</ul>
</div>
</div>
</div>

<div class= "MENUPIC_FSXB" ></div>
</div>



</div>
<div class= "Menu_cont Hide" >2</div>
<div class= "Menu_cont Hide" >3</div>
<div class= "Menu_cont Hide" >4</div>
<div class= "Menu_cont Hide" >5</div>
<div class= "Menu_cont Hide" >6</div>
<div class= "Menu_cont Hide" >7</div>
<div class= "Menu_cont Hide" >8</div>
</div>
</div>
<!--intermediate Project show-->

Js:

Copy Code code as follows:

$ (". Menu_list li"). MouseEnter (function () {
$ (". Menu_box"). Show ();
var nav_index = $ (". Menu_list li"). index (this);
$ (". Menu_cont"). EQ (Nav_index). Show ()//Slide menu corresponds to current content
. Siblings (). Hide ();
});
$ (". Menu"). MouseLeave (function () {

$ (". Menu_box"). Hide ();
});