کد منوی فول css متحرک+دموی آنلاین
سفارش تبليغات در انجــمن قالب گراف ورود به تاپيک اطلاعيه هاي تابستانه قالب گراف
امور گرافيکي و کدنويسي وب خود را به جي جي ميزبان بسپاريد
نام کاربري : پسورد : فراموش

با سلام خدمت دوستان،

با یک منوی فول Css متحرک در خدمت شما هستم.

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

JavaScript استفاده نشده است. در این منو هیچ تصویری استفاده نشده است.

امیدوارم جالب باشد.

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

کد منو:

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

کد:
<style>

.mybox_Ghoghno3{

padding:0;

margin:0;

display:block;

position:fixed;

text-align:right;

right:0px;

top:50px;

direction:rtl;

font:11px Comic Sans MS,Tahoma;

}

.mybox_Ghoghno3 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_Ghoghno3 a:hover{

width:232px;

color:#FFFFFF;

letter-spacing:0;

}

.mybox_Ghoghno3 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_Ghoghno3 a:hover span{

margin-right:-10px;

}

.mybox_Ghoghno3 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_Ghoghno3 a#facebook span,.mybox_Ghoghno3 a#facebook:hover{

color:#FFFFFF;

}

.mybox_Ghoghno3 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_Ghoghno3 a#twitter span,.mybox_Ghoghno3 a#twitter:hover{

color:#FFFFFF;

}

.mybox_Ghoghno3 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_Ghoghno3 a#flicker span,.mybox_Ghoghno3 a#flicker:hover{

color:#000;

}

.mybox_Ghoghno3 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_Ghoghno3 a#google span,.mybox_Ghoghno3 a#google:hover{

color:#FFFFFF;

}

.mybox_Ghoghno3 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_Ghoghno3 a#yahoo span,.mybox_Ghoghno3 a#yahoo:hover{

color:#000;

}

</style>

سپس

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

کد:
<div class="mybox_Ghoghno3">

<a href="http://ghoghno3.ir" id="facebook"><span>G</span>hghno3</a>

<a href="http://P30web.org" id="twitter"><span>P</span>30web</a>

<a href="http://google.com" id="google"><span>G</span>oogle</a>

<a href="http://yahoo.com" id="yahoo"><span>Y</span>ahoo!</a>

<a href="http://ghalebgraph.ir/" id="flicker"><span>G</span>halebgraph</a>

</div><div style="position:absolute;top:-200%;"></div>

موفق باشید

تشکر شده:

5 کاربر از hamidreza به خاطر اين مطلب مفيد تشکر کرده اند: warrior / xeneral / red / daygraph / mohammad /

پاسخ ها

=================

مطلبت خوبه+تشکر

آواتارتو عوض کن

امضاي کاربر :
==========
خسـتــه از تــکــرار فــرداهــای بــی حــاصــل

تشکر شده:

1 کاربر از xeneral به خاطر اين مطلب مفيد تشکر کرده اند: hamidreza /

نقل قول از tafrih-kadeh

=================

مطلبت خوبه+تشکر

آواتارتو عوض کن

کشتی منو تو. گیر دادی به اواتار من

عوضش کردم.

موفق باشی

خیلی عالی و خوب بود ممنون

امضاي کاربر :

خوشحال میشم سربزنید و ممنون از اینکه نظر خواهید داد :دی

نقل قول از warrior

خیلی عالی و خوب بود ممنون

خواهش می کنم.
نقل قول از cena78

مرسی عالیهــ ..!

خواهش می کنم.

مال قبل از میلاد مسیحه

امضاي کاربر :
?!Dɢ Hɪᴄʜɪ Bᴀʜᴀʟ Nɪ Mɪᴅᴏɴɪ

تشکــــــــر

امضاي کاربر :

برای ارتباط با ای دی @SirsLamy در تلگرام پ.م بدید ...

نقل قول از angal

تشکــــــــر

داداش تاپیکای قدیمی رو بالا نیار!!! این تاپیک برا آبان پارساله !


براي نمايش پاسخ جديد نيازي به رفرش صفحه نيست روي تازه سازي پاسخ ها کليک کنيد !