Related Posts Plugin for WordPress, Blogger...

Simple css3 floating down navigation menu

Simple css3 floating down navigation menu

for web site you can just copy and paste the HTML code inside the div without any images it will work for you where ever you want. Easy to edit and simple shot code with hovering and gradient transition effect.
Simple css3 Floating down Navigation menu bar
Navigation Preview

The Code - Demo 

<html>
<head>

</head>
<body>
<style>
#div
{
width:100px;
height:50px;
background: rgb(19,19,19);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzEzMTMxMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyNjI2MjYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left, rgba(19,19,19,1) 0%, rgba(38,38,38,1) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(19,19,19,1)), color-stop(100%,rgba(38,38,38,1)));
background: -webkit-linear-gradient(left, rgba(19,19,19,1) 0%,rgba(38,38,38,1) 100%);
background: -o-linear-gradient(left, rgba(19,19,19,1) 0%,rgba(38,38,38,1) 100%);
background: -ms-linear-gradient(left, rgba(19,19,19,1) 0%,rgba(38,38,38,1) 100%);
background: linear-gradient(to right, rgba(19,19,19,1) 0%,rgba(38,38,38,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#131313', endColorstr='#262626',GradientType=1 );
transition:height 1s;
-moz-transition:height 1s; /* Firefox 4 */
-webkit-transition:height 1s; /* Safari and Chrome */
-o-transition:height 1s; /* Opera */
float:left;
text-align:center;
padding-top:25px;
}

#div:hover
{
height:150px;
background: rgb(226,226,226);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2UyZTJlMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2RiZGJkYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iI2QxZDFkMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZWZlZmUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left, rgba(226,226,226,1) 0%, rgba(219,219,219,1) 50%, rgba(209,209,209,1) 51%, rgba(254,254,254,1) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(226,226,226,1)), color-stop(50%,rgba(219,219,219,1)), color-stop(51%,rgba(209,209,209,1)), color-stop(100%,rgba(254,254,254,1)));
background: -webkit-linear-gradient(left, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%);
background: -o-linear-gradient(left, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%);
background: -ms-linear-gradient(left, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%);
background: linear-gradient(to right, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=1 );
}
a{
color:white;
font-size:15px;
text-decoration:none;
font-family:verdana,arial;
}

a:hover{
color:black
}
</style>
<a href="#"><div id="div">HOME</div></a>
<a href="#"><div id="div">SERVICES</div></a>
<a href="#"><div id="div">ABOUT US</div></a>
<a href="#"><div id="div">CONTACT</div></a>
</body>
</html>


End of Code

Demo



ABOUT US
CONTACT

2 comments:

  1. There are a few advanced CSS3 generators which can generate the complete CSS3 style sheet in few minutes, that too at one go. Now as a website designer, you don't need to continue copying and pasting the code of a single property one by one for generating just a single style.

    ReplyDelete
  2. Your style of blog presentation is very attractive.The meaningful contribution of your mind reflects on those people who are looking for new ideas and information regarding best Refurbished Smartphones and Refurbished Electronics.Thank you for giving this type of information.Buy Refurbished Electronics, Refurbished Tablets AND Refurbished Mobiles

    ReplyDelete