CSS3 On
Hover Horizontal Sliding Menu
The sample file for “CSS3 On Hover Horizontal Sliding Menu” is basicHorzSliderBasic101.html. The basicHorzSliderBasic101.css file is connected and in the same folder.
In this video, “On Hover Horizontal Sliding Menu,” we make our video magical, making it ease in and out in a horizontal fashion, On Hover. Also we put in a background image and add some opacity settings using RGBA color values. How Fabulous!
Before you move ahead in viewing “On Hover Horizontal Sliding Menu.” it would be in your best interests to have a good understanding of two major CSS concepts. Those concepts would be Float and Display Block- Display None. We have videos here on the site covering both:
Float Left, Float Right, Float None
Display Block, Show and Hide page Elements.
The changes you will make to enable you to make the menus vertical as opposed to horizontal in On Hover Horizontal Sliding Menu are pretty easy. All you will do is write one line of code and paste it four times in your CSS document.
As we move along with this 10 part CSS Animated menu series, you will see that there is a lot of fun to be had. One issue to keep in mind is that as of the creation of this video, “CSS3 On Hover Horizontal Sliding Menu,” IE 9 (Internet Explorer 9) does not support this type of animation.
Leave it to Microsoft to always be the biggest pain in the ass for web developers all around the world. At the time of the publishing of this video, “CSS3 On Hover Horizontal Sliding Menu,” IE 9 was only being used by less than 2 percent of the global population. So if the electricity goes out in West Virginia and Mississippi at the same time, the sites you build using these techniques will show up well for everyone else on the planet.
Enjoy, “On Hover Horizontal Sliding Menu.”