- صفحه اصلي قالب گراف
- انجمن
- آپلود سنتر
- تبليغات
- ورود
- عضويت
- خوراک
- نقشه
- تماس با ما
- ارسال پيام به مدير در انجمن ghalebgraph@gmail.com\09394943902
با سلام خدمت دوستان،
با یک منوی فول 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>
موفق باشید



-
ارسالي ها :
2393 -
عضويت:
10 /7 /1392 -
محل زندگي:
تــهـــران -
تشکرها :
3156 -
تشکر شده:
2755 - تلگرام : xeneral98
- حالت من:
- سیم کارت من :
- مرورگر من :
- جمعه 03 آبان 1392 - 18:53
=================
مطلبت خوبه+تشکر
آواتارتو عوض کن
![]() تشکر شده: |
1 کاربر از xeneral به خاطر اين مطلب مفيد تشکر کرده اند:
|



-
ارسالي ها :
516 -
عضويت:
17 /7 /1392 -
محل زندگي:
.:: | تهران | ::. -
سن:
16 -
تشکرها :
459 -
تشکر شده:
420 -
من در ياهو:
- حالت من:
- مرورگر من :
- جمعه 03 آبان 1392 - 18:57
نقل قول از tafrih-kadehکشتی منو تو.
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
=================
مطلبت خوبه+تشکر
![]()
آواتارتو عوض کن
![]()
![]()
![]()


عوضش کردم.
موفق باشی



-
ارسالي ها :
1527 -
عضويت:
10 /7 /1392 -
محل زندگي:
همین دور و ورا -
سن:
18 -
تشکرها :
1647 -
تشکر شده:
670 -
من در ياهو:
- تلگرام : لاین خخ :|
- حالت من:
- سیم کارت من :
- مرورگر من :
- جمعه 03 آبان 1392 - 19:01
خیلی عالی و خوب بود ممنون



-
ارسالي ها :
1271 -
عضويت:
10 /7 /1392 -
محل زندگي:
بندرعباس -
تشکرها :
2986 -
تشکر شده:
1056 - حالت من:
- سیم کارت من :
- مرورگر من :
- جمعه 03 آبان 1392 - 19:06



-
ارسالي ها :
516 -
عضويت:
17 /7 /1392 -
محل زندگي:
.:: | تهران | ::. -
سن:
16 -
تشکرها :
459 -
تشکر شده:
420 -
من در ياهو:
- حالت من:
- مرورگر من :
- جمعه 03 آبان 1392 - 19:08
نقل قول از warriorخواهش می کنم.خیلی عالی و خوب بود ممنون

نقل قول از cena78خواهش می کنم.مرسی عالیهــ ..!
![]()




-
ارسالي ها :
2580 -
عضويت:
12 /7 /1392 -
سن:
15 -
تشکرها :
2260 -
تشکر شده:
2702 - حالت من:
- سیم کارت من :
- مرورگر من :
- جمعه 03 آبان 1392 - 19:22



-
ارسالي ها :
607 -
عضويت:
19 /7 /1392 -
محل زندگي:
:| -
سن:
17 -
تشکرها :
363 -
تشکر شده:
692 -
من در ياهو:
- حالت من:
- سیم کارت من :
- مرورگر من :
- جمعه 03 آبان 1392 - 19:49



-
ارسالي ها :
2269 -
عضويت:
1 /10 /1392 -
سن:
16 -
تشکرها :
772 -
تشکر شده:
1427 - حالت من:
- سیم کارت من :
- مرورگر من :
- جمعه 08 فروردین 1393 - 14:44
تشکــــــــر
برای ارتباط با ای دی @SirsLamy در تلگرام پ.م بدید ...



-
ارسالي ها :
2211 -
عضويت:
10 /7 /1392 -
محل زندگي:
بهبهان -
تشکرها :
1477 -
تشکر شده:
2051 -
من در ياهو:
- حالت من:
- مرورگر من :
- جمعه 08 فروردین 1393 - 14:52
ممنون



-
ارسالي ها :
700 -
عضويت:
11 /7 /1392 -
تشکرها :
270 -
تشکر شده:
319 - تلگرام : buyukturk
- حالت من:
- سیم کارت من :
- مرورگر من :
- جمعه 08 فروردین 1393 - 14:54
نقل قول از angalداداش تاپیکای قدیمی رو بالا نیار!!! این تاپیک برا آبان پارساله !تشکــــــــر
![]()