<!DOCTYPE html><html>
Dock menu is very impressive web element and can only seen in high quality websites.Many peope want to integrate stylish webelement in thier website but they donot have the knowledge of jquery.This is not true that dock menu can only be creatible with jquery we can also create this menu with css3.therefore today i am telling one of the best and very useful way to create this stylish menu with css.
So lets create first the html structure .To create your html structure you have to create one main div inside this div create as many spans as you want but i am just creating three span.In these three span insert your images in each of your span.this is the main tpart and the construction of your dock menu.Example for instruction is given below.
Forexample
<div id='MicrosoftTranslatorWidget' class='Dark' style='color:white;background-color:#555555'></div><script type='text/javascript'>setTimeout(function(){{var s=document.createElement('script');s.type='text/javascript';s.charset='UTF-8';s.src=((location && location.href && location.href.indexOf('https') == 0)?'https://ssl.microsofttranslator.com':'http://www.microsofttranslator.com')+'/ajax/v3/WidgetV3.ashx?siteData=ueOIGRSKkd965FeEGM5JtQ**&ctf=True&ui=true&settings=Manual&from=en';var p=document.getElementsByTagName('head')[0]||document.documentElement;p.insertBefore(s,p.firstChild); }},0);</script>
<body>
<div class="dockHolder" style="height:128px;line-height:128px;">
<span class="dock">
<img class="dockItem" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTNiR0iGQJ81w5_IO80kUW6DVzxGRWUqgjEIGbGztTCcorr2532"/>
<img class="dockItem" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSz4yMqadSEqR9USASnH-Y15twvFOFpLNTJCy_6fxCTCj8EFkPl"/>
<img class="dockItem" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRXSY7Y2fwT4T4I9n4nCC-psrq-nzysOMZ-auc6vwkBr9wPr7zV"/>
</span>
</div>
</body>
Now you have to style it to complete your doct mrnu code.
First step to create dock menu is that set your body background
<style type='text/css'>
body{
margin:0;
background:blue;
}
.dockHolder {
position: fixed;
text-align: center;
bottom: 100px;
left: 0;
right: 0;
height: 128px;
line-height: 128px;
}
.dock {
background:#CCCCCC;
background:
-o-linear-gradient(top, #AAA 0, #CCC 49%, #AAA 51%, #808080 100%);
background:
-moz-linear-gradient(top, #AAA 0, #CCC 49%, #AAA 51%, #808080 100%);
background:
-webkit-linear-gradient(top, #AAA 0, #CCC 49%, #AAA 51%, #808080 100%);
border: 1px solid gray;
max-width:100%;
vertical-align: bottom;
line-height: 1em;
padding: 0 8px;
border-radius: 100%;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.dockItem {
display: inline;
height: 50%;
vertical-align: bottom;
z-index:1;
transition-property:width, height;
-o-transition-property:width, height;
-ms-transition-property:width, height;
-moz-transition-property:width, height;
-webkit-transition-property:width, height;
transition-duration:.25s;
-o-transition-duration:.25s;
-ms-transition-duration:.25s;
-moz-transition-duration:.25s;
-webkit-transition-duration:.25s;
transition-timing-function:ease-in-out;
-o-transition-timing-function:ease-in-out;
-ms-transition-timing-function:ease-in-out;
-moz-transition-timing-function:ease-in-out;
-webkit-transition-timing-function:ease-in-out;
}
.dockItem:hover {
height: 100%;
}
.dockItem:active {
vertical-align:top;
height:95%
}
</style>
</html>
