03/11/13

jQuery style menu with CSS3 tobypitman.com

January 2009 December 2008 November 2008 September 2008 August 2008 July 2008

jQuery style menu with CSS3

Heres a quick experiment I did with CSS3. Again I was just mucking about with CSS3 transitions which could one day replace all the fancy jQuery animation tricks
www.tobypitman.com/jquery-style-menu-with-css3/ 2/13

03/11/13

jQuery style menu with CSS3 tobypitman.com

people use. The outcome was a really simple animated sliding verticle menu. If you want to view the demo youll need the lastest Safari version or even better go get the latest nightly build of webkit. This might even work in Chrome but I havent checked it. Oddly enough it didnt seem to like it on OSX Tiger in Coda but in Leopard it was fine? This is all a long way off anyway but good fun to play with! Menu Demo First off in the demo you might notice the gradient which is CSS too. Really easy to do that with this.
b o d y{b a c k g r o u n d :w e b k i t g r a d i e n t ( l i n e a r ,l e f tt o p ,l e f tb o t t o m ,f r o m ( # c c c ) ,t o ( # f f f ) ) ; }

Now well style the un-order list with some padding and a background image to create a ridge like effect that our menu items will appear out of. The cool thing about this is by using -webkit-background-size the image is stretched if you add more items to it making the whole thing a bit more dynamic.
u l # n a v{ l i s t s t y l e :n o n e ; d i s p l a y :b l o c k ; w i d t h :2 0 0 p x ; p o s i t i o n :r e l a t i v e ; t o p :1 0 0 p x ; l e f t :1 0 0 p x ; p a d d i n g :6 0 p x06 0 p x0 ; b a c k g r o u n d :u r l ( s h a d 2 . p n g )n o r e p e a t ; w e b k i t b a c k g r o u n d s i z e :5 0 %1 0 0 % ; }

Everything else is pretty bog standard really. A simple un-ordered list and thats about it. The styling for the list item anchor tags is where it all happens. The addition of the -webkit-transition: is going to allow us to animate to the :hover state.
u l # n a vl ia{ w e b k i t t r a n s i t i o n :a l l0 . 3 se a s e o u t ; }
www.tobypitman.com/jquery-style-menu-with-css3/ 3/13

03/11/13

jQuery style menu with CSS3 tobypitman.com

It says all animatable properties should animate over 300ms using ease-out, similar to jQuerys easing functions. Next well add the styling for the anchor tags with some fancy -webkit-border-radius and -webkit-box-shadow to give it some shape and depth and complete it with a backgroung image for each item to enhance our interface effect, making them look like their coming from underneath the ridge.
u l # n a vl ia{ w e b k i t t r a n s i t i o n :a l l0 . 3 se a s e o u t ; b a c k g r o u n d :# c b c b c bu r l ( b o r d e r . p n g )n o r e p e a t ; c o l o r :# 1 7 4 8 6 7 ; p a d d i n g :7 p x1 5 p x7 p x1 5 p x ; w e b k i t b o r d e r t o p r i g h t r a d i u s :1 0 p x ; w e b k i t b o r d e r b o t t o m r i g h t r a d i u s :1 0 p x ; w i d t h :1 0 0 p x ; d i s p l a y :b l o c k ; t e x t d e c o r a t i o n :n o n e ; w e b k i t b o x s h a d o w :2 p x2 p x4 p x# 8 8 8 ; }

The properties were going to style are color, background-color and left-padding so lets add them to the hover: state.
u l . n a vl ia : h o v e r{ b a c k g r o u n d :# e b e b e bu r l ( b o r d e r . p n g )n o r e p e a t ; c o l o r :# 6 7 a 5 c d ; p a d d i n g :7 p x1 5 p x7 p x3 0 p x ; }

Thats about it really. No javascript and exactly the same effect. Probably be easy to make this degrade nicely for certain browsers. Now all you have to do is wait!
Posted on Saturday, December 20th, 2008 at 1:25 pm. Filed under CSS.

54 Responses to jQuery style menu with CSS3

www.tobypitman.com/jquery-style-menu-with-css3/ 4/13