CSS3 Transition Submenu | Lessoncup Programming Blog

Saturday, 12 October 2013

CSS3 Transition Submenu

Without the using of JQuery we can implement Transition Submenu's using CSS3. In this tutorial we will see how to create a simple drop-down menu and add CSS3 transitions to make it more interactive.CSS3 transitions are compatible with all modern browsers. For Internet Explorer that don’t support the transitions.




Let's Start

CSS

In CSS3 three properties we use for the transition: -webkit-transition-property, -webkit-transition-duration, and -webkit-transition-timing-function.

  -webkit-transition-property: This property use to which properties of the element will be animated. If it is set to all every available property will be animated, otherwise you can choose to animate one or more individual properties and leave the other things.

  -webkit-transition-duration: This duration property is set the amount of time from the beginning of the transition to the end. This is specified in seconds: 1s, 0.5s, etc.

  -webkit-transition-timing-function: A transition effect with the same speed from start to end. there are few timing functions are available ex:linear,ease,ease-in,ease-out and by default the -webkit-transition-timing-function in ease mode.

 here we can write these above properties in shortcut : -webkit-transition: all 1s ease;


body{ font-family:Verdana, Geneva, sans-serif;}

#menubar{ width:550px; margin:0 auto; padding:20px;}

#header{
height:55px;
text-shadow:0 1px 0 #000;
background: #485053;
background: -moz-linear-gradient(top,  #485053 0%, #3b4447 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#485053), color-stop(100%,#3b4447));
background: -webkit-linear-gradient(top,  #485053 0%,#3b4447 100%);
background: -o-linear-gradient(top,  #485053 0%,#3b4447 100%);
background: -ms-linear-gradient(top,  #485053 0%,#3b4447 100%);
background: linear-gradient(to bottom,  #485053 0%,#3b4447 100%);
-webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .3);
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .3);
color:#c8cacb;
border-top:1px solid #2d3235;
width:536px;
z-index:100;}


#nav{letter-spacing:1px;border-right:1px solid rgba(255, 255, 255, .1);}

#nav ul{margin:0; padding:0; list-style:none; display:inline-block;}

#nav ul li{float:left;}

#nav li a {float:left;padding:20px;color:#fff;text-transform:uppercase; font-size:12px; text-decoration:none;-webkit-transition: all 500ms ease;
 -moz-transition: all 500ms ease;
 -o-transition: all 500ms ease;
 -ms-transition: all 500ms ease;
 transition: all 500ms ease;}
 

#nav li a:hover{background:#35393b;text-decoration:none;color:#c8cacb;-webkit-transition: background-color 500ms ease;
     -moz-transition: background-color 500ms ease;
     -o-transition: background-color 500ms ease;
     -ms-transition: background-color 500ms ease;
     transition: background-color 500ms ease;}
  

#nav li ul{
background:#FFF;
display:none;
height:auto;
padding:10px;
margin: 55px 0 0 0; 
border:1px solid #EAEAEA;
color:#000;
position:absolute;
width:160px;
text-shadow:none;
z-index:200;/*top:1em;/*left:0;*/}

#nav li:hover ul{
display:block;

}

#nav li ul li{ border-bottom:dashed #EFEFEF 1px;}

#nav li ul li a{color:#000;width:130px; padding:15px;}

#nav li ul li a:hover{background:#35393b;text-decoration:none;color:#FFF;-webkit-transition: background-color 500ms ease;
     -moz-transition: background-color 500ms ease;
     -o-transition: background-color 500ms ease;
     -ms-transition: background-color 500ms ease;
     transition: background-color 500ms ease;}
  
  
#title{margin:0 auto; width:650px; padding:30px;}

h1{font-family:Tahoma, Geneva, sans-serif; color:#09C; font-weight:normal; margin:0 auto;}


HTML

Just take the HTML navigation structure depending on your needs and adds a special class for each menu and sub-menu level.
<div id="title"><h1>Lesson Cup @ CSS3 Transition Submenu</h1></div>
<div id="menubar">
<header id="header" style="position:fixed;">
<div class="header">
<nav id="nav">
<ul>
<li><a href="#">about</a></li>
<li><a id="sub" style="cursor:pointer;">services</a>

<ul>
<li><a href="#">Word Press</a></li>
<li><a href="#">Joomla!</a></li>
<li><a href="#">Open Cart</a></li>
<li><a href="#">PHP Application</a></li>
<li><a href="#">SEO</a></li>
<li><a href="#">Payment Gatway</a></li>
</ul>

</li>
<li><a href="#">blog</a></li>
<li><a href="#" class="order-link">order now</a></li>
<li><a href="#">client area</a></li>
</ul>
</nav>
</div>
</header>
</div>



Live Demo

No comments :

Post a Comment

Mohammad Khasim
Blogger | Web Developer
Hyderabad - INDIA
lessoncup@gmail.com

PHP | My SQL | JQUERY
Web Development Tools | CMS | Frameworks | SEO

Get my Latest Lessons