Dreamweaver CC Animated CSS Menu Tutorials
Welcome to the Dreamweaver CC Animated CSS Menu Tutorials. This will be fun learning how to create Animated CSS3 Menus.
Below you will find 10 videos. Our goal in this 10 part , “ Dreamweaver CC Animated CSS Menu Tutorials” series is to take you step by step in understanding how to build 100%, PURE CSS3 Menus. No JavaScript. No Jquery. Only CSS3.
It was one thing to have pure CSS menus period, but then people were not satisfied with that, they had to be Animated.
In our “ Animated CSS Menu Tutorials,” we start with the basics of CSS3 animation. We move on to CSS3 animation code syntax. Then we go on to making an object that animates On Hover. Of course On Hover is useless for phones and tablets, so we introduce and demonstrate On Click.
Our “Animated CSS Menu Tutorials” are all about being responsive, this we put this together for you too.
AND, we show you RGBA and CSS3 opacity settings that make the whole project come to life.
For each and every video there is a sample file (or files if you include the CSS and Images). All of the sample files for this entire Animated CSS3 Menu Tutorials can be downloaded by clicking here.
If you didn’t click there, CLICK HERE for the “Animated CSS3 Menu Tutorials” sample files.
Part 1 Introduction to animated CSS3 menu tutorials
Please watch this one first to get an idea of what you will be doing.
Part 2 Intro the CSS3 Animation Basics
Before we go into the Animated CSS Menu Tutorials, you really need to have an idea of what CSS3 animation is and how it works. We will not be doing rocket scientist work, but these basics up front will really help you out a lot.
Part 3 CSS3 Opacity Properties and the new RGBA color model
Both are somewhat new to the web and we will be using both to decorate and animate in our Animated CSS Menu Tutorials.
Part 4 Basic Animation on Hover
Here Ya go, let’s get rockin´. On hover let’s make something happen!
Part 5 Basic Animation on Click
On hover is one thing, but when we get to our phones and tablets, on hover just ain´t so handy. So what we need is as we move ahead with our Dreamweaver CC Animated CSS Menu Tutorials is some CLICK action.
Part 6 Let´s Go Horizontal on Our Hover
We started out in our Dreamweaver CC Animated CSS Menu Tutorials with vertical action but our goal is all about horizontal. Let´s do that now.
Doing this on click is really important for the phones because even Stevie Wonder knows that a hover just won´t work.
Part 8 Let´s Add Images and Bring this to life, and Make it Responsive.
Now to get the Animated CSS Menu Tutorials to have some beauty, lets add some images, and fix them up for the phones.
Part 9 Same concept, but let’s Click instead of Hover
You are really going to like this CLICK thing once you use it a few times. Your boss or your client will give you a $20,000 raise.
Here Ya go everybody. This video of Dreamweaver CC Animated CSS Menu Tutorials wraps it all up and ties it all together.