کد منوی فول css متحرک برای شبکه های اجتمایی

این کد منوی سی اس اس (CSS) توسط mohamad_77 طراحی شده است و توسط مدیریت سایت کدستان تغییرات کوچکی داده شده است.

این منو کاملا با استفاده از CSS ساخته شده است و در آن از کدهای JavaScript استفاده نشده است. در این منو هیچ تصویری استفاده نشده است.

برای دیدن دمو اینجا کلیک کنید.

این کد را درون head صفحه خود قرار دهید:

<style> .mybox{ padding:0; margin:0; display:block; position:fixed; text-align:right; right:0px; top:50px; direction:rtl; font:11px Comic Sans MS,Tahoma; } .mybox a{ height:32px; line-height:32px; width:32px; font-size:16px; text-decoration:none; font-weight:bold; text-align:left; display:block; clear:both; direction:ltr; overflow:hidden; -khtml-border-radius:4px 0 0 4px; -moz-border-radius: 4px 0 0 4px; -webkit-border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px; -ms-border-radius: 4px 0 0 4px; margin-right:-2px; transition:all 0.5s ease; -o-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -webkit-transition:all 0.5s ease; -khtml-transition:all 0.5s ease; letter-spacing:100px; margin-bottom:2px; } .mybox a:hover{ width:232px; color:#FFFFFF; letter-spacing:0; } .mybox a span{ display:inline-block; width:32px; height:32px; text-align:center; margin-right:232px; transition:all 0.4s ease-in-out; -o-transition:all 0.4s ease-in-out; -moz-transition:all 0.4s ease-in-out; -webkit-transition:all 0.4s ease-in-out; -khtml-transition:all 0.4s ease-in-out; letter-spacing:0; } .mybox a:hover span{ margin-right:-10px; } .mybox a#facebook{ background: #113355; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzExMzM1NSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzMzY2OTkiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #113355 0%, #336699 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#113355), color-stop(100%,#336699)); background: -webkit-linear-gradient(top, #113355 0%,#336699 100%); background: -o-linear-gradient(top, #113355 0%,#336699 100%); background: -ms-linear-gradient(top, #113355 0%,#336699 100%); background: linear-gradient(to bottom, #113355 0%,#336699 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#113355', endColorstr='#336699',GradientType=0 ); color:#135; } .mybox a#facebook span,.mybox a#facebook:hover{ color:#FFFFFF; } .mybox a#twitter { background: #009999; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwOTk5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDU1NTUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #009999 0%, #005555 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#009999), color-stop(100%,#005555)); background: -webkit-linear-gradient(top, #009999 0%,#005555 100%); background: -o-linear-gradient(top, #009999 0%,#005555 100%); background: -ms-linear-gradient(top, #009999 0%,#005555 100%); background: linear-gradient(to bottom, #009999 0%,#005555 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#009999', endColorstr='#005555',GradientType=0 ); color:#099; } .mybox a#twitter span,.mybox a#twitter:hover{ color:#FFFFFF; } .mybox a#flicker { background: #eeeeee; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VlZWVlZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNiYmJiYmIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #eeeeee 0%, #bbbbbb 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#bbbbbb)); background: -webkit-linear-gradient(top, #eeeeee 0%,#bbbbbb 100%); background: -o-linear-gradient(top, #eeeeee 0%,#bbbbbb 100%); background: -ms-linear-gradient(top, #eeeeee 0%,#bbbbbb 100%); background: linear-gradient(to bottom, #eeeeee 0%,#bbbbbb 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#bbbbbb',GradientType=0 ); color:#eee; } .mybox a#flicker span,.mybox a#flicker:hover{ color:#000; } .mybox a#google { background: #800000; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzgwMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM5OTAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #800000 0%, #990000 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#800000), color-stop(100%,#990000)); background: -webkit-linear-gradient(top, #800000 0%,#990000 100%); background: -o-linear-gradient(top, #800000 0%,#990000 100%); background: -ms-linear-gradient(top, #800000 0%,#990000 100%); background: linear-gradient(to bottom, #800000 0%,#990000 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#800000', endColorstr='#990000',GradientType=0 ); color:#800000; } .mybox a#google span,.mybox a#google:hover{ color:#FFFFFF; } .mybox a#yahoo { background: #ffcc00; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmY2MwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjY2MDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #ffcc00 0%, #ff6600 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffcc00), color-stop(100%,#ff6600)); background: -webkit-linear-gradient(top, #ffcc00 0%,#ff6600 100%); background: -o-linear-gradient(top, #ffcc00 0%,#ff6600 100%); background: -ms-linear-gradient(top, #ffcc00 0%,#ff6600 100%); background: linear-gradient(to bottom, #ffcc00 0%,#ff6600 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffcc00', endColorstr='#ff6600',GradientType=0 ); color:#fc0; } .mybox a#yahoo span,.mybox a#yahoo:hover{ color:#000; } </style>

این کد را درون body صفحه خود قرار دهید:
<div class="mybox"> <a href="http://facebook.com" id="facebook"><span>F</span>acebook</a> <a href="http://twitter.com" id="twitter"><span>T</span>witter</a> <a href="http://flicker.com" id="flicker"><span>Fl</span>icker</a> <a href="http://google.com" id="google"><span>G</span>oogle +1</a> <a href="http://yahoo.com" id="yahoo"><span>Y</span>ahoo!</a> </div><div style="position:absolute;top:-200%;"><a href="http://moisrex.rozblog.com/" title="&#1705;&#1583;&#1587;&#1578;&#1575;&#1606;">&#1705;&#1583;&#1587;&#1578;&#1575;&#1606;</a></div>

لطفا لینک ما را از داخل کد بر ندارید.