Creating Menu Slides With CSS and Jquery

by Mike Ditka September 6, 2022

Menu that when Mouse Hover will change like a slide, made with CSS and Jquery.

This time we will try to make an example menu that can be applied to your website, this menu is quite interesting because it looks a bit animated with the slides.
Menu Slides
Ok, let’s start right away

Ingredients
Electrolize Fonts from Google Web Fonts
jquery
Subtlepattern Egg-Shell
HTML Menu Structure
<div class=”mn-container”>

<ul id=”topnav”>
<li><a href=””>Home</a></li>
<li><a href=””>Services</a></li>
<li><a href=””>Portfolio</a></li>
<li><a href=””>Blog</a></li>
<li><a href=””>About</a></li>
<li><a href=””>Contact</a></li>
</ul>
</div>
There we create a container for the menu, and an unordered list for the menu list.

Code for menu chart
.mn-container{
margin:50px auto;
width:680px;
padding:20px;
background:rgba(255,255,0,.1);
overflow:hidden;
border:1px solid rgba(225,225,225,.9)
}
Here is the code for the List Menu

ul#topnav {