Common left-side navigation effects implemented by js

The commonly used left-side navigation is simple. JS is generated to improve the navigation performance. You can refer to the application.

Effect display:
 
HTML:
Copy codeThe Code is as follows:
<! -- Menu on the left -->
<Div class = "menu">
<Ul class = "menu_list">
<Li class = "even">
<P class = "menu_title bgfs"> <a href = "#" target = "_ blank"> clothing bags </a> </p>
<P class = "menu_sort">
<A href = "#" target = "_ blank"> Women's Wear </a> <a href = "#" target = "_ blank"> men's wear </a> <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 Wear </a> <a href = "#" target = "_ blank"> men's wear </a> <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 Wear </a> <a href = "#" target = "_ blank"> men's wear </a> <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"> catering and entertainment </a> </p>
<P class = "menu_sort">
<A href = "#" target = "_ blank"> Women's Wear </a> <a href = "#" target = "_ blank"> men's wear </a> <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 Wear </a> <a href = "#" target = "_ blank"> men's wear </a> <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 and training </a> </p>
<P class = "menu_sort">
<A href = "#" target = "_ blank"> Women's Wear </a> <a href = "#" target = "_ blank"> men's wear </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 Wear </a> <a href = "#" target = "_ blank"> men's wear </a> </P>
</Li>
<Li class = "odd">
<P class = "menu_title bgxqt"> <a href = "#" target = "_ blank"> novelty </a> </p>
<P class = "menu_sort">
<A href = "#" target = "_ blank"> Women's Wear </a> <a href = "#" target = "_ blank"> men's wear </a> <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 display -->

JS:
Copy codeThe Code is as follows:
$ (". Menu_list li"). mouseenter (function (){
$ (". Menu_box"). show ();
Var nav_index = $ (". menu_list li"). index (this );
$ (". Menu_cont"). eq (nav_index). show () // the current content of the sliding menu.
. Siblings (). hide ();
});
$ (". Menu"). mouseleave (function (){

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